차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
양쪽 이전 판이전 판다음 판 | 이전 판 | ||
tech:javascript [2015/04/16 11:04] – [defer & async] V_L | tech:javascript [2022/10/21 00:25] (현재) – [예제] V_L | ||
---|---|---|---|
줄 1: | 줄 1: | ||
+ | {{tag> | ||
======자바스크립트 (Javascript)====== | ======자바스크립트 (Javascript)====== | ||
줄 4: | 줄 5: | ||
- | 자바스크립트는 | + | 자바스크립트는 HTML 문서내에 삽입되어 동적인 웹페이지를 구현할 수 있는 스크립트언어이다. 네스케이프社에서 개발하였다. |
줄 13: | 줄 14: | ||
* | * | ||
* 브라우저에 대한 우수한 호환성으로 주로 Client-side에서 프로그래밍하는 스크립트로 사용된다. | * 브라우저에 대한 우수한 호환성으로 주로 Client-side에서 프로그래밍하는 스크립트로 사용된다. | ||
+ | =====특징===== | ||
===장점=== | ===장점=== | ||
* 프로그래밍 언어와 비교 간단하고 배우기 쉽고, 신속하게 개발가능 | * 프로그래밍 언어와 비교 간단하고 배우기 쉽고, 신속하게 개발가능 | ||
줄 27: | 줄 28: | ||
* 프레임 조절 윈도우 조절 가능 | * 프레임 조절 윈도우 조절 가능 | ||
* 히스토리 관리 가능 | * 히스토리 관리 가능 | ||
+ | |||
+ | =====같이보기===== | ||
+ | |||
+ | * [[http:// | ||
+ | * [[javascript_learning]] | ||
- | | + | =====정의===== |
- | ====정의==== | + | |
HTML안에 삽입 될때는 < | HTML안에 삽입 될때는 < | ||
줄 38: | 줄 43: | ||
< | < | ||
+ | < | ||
<script language=" | <script language=" | ||
< | < | ||
+ | </ | ||
<file html> | <file html> | ||
줄 46: | 줄 53: | ||
< | < | ||
< | < | ||
- | <script language= | + | <script language= |
<!-- | <!-- | ||
…….. | …….. | ||
줄 57: | 줄 64: | ||
</ | </ | ||
- | ===파일=== | + | ====파일==== |
파일을 불러올 때는 | 파일을 불러올 때는 | ||
< | < | ||
줄 74: | 줄 81: | ||
둘의 차이를 결정짓는 중요한 것은 바로 스크립트가 실행되는 시점이 서로 다르다는 것인데, async script는 window의 load event 전 내려받는 즉시 바로 실행되는 데 반해 defer script는 문서의 parsing 작업이 끝난 후 DOMContentLoaded event 전에 문서에 삽입된 순서에 따라 실행된다. | 둘의 차이를 결정짓는 중요한 것은 바로 스크립트가 실행되는 시점이 서로 다르다는 것인데, async script는 window의 load event 전 내려받는 즉시 바로 실행되는 데 반해 defer script는 문서의 parsing 작업이 끝난 후 DOMContentLoaded event 전에 문서에 삽입된 순서에 따라 실행된다. | ||
- | * 출처 [[http:// | + | {{: |
+ | |||
+ | * 출처 [[http:// | ||
===XHTML=== | ===XHTML=== | ||
인라인 JavaScript 코드는 항상 < | 인라인 JavaScript 코드는 항상 < | ||
줄 111: | 줄 120: | ||
====자료형==== | ====자료형==== | ||
- | 자바스크립트의자료형은varient타입이라고할수있다. | ||
- | 세부적으로는char, | ||
- | 자료형을 엄격히따지지않는 스크립트언어이므로a=10 과같이처음부터치환문을이용해도된다. | ||
- | | + | 자바스크립트의 자료형은 varient 타입이라고 할 수 있다. |
- | - 정의만 한 경우에는 | + | 세부적으로는 char, int, double, float, int, long, short, void 등의 타입을 가지고 있지만, 구분없이 선언해도 된다. |
+ | |||
+ | var i=10; | ||
+ | var j=" | ||
+ | |||
+ | |||
+ | |||
+ | | ||
+ | - 만들기만 하면 값은 | ||
- 보통은 최상단에 모든 변수를 정의하는 것이 좋다. | - 보통은 최상단에 모든 변수를 정의하는 것이 좋다. | ||
- | - comma 를 이용하여 한번에 여러개의 변수를 정의할 수 있다. | + | - comma 를 이용하여 한번에 여러 개의 변수를 정의할 수 있다. |
- | - re declaring | + | - 재정의 |
- | * 사용가능한문자는영문자, | + | * 사용가능한 문자는 영문자, 각종 유니코드문자(한글포함), 숫자, |
- | * 숫자로 시작할 수 없다. | + | * 숫자로 시작할 수 없다. ($나 _로 시작 가능!!!) |
- | * _(underbar, underscore)를 제외한!, #, ?, $, @ 등과 같은 다른 특수문자는 올 수 없다. | + | |
* 공백은 허용되지 않는다. | * 공백은 허용되지 않는다. | ||
* 자바스크립트문법안에서 규정한 예약어(키워드)는 변수로 사용할 수 없다. | * 자바스크립트문법안에서 규정한 예약어(키워드)는 변수로 사용할 수 없다. | ||
줄 139: | 줄 152: | ||
- | + | < | |
+ | var _ = function() { alert(" | ||
+ | var \u0024 | ||
+ | var Ø = function() { alert(" | ||
+ | var $$$$$ = function() { alert(" | ||
+ | </ | ||
| | ||
줄 156: | 줄 174: | ||
</ | </ | ||
+ | 자바스크립트의 변수에는 값, 객체 뿐아니라 함수도 할당할 수 있다. 이런 형식은 선언문이 아니라, 일반 수식과 같은 표현식 이므로, 끝에 ; 를 붙여준다. | ||
+ | |||
+ | |||
+ | var add = function (a,b){ return a+b; }; | ||
+ | |||
+ | 다른 언어같으면 function 다음에 함수 이름이 오겠지만, | ||
+ | |||
+ | 호출은 그냥 변수 이름으로 한다. | ||
+ | add(10,12); | ||
+ | |||
+ | 객체 안에 속성으로 변수를 담을 수 있으므로, | ||
+ | |||
+ | var test = {}; | ||
+ | |||
+ | test.add = function(a, | ||
+ | |||
+ | 객체를 만들면서 함수를 정의할 수도 있다. | ||
+ | |||
+ | var test = { | ||
+ | add: function(a, | ||
+ | }; | ||
+ | |||
+ | |||
+ | | ||
+ | | ||
====문자열==== | ====문자열==== | ||
줄 161: | 줄 204: | ||
- escape chars 는 \ 를 이용한다. | - escape chars 는 \ 를 이용한다. | ||
- string은 array처럼 string[ position ] 으로 한 char에 접근 가능하다. | - string은 array처럼 string[ position ] 으로 한 char에 접근 가능하다. | ||
+ | |||
+ | ====함수==== | ||
+ | |||
+ | |||
+ | <file javascript> | ||
+ | function add(a,b) | ||
+ | { | ||
+ | // do … | ||
+ | return a+b; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | - var 를 이용한 정의는 LOCAL이 되며, 해당 function 에서만 접근 가능하다. | ||
+ | - function 밖에서 정의된 녀석은 GLOBAL이 된다. 스크립트 어디서든 접근할 수 있다. | ||
+ | - 만약 변수정의를 하지 않은 변수에 바로 값을 대입하면 자동으로 GLOBAL로 인식된다. ( function 안에서 수행되도 말이다. ) | ||
+ | |||
+ | |||
====배열==== | ====배열==== | ||
줄 166: | 줄 226: | ||
array 정의 및 값 설정은 다음과 같은 세 가지 방법이 있다. | array 정의 및 값 설정은 다음과 같은 세 가지 방법이 있다. | ||
- | | + | var cars = new Array(); |
- | | + | |
- | | + | |
+ | | ||
+ | var cars = new Array(" | ||
+ | var cars = [" | ||
+ | |||
+ | 배열안의 요소는 대괄호 []를 이용해서 접근한다. | ||
+ | |||
+ | 배열의 요소는 변수, 객체, 함수 등이 될 수 있다. | ||
+ | 배열에 함수를 넣고 실행하는 것은 다른 언어에서는 볼 수 없는 특성이다. | ||
+ | |||
+ | var car[2]=function(a, | ||
+ | console.log( car[2](10, | ||
+ | |||
+ | |||
+ | 배열의 요소에 하나씩 접근하는 방법은 for 반복문을 사용하면 된다. | ||
+ | |||
+ | for (var i=0; i< cars.length; | ||
+ | console.log( car[i] ); | ||
+ | } | ||
+ | |||
+ | forEach **메소드**를 사용할 수도 있다. | ||
+ | 메소드 이므로, 파라메터로 작동할 함수를 전달한다. | ||
+ | |||
+ | cars.forEach( function(item, | ||
+ | console.log( item ); | ||
+ | } | ||
+ | ) | ||
+ | |||
+ | index는 각 요소의 인덱스 값이다. | ||
+ | |||
+ | 배열의 메소드 | ||
+ | |||
+ | | push() | 끝에 추가 | | ||
+ | | pop() | 맨끝의 요소 삭제 | | ||
+ | | unshift() | 앞에 추가 | | ||
+ | | shift() | 맨앞의 요소 삭제 | | ||
+ | | splice() | 배열의 요소 삭제, 추가 | | ||
+ | | slice() | 배열의 일부 요소를 복제 | | ||
+ | |||
+ | 배열의 중간에 있는 요소를 지우려면 delete 키워드를 사용한다. (메소드 아님) | ||
+ | |||
+ | delete cars[1]; | ||
+ | 이 경우 요소는 삭제되지만, | ||
+ | 아예 공간까지 없애버리는 splice() 메소드를 사용하면 된다. | ||
+ | |||
+ | cars.splice(1, | ||
+ | |||
+ | car.splice(1, | ||
+ | |||
+ | |||
=====객체===== | =====객체===== | ||
줄 179: | 줄 289: | ||
- | object 는 { } 로 구분된다. | + | 객체(object) 는 중괄호 |
- JS 안의 대부분은 Object 이다. String, Number, Array, Function 등등.. | - JS 안의 대부분은 Object 이다. String, Number, Array, Function 등등.. | ||
줄 189: | 줄 300: | ||
person = new Object(); | person = new Object(); | ||
+ | person = {firstname:" | ||
person.firstname = " | person.firstname = " | ||
- | + | | |
- | | + | |
줄 349: | 줄 461: | ||
document.write(" | document.write(" | ||
World!" | World!" | ||
- | |||
- | ====함수==== | ||
- | |||
- | |||
- | <file javascript> | ||
- | function functionname() | ||
- | { | ||
- | // do sth… | ||
- | } | ||
- | </ | ||
- | |||
- | - var 를 이용한 정의는 LOCAL이 되며, 해당 function 에서만 접근 가능하다. | ||
- | - function 밖에서 정의된 녀석은 GLOBAL이 된다. 스크립트 어디서든 접근할 수 있다. | ||
- | - 만약 변수정의를 하지 않은 변수에 바로 값을 대입하면 자동으로 GLOBAL로 인식된다. ( function 안에서 수행되도 말이다. ) | ||
줄 496: | 줄 594: | ||
http:// | http:// | ||
- | ^ 누구나 수정하실 수 있습니다. [[http:// | ||
- | |||
- | {{tag> | ||
+ | [[javascript post]] |