HTML CSS 자바스크립트 무작정 따라하기
Chapter 11. 자바스크립트 기초 문법 2
HTML CSS 자바스크립트 무작정 따라하기 학습목표 다양한 반복문의 종류와 특징을 알 수 있다. 함수의 의미를 알고 여러 용어를 이해할 수 있다. 이벤트와 이벤트 핸들러를 알 수 있다. 객체의 의미와 프로퍼티, 속성 등을 알 수 있다. HTML CSS 자바스크립트 무작정 따라하기
반복문 1) for 문 가장 많이 사용되는 반복문으로, 주로 값을 일정하게 증가시킬 때 많이 사용한다. 기본형식 문장 기본형식 for ([초기값;] [조건;] [반복]) { 문장1 문장2 .... } 예 var sum = 0 for (i=1; i<=5; i++) sum += i document.write("1부터 5까지의 합은 “, sum) HTML CSS 자바스크립트 무작정 따라하기
반복문 2) while 문 3) do … while 문 조건이 참(true)인 동안 문장을 반복한다. 조건부터 체크한 후 true일 경우에만 문장을 반복하기 때문에 조건이 flase라면 문장은 한번도 실행되지 않을 수 있다. 기본형식 while (조건) 문장 3) do … while 문 일단 문장을 한번 실행한 후 조건을 체크한다. 조건이 false라 하더라도 일단 문장이 최소한 한 번은 실행된다. 기본형식 do { 문장 } while (조건) HTML CSS 자바스크립트 무작정 따라하기
반복문 4) break 문 5) continue 문 반복문에서 종료 조건을 충족시키기 전에 반복문을 빠져나올 때 사용한다. 예 기본형식 for (var i = 0; i < 50; i++) { document.write("<h2>" + i + "</h2>") if (i == 10) break } break 5) continue 문 주어진 조건에 해당되는 값을 만나면 반복 문장을 건너뛰고 다음 반복 과정으로 넘어가도록 한다. 기본형식 continue 예 var sum = 0 // 홀수합을 저장할 변수 for (var i = 1; i <= 10; ++i) { if (i % 2 == 0) continue sum += i } HTML CSS 자바스크립트 무작정 따라하기
함수 함수(function) 묶어놓은 명령의 단위 미리 만들어져 있는 함수를 불러다가 사용하기도 하고, 사용자가 새롭게 함수를 만들어 사용하기도 한다. 1) 함수 선언하기 기본형식 function 함수명( [매개변수] ) { [명령들] } 예 <script type="text/javascript"> function changeBackground(colorName) { document.bgColor=colorName; } </script> 2) 함수 호출하기 기본형식 함수명( [인수] ) 예 <input type="button" value="green" onclick="changeBackground('green')"> HTML CSS 자바스크립트 무작정 따라하기
함수 함수와 매개변수 매개변수(parameter) : 값을 받아야 실행할 수 있는 함수에서 나중에 값을 받을 수 있도록 괄호 안에 표시해 놓은 변수 이름. 매개변수는 함수 안에서 다시 변수로 선언하지 않아도 된다. 예 <script type="text/javascript"> function printName( name, field ) { document.write("<h1> 이름: " +name+ "</h1>"); document.write("<h3> 관심분야 : " +field+ "</h3>"); } 함수와 인수 인수(argument) : 함수를 호출할 때 함수의 매개변수 자리에 넣는 실제값 예 yourName = prompt("이름을 입력해 주세요: ", "홍길동") favField=prompt("관심분야는 무엇인가요? : ", "웹 디자인") printName( yourName, favField ) HTML CSS 자바스크립트 무작정 따라하기
함수 결과값 반환하기 – return 문 함수는 값을 반환할 수 있기 때문에 함수를 호출한 후 그 결과를 자바스크립트 안에서의 다른 값으로 사용할 수 있다. 기본형식 return 값 예 <script type="text/javascript"> function sum(p1, p2) { return p1+p2; } </script> HTML CSS 자바스크립트 무작정 따라하기
이벤트와 이벤트 핸들러 이벤트(event) : 웹 브라우저 상에서 일어나는 어떤 동작이나 사건 이벤트 이벤트 발생 시점 abort 웹 페이지를 읽어오는 동안 사용자가 [중지] 버튼을 누르거나 [ESC] 키를 눌렀을 때 blur 현재 보고 있는 페이지에서 다른 페이지로 이동하거나 폼 요소에서 포커스를 다른 곳으로 이동했을 때 click 링크나 이미지맵, 폼 요소 등을 클릭했을 때 change 목록 등에서 다른 값을 선택했을 때 error 웹 페이지를 읽어오는 동안 오류가 발생했을 때 focus 폼 요소 안으로 커서를 옮기거나 브라우저 창 내부를 클릭해서 그 브라우저 창을 활성화시켰을 때 load 웹 페이지를 모두 읽어왔을 때 mouseOut 링크나 이미지맵 밖으로 마우스 커서를 옮겼을 때 mouseOver 링크나 이미지맵 위로 마우스 커서를 올려놓았을 때 select 폼 필드를 선택했을 때 submit 폼 양식에서 [전송](submit) 버튼을 클릭했을 때 unload 현재 보고 있던 웹 페이지를 빠져나갈 때 HTML CSS 자바스크립트 무작정 따라하기
이벤트와 이벤트 핸들러 2) 이벤트 핸들러(event handler) : 이벤트가 발생했을 때 그것을 자바스크립트 함수와 연결해 주기 위해 연결하는 것 이벤트 이벤트 핸들러 abort onAbort blur onBlur click onClick change onChange error onError focus onFocus load onLoad mouseOut onMouseOut mouseOver onMouseOver select onSelect submit onSubmit unload onUnload 기본형식 <태그 이벤트핸들러 = 함수> 예 <img src="abc.jpg" onMouseOver="rollover()"> HTML CSS 자바스크립트 무작정 따라하기
이벤트와 이벤트 핸들러 2) 이벤트 핸들러 ① 인라인 이벤트 핸들러 태그 안에서 직접 자바스크립트 함수를 실행하는 것. 예 <a href="http://poeticalchemist.wordpress.com/..." target="_blank" onMouseOver="window.status = '해당 블로그로 이동합니다'; return true">Poetic Alchemist</a> ② 함수와 함께 이벤트 핸들러 사용 자바스크립트 함수는 <head>~</head> 부분과 <body>~</body> 부분 어디에든 올 수 있지만 이벤트 핸들러에서 사용할 함수들은 대부분 <head>~</head> 사이에 삽입한다. 이렇게 해야 웹 페이지를 모두 읽어오기 전에 함수에 대한 모든 준비를 마칠 수 있기 때문이다. 예 <script type="text/javascript"> function randNum(seed){ …. } </script> …… <input type="button" value="1에서 10까지의 무작위 수" onclick="randNum(10)"> HTML CSS 자바스크립트 무작정 따라하기
객체 객체(object) : 컴퓨터에서 인식할 수 있는 모든 대상 웹 페이지 자체도 객체이고 웹 페이지 안에 포함되는 이미지와 링크, 텍스트 필드 등은 모두 객체이다. 웹 브라우저에서 자동으로 지정하는 내용들도 객체로 저장된다. 프로그래밍을 할 때 자주 사용되는 요소들을 객체로 지정해 놓기도 한다. 객체는 웹 브라우저에 내장되어 있는 것을 사용할 수 있으며, new라는 키워드를 사용하면 사용자가 직접 객체를 만들 수도 있다. 객체는 그 객체의 속성을 담고 있는 프로퍼티(property) 부분과 객체의 동작을 제어하는 메서드(method) 부분으로 구성된다. 프로퍼티(property) : 다른 객체와 차별성을 가지게 하는 것 window 객체에는 브라우저 창의 크기를 결정하는 width 프로퍼티와 height 프로퍼티뿐만 아니라 스크롤바를 표시할지 여부를 지정하는 scrollbars 같은 프로퍼티들이 존재한다. 2) 메서드(method) : 객체의 동작 방법 window 객체에는 간단한 경고 창을 만들어 주는 alert()라는 메서드가 있다. alert() 메서드 안에서 어떤 일이 일어나든 상관없이 메서드 이름이 alert()라는 점만 알고 있다면 간단하게 경고창을 만들 수 있다. HTML CSS 자바스크립트 무작정 따라하기