- 자바 스크립트는 HTML 내에서는 <script>태그로 사용
- <script>는 <head>와 <body> 모두에서 가능
- 위에서부터 아래로 순차적으로 진행
- // 로 주석 입력
Using Alert Windows
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
alert("Hello~JavaScript!!");
alert('안녕 자바스크립트'); //'',"" 둘다 가능
</script>
</head>
<body>
<script>
alert(5+5*2); // 연산도 가능하다
</script>
</body>- alert 함수는 경고창을 생성하며, 내부에서 연산도 가능
- alert 함수 내에서는 줄 바꿈 시 <br>대신 \n을 문자열 내에서 사용
Variables & Printing
- 자바 스크립트에서는 모든 변수는 var로 표기
<!-- 자바스크립트의 출력_3가지
1. document.write()
2. innerHTML : HTML요소안에 출력 -> 이번 회차 마지막에 소개
3. console.log() : 블라우저의 콘솔탭에 출력-->- 출력 시 <br>은 문자열 내에서 작성
- 문자열+boolean=문자열 (”5”+true → “5true”)
Type Casting(형 변환) & eval
- Number, parseInt : 숫자로 형 변환
- parseFloat : 실수형으로 형 변환
<script>
var test1=300;
var test2=300.1;
var test3=Number(test1);
document.write((test3)+10+"<br>");
var test4=parseInt(test2); //정수형으로 변환하므로 300
document.write((test4)+100+"<br>");//400
var a=eval("10.5+10");
document.write(a+"<br>"); //20.5
document.write(parseFloat(a)+parseInt(a)+"<br>"); //40.5
</script>- parseInt로 형 변환 시 소수점 아래 자리는 소멸
- eval( ) 내에서는 문자열 안에서도 연산 가능
Prompt
- 변수를 입력하는 기능
- 프롬프트로 입력하는 모든 변수는 문자열
<script>
var userId=window.prompt("아이디는?");
document.write(userId+"님 환영합니다<br>");
var num=prompt("숫자입력","0");
document.write(typeof(num)+"<br>"); //string
var num1=prompt("숫자1");
var num2=prompt("숫자2");
var num3=prompt("숫자3");
document.write("총 합계는 "+parseInt(num1)+Number(num2)+Number(num3));
</script>- typeof( )는 인자 값의 자료형을 출력
- 프롬프트 함수의 인자 값은 (출력 문구, default 값)이며, default 값 인자는 생략 가능
- 프롬프트로 입력한 변수를 연산하기 위해서는 반드시 형 변환 필요
Confirm
<script>
var ans=confirm("정말 삭제할까요?");
if(ans) //true 1
document.write("삭제되었습니다<br>");
else
document.write("삭제가 취소되었습니다<br>");
</script>- confirm창에서 확인=1 or true, 취소=0 or false
Function
<!--Normal 함수만들기
1. function 함수명(){}
2. function 함수명(para1,para2..){}
3. function 함수명(para1,para2..){
....
return 반환값;
}
리터럴 방식으로 함수만들기..요방식도 많이사용
함수명=function(파라1,파라2..){
return 반환값;
}
-->- 함수 만들기의 다양한 방식
<script>
function hello(){
document.write("자바스크립트 함수만들기 시작!!<br>")
}
hello();
hi=function(){
document.write("함수만들기 리터럴 방식이야<br>")
}
hi();
</script>- 노멀 방식과 리터럴 방식의 함수 작성
<script>
function info(name,age,height,weight){
document.write("이름:"+name+"<br>나이:"+age+"세<br>키:"+height+"cm<br>몸무게:"+weight+"kg<br>")
}
info("홍길동",26,170,60);
</script>- 파라미터 값 받는 함수
Log In by Function
<script>
var rightId="bts";
var rightPw="1234";
function login(id,pw){
if(id==rightId)
{
if(pw==rightPw){
document.write(id+"님 방문을 환영합니다")
} else {
alert("잘못된 비밀번호입니다")
}
} else {
alert("존재하지 않는 아이디입니다")
}
}
var userId=prompt("아이디를 입력하세요","아이디");
var userPw=prompt("비밀번호를 입력하세요","비밀번호");
login(userId,userPw);
</script>Date Function
<script>
var date=new Date();
document.write("date.getFullYear()="+date.getFullYear()+"<br>");
document.write("date.getMonth()="+(date.getMonth()+1)+"<br>");
document.write("date.getDate()="+date.getDate()+"<br>");
document.write("date.getDay()="+date.getDay()+"<br>"); //1:월 2:화...
</script>- var date=new Date( );로 date 함수 생성
- getMonth( ) 함수는 현재 월보다 -1
- getDay( ) 함수는 월~일요일을 1~7의 숫자로 표현
IsNaN(Not a Number)
<script>
document.write(isNaN(100)+"<br>"); //false
document.write(isNaN("hello")+"<br>");//true
document.write(isNaN("a100")+"<br>");//true
document.write(isNaN("100")+"<br>");//false
</script>- 문자일 경우는 true, 숫자일 경우는 false
- 문자형 숫자도 숫자로 인식되어 false를 반환
Variables Covering Area
<script>
//전역변수: 전역에서 사용하는 변수
var a=10;
var b=100;
function outer(){
//지역변수: 지역내에서만 사용하는 변수
var a=20;
document.write("3. a="+a+"<br>"); //20
document.write("4. b="+b+"<br>"); //100
}
document.write("1. a="+a+"<br>");
document.write("2. b="+b+"<br>");
outer();
</script>- 함수 내에서 정의된 변수는 지역변수
- 다만, 변수 앞에 var를 선언하지 않으면 다른 함수에서도 공통적으로 사용할 수 있는 전역변수가 됨
List in JavaScript
<script>
var list='';
list+='<ul>';
list+='<li>Java</li>';
list+='<li>JavaScript</li>';
list+='</ul>';
</script>- 자바 스크립트에서 리스트를 만들 때는 우선 공백의 변수를 작성
- 이후 html에서 리스트 만드는 태그를 차례대로 공백의 변수에 대입 연산자를 통해 삽입
InnerHTML
- html 요소 안에 출력하여 대체
<body>
<div>결과</div>
<script>
document.write(list);
document.body.innerHTML=list;
</script>
</body>- document.write(list);는 html요소 없이 list 출력
- document.body.innerHTML=list;는 html 문서의 body 태그에 list 넣음 (body 태그 내의 요소를 list로 대체)
getElementryById
<body>
<div id="out">bts</div>
<script>
document.getElementById('out').innerHTML="샤이니";
out.innerHTML="샤이니";
</script>
</body>- document.getElementById(’out’) 함수는 주어진 문자열(out)과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환
- .innerHTML=”샤이니”;이므로 id(out)를 가진 요소(bts)를 “샤이니”로 대체
- id가 명시되어 있으므로 위와 같이 (id명).innerHTML=”샤이니”;로 축약 가능
window.onload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
document.getElementById('name').innerHTML="샤이니";
}
</script>
</head>
<body>
<p id="name">bts</p>
</body>
</html>-
위 코드에서는 <script>가 위에 위치하므로 아래의 <body>보다 먼저 로드됨
-
그러나 <script>에서 요구하는 id 값인 name은 <body>에 있으므로 innerHTML 작동 불가
-
하지만 window.onload=function( ) { } 내에 있는 코드는 페이지의 모든 요소가 로드되어야 호출, 즉 html 로딩이 끝나야 작동 시작
Button OnClick
<head>
<script>
function hello(){
alert("두번째 버튼을 클릭했어요!!");
}
//btn1에 이벤트 주기
window.onload=function(){
var b=document.getElementById('btn1');
b.onclick=function(){
alert("3번째 버튼 클릭");
}
}
</script>
</head>
<body>
<button type="button" onclick="alert('안녕하세요')">함수호출_직접이벤트 호출</button>
<button type="button" onclick="hello()">자바스크립트 사용자 함수 호출</button>
<button type="button" id="btn1">이벤트를 자바스크립트로</button>
</body>- onclick 속성은 클릭 시 발생하는 이벤트를 정의
위의 3가지 이벤트 생성 방법
- onclick 속성 내에 함수를 직접 호출하여 이벤트 생성
- 속성에 들어갈 함수를 외부 자바 스크립트에서 호출
- id 값을 통해 자바 스크립트에서 onclick을 구현하여 이벤트 생성
초보개발자