간단한 예 )
<script>
var now = new Date();
document.write(now);
</script>
자바 스크립트의 위치
1) 내부 자바스크립트
<script>function proc1(){}</script>
<script>
document.write("Hello World!") ;
</script>
2) 외부 자바 스크립트
test.js 파일로 저장
<script src="test.js" type="text/javascript">
ex) <script src="myscript.js"></script>
3) 인라인 자바 스크립트
<input type="button" onclick="alert('hello')">버튼을 누르세요</button>
-자바스크립트 문장 (statement) 들은 웹 브라우저에게 내리는 명령이다.
-주석처리 : // or /* */
- 변수
var 키워드를 사용하여서 선언 (declare) 한다.
let, const(값을 변경할 수 없다) 을 이용해서 변수를 선언할 수 있다.
const PI = 3.131592 ( 상수 처럼 사용 )
let 은 블럭영역에서 사용하고 const 는 전체 영역에서 사요안다.
예제 )
<script>
var x;
x = "Hello World!";
alert(x);
</script>
변수 명명 규칙
- 변수 이름은 문자로 시작해야 한다. ( 숫자로 시작하면 안된다. )
- 변수 이름은 $ 나 _ 로 시작할 수 있다.
- 변수 이름은 대소문자를 구별한다 ( count 와 Count 는 서로 다른 변수 )
- 예약어는 변수명으로 사용할 수 없다.
자료형
수치형(number) - 정수나 실수
문자열(string) - 문자가 연결된것, "" 또는 '' 로 표현
boolean : true 나 false
Undefined : 값이 정해지지 않은 상태
객체형 ( object) - 객체를 나타내는 타입
ex)
<script>
var myCar ={model : "bmw", color : "red", hp: 100};
document.write(myCar.model+"<br>");
document.write(myCar.color+"<br>");
document.write(myCar.hp + "<br>") ;
</script>
산술연산자
대입연산자 : =
복합대입연산자
문자열에서의 + 연산자
문자열과 문자열사이의 + 는 두 문자열을 결합하는 의미
숫자와 문자열을 + 연산자로 합하면 숫자를 문자열로 변환하여 결합된 문자열을 반환한다.
비교연산자
논리 연산자
&& : (x&&y)
: and 연산 x와 y 가 모두 참이면 참 하나라도 거짓이면 거짓
|| : (x||y)
: or 연산 x 나 y 중에 하나만참이어도 참
! : (!x)
: NOT 연산. x 가 참이면 거짓, x 가 거짓이면 참
삼항연산자
(x>y) ? x : y
x>y 가 참이면 x 이고 거짓이면 y
maxValue= (x>y) ? x : y ;
연산자 우선순위
prompt () 함수
<script>
var age = prompt("나이를 입력하세요" "만나이로 입력합니다" ) ;
</script>
질문부분
없어도 되는 부분으로 어떻게 입력해주는지 보여줌..?
</script>
덧셈예제
<html>
<head>
<title>Calculator</title>
<script>
function calc() {
var x = document.getElementById("x").value;
var y = document.getElementById("y".value;
var sum;
sum = parseInt(x) + parseInt(y);
document.getElementById("sum").value = sum;
}
</script>
</head>
<body>
<h3>덧셈 계산기</h3>
<form name="myform" action="...." method="POST">
첫번째 정수 :
<input id="x"><br>
두번째 정수 :
<input id="y"><br>
합계
<input ud="sum"><br>
<input type="button" value="계산" onclick="calc();">
</form>
<body>
</html>
</body>
</html>
HTML 요소에 접근하기
<!DOCTYPE html >
<html>
<body>
<h1 id="test" >
<script>
function func() {
e = document.getElementByid("test");
e.style.color : "red";
}
</script>
<button type="button" onclick="func()" >클릭하세요!</button>
</body>
</html>
연속적인 if 문 예시
<script>
var msg = "";
var time = new Date().getHours();
if(time < 12) {
msg = "Good Morning";
}else if (time < 18 ) {
msg = "Good Afternoon";
}else {
msg = "Good Evening" ;
}
alert(msg);
</script>
</script>
switch 문
<script>
var grade = prompt("성적을 입력하세요 : " , "A-C 사이의 문자로 " ) ;
switch ( grade) {
case 'A' : alert("잘했어요 ! " ) ;
break;
case 'B' : alert("좋으 점수군요" ) ;
break;
case 'C' : alert("괜찮은 점수군요") ;
break;
default : alert("알수 없는 학점입니다. )
}
</script>
</script>
while 문
for 문
<script>
for(var i = 0 ; i < 10 ; i++){
document.write("카운터 : " + i + "<br/>");
}
</script>
중첩 반복문 예제
<style>
table, td {border : 1px solid black;}
</style>
<script>
document.write("<h1>구구단표</h2>");
document.write("<table>");
for(var i = 1; i <=9; i++){
document.write("<tr>");
document.write("<td> + i + </td> ");
document.write("</tr>");
for(var j = 2 ; j <= 9 ; j++ ) {
document.write("<td>" + i * j + "</td>");
}
document.write("<tr>");
}
document.write("</table>");
</script>
di-while 문
<script>
var i = 0 ;
do {
document.write("카운터 : " + i + "<br>" ) ;
i++;
}while ( i < 10);
</script>
for/in 반복문 ( 객체안에 모두 사용 )
객체 안의 속성들에 대하여 어떤 처리를 반복할 수 있는 구조
for/in 반복문을 이용하면 객체 안의 모든 속성에 대하여 어떤 연산을 실행 할 수 있다.
<script>
var myCar = { make : "BMW" , model : "X5" , year : 2013 };
var txt = "";
for( var x in myCar) {
txt += myCar[x] + "";
}
document.write(txt);
</script>
</script>
break 문장
반복문을 벗어나기 위해 사용
continue 문장
현재 실행하고 있는 반복 과정의 나머지를 생략하고 다음 반복문을 시작한다.
예를들어 0 부터 10 까지인데 if (i == 3 ) {continue} 라면 i가 3일때는 건너뛰고 4부터 다시 시작
배열
배열을 생성하는 2가지 방법
1) 리터럴로 배열 생성
var fruits = ["apple" , "banana" , "peach" ];
2) Array 객체로 배열 생성
var fruits = new Array ("apple" , "banana" , "orange");
+3)
var fruits = new Array();
fruits[0] = "Apple";
fruits[1] = "Banana" ;
fruits[2] = "Orange";
배열 예제
<script>
var i ;
var fruits = new Array();
fruits[0] = "Apple";
fruits[1] = "Banana";
fruits[2] = "Orange";
for(i = 0 ; i < fruits.length; i++ ) {
document.write(fruits[i] + "<br>" ) ;
}
for(x in fruits ) {
document.write(fruits[x] + "<br>");
}
</script>
함수 만들기
1. 파라미터도 있고 반환값도 있는 함수
function 함수명 (파라미터1, 파라미터2,....){
return 반환값;
}
2. 파라미터는 있고 반환값은 없는 함수
function 함수명 ( 파라미터1, 파라미터2 .... ) {
명령문;
}
3. 파라미터는 없고 반환 값은 있는 함수
function 함수명 () {
return 반환값;
}
4. 파라미터도 없고 반환값도 없는 함수
function 함수명 () {
명령문;
}
함수의 호출
예제 )
예제 )
무명 함수
함수를 만들어서 한번만 사용할 때 이름을 주지 않고 한번만 사용하는 경우 무명함수 (anonymoust function) 이라고 한다.
function showDialog(str) {
alert(str);
}
showDialot("아녕하세요");
------------------------------->
//무명함수
(
finction(str) {
alert(str);
}
) ("안녕하세요")
window.onload = function () {
}
document.getElementById("para1").innerHTML = sub ();
함수 반환값
지역변수
- 함수 안에서 선언된 변수
- 함수 안에서만 사용가능
- 다른 함수에서도 똑같은 이름으로 선언이 가능함
- 지역변수는 함수가 종료되면 자동적으로 소멸된다.
전역변수
-함수 외부에서 선언된 변수
- 웹 페이지 상의 모든 스크립트와 모든 함수는 전역변수를 사용할 수 있다.
- 전역변수는 사용자가 웹페이지를 닫으면 소멸된다.
선언되지 않은 변수에 값을 대입하면 그 변수는 자동적으로 전역변수가 된다.
alert () 함수
안에 있는 내용을 창으로 띄운다.
confirm() 함수
<script>
var user = confirm("사용자의 답변을 전달합니다" ) ;
</script>
확인 취소 를 클릭할수 있는 창이 띄우고 괄호안에 있는 글자를 물어본다.
전달해준다.
prompt () 함수
<script>
var age = prompt ("나이를 입력하세요" , " 만 나이로 입력합니다.");
</script>
prompt 는 입력해서 받아온다. 앞은 질문하는칸 뒤는 예시를 들어주는 칸
댓글
댓글 쓰기