DB에서 테이블 형태로 읽어온 걸 화면에 표시하고 테이블내 한 행의 게시글의 특정 정보를 알아내고자 할 때에는 this 를 사용한다.
group=$(this).attr('data-group');
==== 예제 파일 =====
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ // html 문서를 다 읽어들인 후 //var lat = $("#div1").attr('data-lat'); // jQuery 방식 var lat = document.getElementById('div1').getAttribute('data-lat'); // javaScript 방식 var lon = $("#div2").attr('data-lon'); alert("lat:"+ lat +" lon:"+ lon); }); </script> <body> <?php //include_once 'getPHP.php'; 다른 파일 내용을 읽어오고자 할 때 $lat = 33.4505296; $lon = 126.570667; ?> <div id="div1" data-lat="<?php echo $lat;?>"></div> <div id="div2" data-lon="<?php echo $lon;?>"></div> </body> </html>
$("#id").dialog() - 해당 id로 지정된 영역의 내용을 다이얼로그로 생성 $("#id").dialog("open") - 다이얼로그 오픈 $("#id").dialog("close") - 다이얼로그를 화면상에서 보이지 않게함 $("#id").dialog("isOpen") - 해당 id를 가진 다이얼로그가 열려진 상태인 경우 true값 $("#id").dialog("moveToTop") - 다이얼로그를 최상위로 배치
- autoOpen : 페이지 로드시 자동으로 다이얼로그 열리는 것을 막고자 할 때 사용 ex) autoOpen:false
- modal : 페이지의 다른 내용위에 최상위로 표시되면서 다른 영역은 선택할수 없도록 할 때 사용 ex) modal:true
var data = '{"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14}';// JSON 형식의 문자열 var dog = JSON.parse(data); // JSON 형식의 문자열을 자바스크립트 객체로 변환함. console.log(dog); </script> <script> function signup() {
var member = { "email" : "test@naver.com", "password" : "1234" };
$.ajax({ url : '/abc/result.php', dataType : 'json', type : 'POST', data : JSON.stringify(member), //그냥 member 사용하면 error 발생! contentType : 'application/json; charset=UTF-8', success : function(result) { console.log(result); } });
<!-- 문서에 여러개의 폼이 있을 경우 document.forms[index] 로 접근할 수 있다. --> <script> $("#sub").click(function(){ $("form").each(function(){ var fd = new FormData($(this)[0]); $.ajax({ type: "POST", url: "solve.php", data: fd, processData: false, contentType: false, success: function(data,status) { //this will execute when form is submited without errors }, error: function(data, status) { //this will execute when get any error }, }); }); }); </script>
설문조사를 만들다보면 체크박스를 여러개 선택하도록 해야 하는 경우가 있다. 이 경우에 사용할 수 있는 자바스크립트 코드이다. 자바스크립트는 초보수준이라 잘 모르는 것은 네이버지식인, 주변 지인 문의, 블로그 검색 등을 하면서 배우고 있는 중이다. 필요한 순간에 써먹을 수 있도록 하기 위해 기록해둔다. 아래 코드는 100% 동작되는 코드이다.
자바스크립트는 자신을 호출한 객체를 가르킬 때 this 키워드를 사용한다. 자바스크립트는 모든 호출이 객체를 통해 이루어지는 매커니즘이다.
this 키워드는 '명시적 객체' 만을 참조한다. 명시적 객체가 없으면 전역객체를 찾는다.
<SCRIPT LANGUAGE="JavaScript"> <!-- function fchk() { var chk_obj = document.getElementsByName("box_chk"); var chk_leng = chk_obj.length; var checked = 0; for (i=0; i < chk_leng; i++) { if (chk_obj[i].checked == true) { checked += 1; } } if (checked < 2 ) { alert("항목을 2개 선택해주세요"); return; } }
// 정해진 개수 이상 체크 불가. var count = 0; function check_q1(chk_obj) { if(chk_obj.checked == true) { count++; } else { count--; } if(count <= 2) { return true; } else { count--; return false; } }
function check(obj,condition, n) { if(condition == false){ obj.checked = false; alert(n + "개를 초과 선택 불가합니다"); } } //--> </SCRIPT>
document.getElementsByName(이름) 은 object 의 name 을 통해 인식한다.
id나 name을 이용해서 value 값을 가져오는 건데, 차이점이라면 getElementById(아이디)로 가져오면 단일값을 가져오고 getElementsByName(이름)은 해당 이름으로 된 객체를 모두 배열로 받아올 수 있다는 점이다.
ID를 가져오는 함수인 getElementById 와 다르게, name은 중복될 수 있는 요소이기 때문에 Element 에 s가 붙어 복수형이 된다. getElementsByName 을 쓸때에는 첫글자를 대문자로 쓰면 안된다.
비록 객체가 한개일지라도 배열로 값을 받아야 받을 수 있다. 즉,
var obj = document.getElementsByName("objectName");
alert(obj[0].value);
<SCRIPT LANGUAGE="JavaScript"> <!-- function fchk() { var chk_obj = document.getElementsByName("box_chk"); var chk_leng = chk_obj.length; var checked = 0; //체크된 개수 파악을 위한 초기변수 for (i=0; i < chk_leng; i++) { if (chk_obj[i].checked == true) { checked += 1;
alert(chk_obj[i].value); // 선택된 순서대로 값을 출력 } } if (checked == 0 ) { alert("선택된 정보가 없습니다"); return; } else { alert(checked + "개 선택"); return; } } //--> </SCRIPT>
특정 id 속성값에 해당하는 요소를 반환 <div id ="idname"> getElementById("idname");
getElementsByName( )
특정 name 속성값에 해당하는 요소를 반환 <input type="text" name="name"> getElementsByName("name");
getElementsByTagName( )
특정 태그 이름과 일치하는 모든 요소를 반환 <input type="text"> getElementsByTagName("input");
getElementsByTagNameNS()
태그의 name 속성의 값과 일치하는 모든 요소를 반환 <input type="text" name="emai"); getElementsByTagNameNS("email");
querySelector()
페이지내에서 특정 선택자 규칙과 일치하는 첫 번째 요소를 반환 <input class="error"> querySelector("input.error");
querySelectorAll()
특정 선택자 규칙 또는 여러 규칙과 일치하는 모든 요소를 반환 <div id="rest"><table><tr><td>… querySelectorAll("#rest td")
Selector API를 이용해 DOM 트리로부터 HTML DOM 객체를 가져오기 위해서는 자바스크립트 코드 실행이 HTML 문서가 파싱된 다음 실행되어야 함 HTML 문서가 파싱되기 전에 자바스크립트 코드가 실행되면 Selector API로 HTML DOM 객체를 DOM Tree 에서 찾지 못함
자바스크립트 코드가 HTML 파싱이 완료된 다음 실행되게 하기 위해서는 .... 1. 자바스크립트 코드를 외부 파일로 작성했을 경우 defer 속성을 부여함 <script src="xxx.js" defer></script> 2. HTML 문서 본문의 맨 아래 <script>코드를 이용하여 자바스크립트 코드를 작성함 3. <script>요소를 이용해 자바스크립트 코드를 <head>요소에 포함시킬 수 있는데 onload 이벤트를 이용하여 페이지가 로드된 다음 자바스크립트 코드가 실행되도록 함
jQuery 는 DOM과 관련된 처리, 일관된 이벤트 연결, 애니메이션(시각적효과), AJAX Application 개발 등을 손쉽게 할 수 있는 강력한 기능을 가진 일종의 자바스크립트 라이브러리다. 즉, jQuery는 크로스브라우징(모든 브라우저에서 동작하는) 클라이언트 사이드의 자바스크립트 라이브러리이다.
jQuery는 사용법이 간단하고, 코딩이 직관적이며, 성능도 뛰어나다.
DOM(Document Object Model)은 웹문서에서 HTML의 문서 요소를 제어하기 위한 문법적인 구조로 W3C에서는 DOM의 표준 규격을 제시했다. - DOM은 document(문서), object(객체), model(모델)을 의미하는 용어로서 문서는 HTML을 의미한다. - 객체는 자바스크립트에서 HTML문서전체에 존재하는 요소들을 객체로 인식한다는 의미이다. - 이 객체는 DOM형식에 있어 노드(node)라는 개념으로 전환되며 element, text, attribute등의 노드가 존재하게 된다 - Text node . HTML 웹 문서의 실제 내용을 의미하게 된다. . TEXT node는 반드시 element node 안에 포함되어 있어야 한다. 그러나 TEXT node가 element node 를 포함하거나 attribute node를 소유할 수는 없다. - Attribute node . 모든 attribute node는 <html> 태그 내에 포함 된다. . attribute node는 (속성,값)의 한쌍으로 표현된다. . attribute node는 element node 안에 포함되며, element node 를 포함 시킬 수 없다 - javascript코드는 노드에 접근하기 위해 getElementById, getElementByTagName등의 메소드를 이용한다. . getElementById : 특정 아이디를 가지고 있는 태그에 접근한다. . getElementByTagName : 특정 태그에 접근한다 . getAttribute : 원하는 태그의 속성을 가져온다 . setAttribute : 원하는 태그의 속성의 값을 설정한다.
jQuery 에는 자바스크립트에서 볼 수 없는 다양한 애니메이션 효과의 구현을 위한 기능적인 함수들이 많이 추가되어 있다.
var h1 = document.getElementById("hello");
를 jQuery 로 하면
var h1 = $("#hello");
로 간단해진다.
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
이벤트가 발생했을 때 자바스크립트/jQuery 실행문을 실행하는 것을 이벤트 핸들러라고 한다.
이벤트는 마우스 이벤트, 키보드 이벤트, 기타 이벤트로 구분할 수 있다.
선택자에 document 가 오면 html 문서 전체가 선택된다.
자바스크립트 또는 jQuery 의 위치가 <head> </head> 사이에 위치한다.
jQuery 는 인터프리터 언어이기 때문에 jQuery가 먼저 실행되고 난 후 <body> 영역에 문서 객체가 로딩된다.
이렇게 되면 선택자가 먼저 실행되어 문서 객체를 선택할 수 없다.
<body> 객체 영역에 문서 객체가 먼저 로딩된 후 jQuery 선택자가 선택되게 하려고 $(document).ready(function(){ 코드 } 또는 간략하게 $(function(){ 코드} 방법을 사용한다.
id 선택자가 #myclick 인 a 엘리먼트가 사용자에 의해 클릭되었을 때 실행된다.
클릭이 되면 $("myclick").html("눌렀어요"); 를 통해서 a 엘리먼트의 내용을 "눌렀어요"로 바꾸게 된다.
.attr()은 attribute 정보를 가져오고, .prop()는 property 정보를 가져온다.
attrubute는 HTML Element 의 속성들을 의미하며 property는 자바스크립트의 프로퍼티를 의미한다.
$("#menu li") 는 #menu 안에 있는 모든(child & descendant) li를 가리키고 $("#menu > li") 는 #menu 바로 아래의 li만 가리킨다. 즉 $("parent > child") 관계에 해당되는 li 가 5개라면 5개가 해당되고 자손(descendant) 요소는 해당되지 않는다.
※ $("기준요소 > 자식요소") ← 선택한 기준 요소를 기준으로 자식(child) 관계에 지정한 요소만 선택한다.
$("기준요소 하위요소") ← 선택한 기준요소를 기준으로 자식(child), 자손(descendant) 해당되는 요소를 선택한다.
$("div + p").css("background-color", "#82fcc1");
의미 : div 태그와 동등한 위치에 있는 p 태그 중에서 div 바로 다음에 나오는 태그만 배경색을 변경하라.
$("div ~ p").css("background-color", "#82defc");
의미 : div 태그와 동등한 위치에 있는 p 태그 중에서 div 태그 이후에 나오는 모든 태그의 배경색을 변경하라.
div 태그 이전에 나오는 p 태그는 해당되지 않는다.
div 태그의 child, descendant 태그는 해당되지 않는다.
$("[attribute]") : [attribute(속성)] selector는 각 selector의 특정 속성을 선택한다. - [attribute=value] : 특정 속성과 값을 가진 각 element를 선택한다. - [attribute!=value] : 특정 속성과 속성 값을 안 가진 element를 선택한다. - [attribute$=value] : 특정 문자값으로 끝나는 selector를 선택한다. - [attribute|=value] : 특정문자로 시작하는 속성과 속성 값을 설정한다. - [attribute^=value] : 특정 속성이 특정 속성 값으로 시작하는 값을 갖는 selector을 설정한다. - [attribute~=value] : 특정 속성이 특정 속성 값을 포함하는 selector를 설정한다. - [attribute*=value] : 특정 속성이 특정 값의 일부분(문자열)을 포함하는 selector를 선택한다.
$("셀렉터").html()
셀렉터 태그내에 존재하는 자식태그을 통째(html + text)로 읽어올때
$("셀렉터").text()
셀렉터 태그내에 존재하는 자식태그들 중에 문자열(text)만 출력하고자 할때
$("셀렉터").val()
INPUT 태그에 정의된 value 속성의 값을 확인하고자 할때
$("태그[속성명=속성값]")
<input type="checkbox" value="1" />
var checkbox_val = $("input[type=checkbox]").val();
<input type="text" id="txt" value="2" /> var text_val = $("input[id=txt]").val();
$(":input태그의type명")
<input type="checkbox" value="1" />
var checkbox_val = $(":checkbox").val();
<input type="text" value="2" /> var text_val = $(":text").val();
<li> 태그 안에 있는 <a> 태그의 href 속성 값이 "http"로 시작하는 <a> 태그를 선택 $("li a[href^='http']").css({color:"#f90"});
<li> 태그 안에 있는 <a> 태그의 href 속성 값이 "com/"으로 끝나는 <a> 태그를 선택 $("li a[href$='com/']").css({color:"#f90"});
<li> 태그 안에 있는 <a> 태그의 href 속성 값이 "5"가 포함되어 있는 <a> 태그를 선택 $("[href*='5']").css({color:"#f90"});
<img> 태그의 src 속성이 "images/sample1.jpg"와 일치하지 않는 이미지 태그를 선택 $("img[src='images/sample1.jpg']").css({border:"1px solid #f90"}); $("img[src!='images/sample1.jpg']").css({border:"1px solid #f90"});
<li> 태그 안에 있는 <a> 태그의 class 속성이 있는 모든 태그를 선택 $("li a[class]").css({color:"#f90"});
기본 필터 선택자 :
filter 선택자에 사용되는 형식은 filter 선택자 앞에 :(클론)을 붙여 표현한다.
- $("li:eq(6)").css({"background-color":"#666", color:"#fff"}); // li 항목 중에서 index가 6인 <li> 태그 선택
- $("li:gt(6)").css({"background-color":"#666", color:"#fff"}); // index가 6 뒤에 있는<li> 태그 모두 선택
- $("li:lt(6)").css({"background-color":"#666", color:"#fff"}); // index가 6 앞에 있는 <li> 태그들을 모두 선택
- $("li:first, li:last").css({"background-color":"#666", color:"#fff"}); // <li> 태그 중 처음과 마지막 노드 선택
- $("li:not(:eq(6))").css({"background-color":"#666", color:"#fff"}); // <li> 태그 중 index가 6인 것을 제외한 나머지를 선택
// 스크롤 따라다니는 박스 div jquery var currentPosition = parseInt($("#sidebox").css("top")); $(window).scroll(function() { var position = $(window).scrollTop(); $("#sidebox").stop().animate({"top":position+currentPosition+"px"},1000); });
// 롤오버(rollover) 이미지
<script type="text/javascript"> $(function() { $("img[src='images/aaa.jpg']").hover(function() { $(this).attr("src", "images/aaa_on.jpg"); // 변경할 이미지 }, function() { $(this).attr("src", "images/aaa.jpg"); // 원래 이미지 });
<script type="text/javascript"> $(function() { // :eq(n)은 특정 셀렉터가 여러개의 복수 요소를 지정할 경우 $("#box > input:eq(0)").click(function() { //첫 번째 input 버튼을 누른 경우 $("#box > div").toggle(300);// slideToggle(300); fadeToggle(300); });
ㅇ 변수(Variable) - 변수는 변화하는 값을 저장하는 공간이다. 변수는 한번에 1개의 데이터만 저장 가능하다. - 변수의 선언은 변수만 선언하고 값을 할당하지 않거나, 값을 할당하기도 한다. var temp; // morden Javascript 에서는 더 이상 var 변수를 사용하지 않는다. var temp, i, data; var temp = 10;
- 변수명은 대문자 Temp 로 작성했으면 출력하거나 다른 곳에서 이용할 때 temp 라고 하면 에러가 발생한다. 변수명은 반드시 영문자, 숫자, _(underbar, underscore) 로만 사용해야 하며, 공백문자는 포함할 수 없다. 키워드를 사용할 수 없고, 변수 이름의 길이에는 제한이 없다.
첫글자가 숫자로 시작할 수 없다.
!, #, ?, $, @ 등과 같은 특수문자는 올 수 없다.
자바스크립트 문법 안에서 규정한 예약어(키워드)는 변수로 사용할 수 없다.
- 자바스크립트 데이터 타입(변수에 저장 가능한 데이터) 숫자형 데이터, 문자형 데이터, 논리형(boolean)형 데이터, 널(Null)형 데이터 이다. 변수형을 선언할 때에는 숫자형, 문자형 등을 구분하지 않는다. 숫자형 변수는 정수, 실수 구분이 없다. 문자열 변수는 작은 따옴표 나 큰 따옴표로 감싸야 한다. status = "My computer is working." document.write(status);
ㅇ 참, 거짓 판별
- 자바스크립트에서는 소문자로 true 와 false 를 판별한다.
TRUE는 '정의되지 않음' 오류가 발생한다.
즉, 불린(boolen) 타입 : true/false
- 참인지 거짓인지 확인할 때
거짓으로 평가되는 false 문자열 자체와 0, -0, 빈 문자열, null, 비정의, NaN 을 제외하고는
모든 값은 참으로 간주한다.
즉, 비교결과가 0, null, 빈문자열(""), false, undefined, NaN 으로 판단되면 false 다. if(1 == true) document.write('true') // 참
ㅇ 자료형 확인 : typeof 연산자를 이용 - 언제든지 type of 연산자를 이용해 변수의 형식을 확인할 수 있다. - 변수를 var n 으로 선언했다면, type of n 으로 확인한다. <script> alert(typeof('String')); //String alert(typeof(123)); //Number alert(typeof(true)); //Boolean alert(typeof(function(){})); //Function alert(typeof({})); //Object alert(typeof(abc)); // undefined : 아직 값이 설정되지 않는 것을 의미 // 변수를 선언했지만 초기화를 하지 않았을 경우에도 undefined 출력된다 </script>
ㅇ 이용문법 - \n : 줄바꿈 - 문자열 연결은 + 를 사용한다. '이런'+'식으로도'+' '+'출력 가능' PHP 에서는 마침표(.)로 문자열을 연결한다. - \t : Tab - \' : 작은 따옴표 - \" : 큰 따옴표 - \\ : 역슬레쉬(\) - % : 나머지 연산자, alert(5 % 3); - 변수 : 값을 저장할 때 사용하는 식별자, 변수선언 var 식별자;
ㅇ 연산처리
- 자바스크립트의 연산자는 수식의 왼쪽에서 오른쪽으로 처리된다.
- || 연산자는 첫번째 피연산자가 참(true) 이면, 두번째 피연산자는 실행되지 않는다.
의도하지 않는 문제가 발생할지 잘 확인해야 한다.
- 다중 대입(a = b = c = 5) 은 가장 오른쪽이 먼저 실행되고, 오른쪽에서 왼쪽으로 계속 처리된다.
ㅇ 객체(object)
- 자바스크립트는 객체지향언어는 아니지만, 객체를 사용하기 때문에 객체(object) 기반 언어라고 한다.
객체는 속성(property)과 methods 를 가진다.
- 자바스크립트의 객체는 내장 객체, BOM(브라우저 객체 모델), DOM(문서 객체 모델)로 나눌 수 있다.
- 내장 객체를 생성할 때는 new 라는 키워드와 생성함수를 사용한다. (ex, var 참조변수=new Date();)
내장 객체인 경우는 자체 자바스크립트 문법에서 정의된 속성과 메소드를 알아야 한다.
- 객체 생성할 때 생성자 함수가 필요없는 객체 : Math Object, Number Object, String Object, RegExp Object
- parseInt("20.5px") + 30 = 50
- parseFloat("20.5px") + 30 = 50.5
- function으로 정의된 생성자 함수의 객체의 정의는 new를 이용한다. - 생성자함수 안에는 this라는 용어를 이용해 정의한다.
window.메소드(인자 값) --- window 객체의 속성 --- - status : 상태 표시줄에 표시할 문자열 지정 - window : 창 자신을 가리킴 - frames : 창에 포함된 프레임을 배열 형태로 지정 - opener : open() 메소드를 사용해서 새 창을 열었을 경우, 새 창을 열도록 한 문서를 가리킴 - parent : 주종 관계를 이루고 있는 프레임 문서에서 상위 프레임을 가리킴 - self : 현재 작업 중인 창, 즉 자기자신을 가리킴 - top : 프레임이 설정되기 전의 상태로 돌아감, 프레임을 모두 무시하고 창 하나만 남음 - screenX : 창의 x 좌표 반환 - screenY : 창의 y 좌표 반환 - closed : 창이 닫혀 있는지 확인한 후 true, false 반환 - name : 창 이름 반환
window 객체 메서드 - alert() : 경고용 대화상자를 띄워줍니다. - confirm() : 확인, 취소를 선택할 수 있는 대화상자를 띄워줍니다. - open() : 새로운 창을 오픈합니다. - prompt() : 입력창이 있는 대화상자를 띄워줍니다. - setTimeout() : 일정 간격으로 함수를 호출하여 수행합니다. (Millisecond 단위) - clearTimeout() : setTimeout 메소드를 정지합니다. - eval() : 문자열을 숫자로 변환합니다. - toString() : 오브젝트를 문자열로 변환합니다. - blur() : focus가 다른 객체로 이동합니다. - focus() : focus를 지정합니다. - scroll() : 창을 스크롤 합니다. - valueOf() : 오브젝트 값을 반환합니다. - back() : 한 단계 전 URL(이전화면)로 돌아갑니다. (IE 지원 불가) - find() : 창안에 지정된 문자열이 있는지 확인, 있다면 true 없으면 false를 반홥합니다. (IE 지원 불가) - forward() : 한 단계 뒤의 URL(다음화면)로 이동랍니다. (IE 지원 불가) - home() : 초기화 홈페이지로 이동합니다. (IE 지원 불가) - moveby() : 창을 상대적인 좌표로 이동합니다. 수평방향과 수직방향의 이동량을 픽셀로 지정합니다. - moveto() : 창을 절대적인 좌표로 이동합니다 . 창의 왼쪽 상단 모서리를 기준으로 픽셀을 지정합니다. - resizeby() : 창의 크기를 상대적인 좌표로 재설정합니다 . 밑변의 모서리를 기준으로 수평방향, 수직방향을 픽셀로 지정합니다. - resizeto() : 창의 크기를 절대적인 좌표로 재설정합니다 . 창 크기를 픽셀로 지정합니다. - scrollby() : 창을 상대적인 좌표로 스크롤합니다. 창의 표시영역의 수평방향과 수직방향에 대해 픽셀로 지정합니다. - scrollto() : 창을 절대적인 좌표를 스크롤합니다. 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정합니다. - stop() : 불러오기를 중지합니다. (IE 지원 불가) - captureEvents() : 모든 타입의 이벤트를 판단합니다. - setInterval() : 일정시간마다 지정된 처리를 반복합니다. - clearInterval() : setInterval 메소드의 정지합니다. - print() : 화면에 있는 내용을 프린터로 출력합니다. - handleEvent() : 이벤트 취급자를 정합니다. - releaseEvent() : 다른 계층의 이벤트로 이벤트를 넘깁니다. - routeEvent() : 판단한 이벤트와 같은 계층의 이벤트입니다. - toSource() : 오브젝트값을 문자열로 반환합니다.
window 객체 이벤트 핸들러 - onLoad : 문서를 읽을 때 발생합니다. - onUnload : 현재 문서를 지울려고 할 때 합니다. - onBlur : 브라우저가 포커스를 잃을 때 발생합니다. - onFocus : 브라우저에 포커스를 얻을 때 발생합니다. - onDragDrop : 사용자가 다른곳에서 객체를 브라우저 안에 넣으려고 할 때 발생합니다. (IE 지원 불가) - onError : 문서를 읽는 중에 에러가 생길 때 발생합니다. - onMove : 브라우저의 위치를 변경했을 때 합니다. (IE 지원 불가) - onResize : 창의 크기를 변경했을 때 합니다. (IE 지원 불가)
ㅇ Documents 객체
브라우저의 내장 객체 중 window객체의 바로 하위에 존재하는 객체. - windows.document.~ 으로 표현하는 것이 정상이지만 보통은 window를 생략한다.
ㅇ history 객체
브라우저 기록에 대한 정보를 가지고 있는 객체이다.
- length : 히스토리에 있는 URL의 개수 - back() : 히스토리 리스트에서 한 단계 뒤로 이동 - forward() : 히스토리 리스트에서 한 단계 앞으로 이동 - go() : 히스토리 리스트에서 원하는 위치로 이동
자바스크립트는 네스케이프社에서 개발한 HTML 문서 내에 삽입되어 동적인 웹페이지를 구현할 수 있는 스크립트이다. 독립된 응용프로그램의 형태를 지니지 못하는 스크립트 언어이다. 객체를 이용하여 프로그래밍하는 객체기반언어다.
자바스크립트는 웹 페이지의 HTML 엘리먼트에 DOM(document object model)이라는 좀 더 정형화되고, 구조화된 정의가 추가되면서 더욱 강력해졌다. 자바스크립트는 스크립트 언어의 특성 상 플랫폼에 독립적이며 모든 웹 브라우저에서 동일한 실행 결과를 얻을 수 있다. 프로그램 코드가 직접 html문서에 삽입되어, 브라우저에서 html파일을 읽을 때 같이 해석되고 실행된다. 컴파일 과정이 필요 없으며, 브라우저만 있다면 실행이 가능하다. 클라이언트에서만 실행되기에 정보를 서버에 보낼 필요 없이 처리할 수 있다. 소스 코드가 노출되어 누구든지 복사하여 사용할 수가 있다.
HTML안에 삽입 될 때는 <script> ~ </script>안에 정의한다.
<script> ~ </script>의 위치는 <head>~</head>태그 또는 <body>~</body>태그에 모두 정의 가능하다.
- HTML 페이지의 <body> 태그 안을 자바스크립트에서는 document 라고 부른다. - 스크립트 실행문 document.write(); 부분의 document 를 객체(object)라고 부르고 write() 는 '매서드(method)'라고 부른다.
- 문장 끝에는 세미콜론';'을 적어서 문장의 끝을 알려주어라. 자바스크립트에서는 새로운 줄이 세미콜론과 똑같이 동작하여 ';'를 붙이지 않아도 되기는 하다. 하지만, 한줄에 하나 이상의 문장을 배치하려면 세미콜론 ';' 으로 나눠야 한다. - document.write(); 는 PHP의 echo 나 print 명령어와 같다. document.write("Hello World");
ㅇ 자바스크립트 주석문 : // 와 /* */ // : 한 줄 주석 처리. 프로그램 코드 끝에 사용 /* ~ */ : 한 줄 이상의 주석 처리 HTML 주석 태크는 <!-- 내용입력 -->
ㅇ 문장 끝에는 세미콜론';'을 적어서 문장의 끝을 알려준다
ㅇ 변수 만드는 규칙 - 사용 가능한 문자는 영문자, 숫자, _(underbar, underscore)이다
- 숫자로 시작할 수 없다.
- _(underbar , underscore)를 제외한 !, #, ?, $, @ 등과 같은 다른 특수문자는 올 수 없다. - 공백은 허용되지 않는다. - 자바스크립트 문법 안에서 규정한 예약어(키워드)는 변수로 사용할 수 없다.
ㅇ 식별자 종류 - 식별자 뒤에 괄호가 없고 단독으로 사용 : 변수 - 식별자 뒤에 괄호가 있고 단독으로 사용 : 함수 - 식별자 뒤에 괄호가 없고 다른 식별자와 사용 : 속성 - 식별자 뒤에 괄호가 있고 다른 식별자와 사용 : 메서드
ㅇ 이용문법 - \n : 줄바꿈 - 문자열 연결은 + 를 사용 : '이런'+'식으로도'+' '+'출력 가능' - \t : Tab - \' : 작은 따옴표 - \" : 큰 따옴표 - \\ : 역슬레쉬(\) - % : 나머지 연산자, alert(5 % 3); - 변수 : 값을 저장할 때 사용하는 식별자, 변수선언 var 식별자;
ㅇ 자료형 확인 :typeof연산자를 이용 <script> alert(typeof('String')); //String alert(typeof(123)); //Number alert(typeof(true)); //Boolean alert(typeof(function(){})); //Function alert(typeof({})); //Object alert(typeof(abc)); //Undefined : 선언되지 않은 변수를 출력하려고 할 때 // 변수를 선언했지만 초기화를 하지 않았을 경우에도 undefined 출력된다 </script>
# null 은 의도해서 비워놓은 값
function getType(data) { return Object.prototype.toString.call(data).slice(8,-1); }
ㅇ switch 문 - 코드를 읽다가 break 를 만나게 되면 switch 문을 빠져 나가게 된다.
ㅇ 삼항 연산자 - (불 표현식) ? (참일 때 실행되는 문장) : (거짓일 때 실행되는 문장) - 삼항연산자는 코드가 너무 복잡해지므로 한 줄로 적을 수 있을 때만 사용하는 것이 좋다.
반복문 : for, while, do ~while
ㅇ for 문 (For statement) for (초기식; 조건식; 종결식) { // 1. 먼저 초기식을 실행하고 조건식을 비교 문장 // 2. 조건식이 참이면, 문장을 실행한 후 종결식을 실행하고 } // 3. 다시 조건식을 비교하고, 참이면 문장실행후 종결식을 실행(반복) continue; // continue를 만나면 continue 이전 까지의 문장만이 실행이 되고 다음 반복으로 넘어감
ㅇ while 문 while (불 표현식) {// 불 표현식이 참인 동안 수행문을 실행하고, 거짓이면 수행문을 실행하지 않는다. 수행문 ... }
ㅇ do while 문 do { 문장 } while (불 표현식) // 무조건 한번 실행 후 반복
# 변수 유효범위(Variable Scope)
형변환(Type conversion) === 일치연산자 == 동등연산자 : 형변환이 발생한다.
Falsy(거짓 같은 값) false, '', null, undefined, 0, -0, NaN 1 + undefined ==> NaN
ㅇ 배열
- 배열은 여러 개의 변수를 한곳에 저장할 수 있는 자료형이다. - 자바스크립트에서는 문자열과 숫자, 불, 함수, 객체와 정의되지 않은 자료형까지 총 6가지의 자료형이 존재 - 배열은 이중 객체의 일종으로, 대괄호([])를 이용해서 생성 - 배열 안에 입력된 값을 배열 요소라고 부른다. - alert(array[1]); // 배열 기호 안에 들어간 숫자를 인덱스(Index)라고 부른다. - for (var i in array) 은 for (var i = 0; i < array.length; i++) 와 같은 의미
<script> var lls = document.getElementsByTagName('li'); for(var i in lls){ lls[i].style.color = 'blue'; } </script>
jsfrm1.zip
