추적:

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
tech:javascript [2015/09/11 09:19] – V_Ltech:javascript [2022/10/21 00:25] (현재) – [예제] V_L
줄 1: 줄 1:
 +{{tag>javascript prompt 자바스크립트}}
 ======자바스크립트 (Javascript)====== ======자바스크립트 (Javascript)======
  
줄 4: 줄 5:
  
    
-자바스크립트는 네스케이프社에서 개발한 HTML 문서내에 삽입되어 동적인 웹페이지를 구현할 수 있는 스크립트이다.+자바스크립트는 HTML 문서내에 삽입되어 동적인 웹페이지를 구현할 수 있는 스크립트언어이다. 네스케이프社에서 개발하였다.
  
  
줄 13: 줄 14:
   *   독립된  응용프로그램의 형태를 지니지 못하는 스크립트언어이다. (완벽한문법적인구조를가지지못함)   *   독립된  응용프로그램의 형태를 지니지 못하는 스크립트언어이다. (완벽한문법적인구조를가지지못함)
   * 브라우저에 대한 우수한 호환성으로 주로 Client-side에서 프로그래밍하는 스크립트로 사용된다.   * 브라우저에 대한 우수한 호환성으로 주로 Client-side에서 프로그래밍하는 스크립트로 사용된다.
 +=====특징=====
 ===장점=== ===장점===
   * 프로그래밍 언어와 비교 간단하고 배우기 쉽고, 신속하게 개발가능   * 프로그래밍 언어와 비교 간단하고 배우기 쉽고, 신속하게 개발가능
줄 27: 줄 28:
   * 프레임 조절 윈도우 조절 가능   * 프레임 조절 윈도우 조절 가능
   * 히스토리 관리 가능   * 히스토리 관리 가능
 +
 +=====같이보기=====
 +
 +    * [[http://jsbeautifier.org/|보기좋게]]
 +    * [[javascript_learning]]
    
- [[http://jsbeautifier.org/|보기좋게]] 
 =====정의===== =====정의=====
 HTML안에 삽입 될때는 <script> ~ </script>안에 정의한다. HTML안에 삽입 될때는 <script> ~ </script>안에 정의한다.
줄 38: 줄 43:
 <script> ~ </script>의위치는<head>~</head>태그또는<body>~</body>태그에모두정의가능. <script> ~ </script>의위치는<head>~</head>태그또는<body>~</body>태그에모두정의가능.
  
 +<file>
   <script language="javascript"><!--자바스크립트문장들...//--></script>   <script language="javascript"><!--자바스크립트문장들...//--></script>
  
    <HEAD>정의 <BODY>호출 (실행전 정의되도록 하기 위해 권장)    <HEAD>정의 <BODY>호출 (실행전 정의되도록 하기 위해 권장)
 +</file>
  
 <file html> <file html>
줄 46: 줄 53:
 <head> <head>
 <title>연습</title> <title>연습</title>
-<script language= “javascript”>+<script language= "javascript">
 <!-- <!--
 …….. ……..
줄 113: 줄 120:
  
 ====자료형==== ====자료형====
-자바스크립트의자료형은varient타입이라고할수있다. 
-세부적으로는char, int, double, float, int, long, short, void 등의타입을가지고있다. 
-자료형을 엄격히따지지않는 스크립트언어이므로a=10 과같이처음부터치환문을이용해도된다. 
  
-  - 변수이름도 대소문자구별 +자바스크립트의 자료형은 varient 타입이라고 할 수 있다. 
-  - 정의만 한 경우에는 undefined 가 나온다.+세부적으로는 char, int, double, float, int, long, short, void 등의 타입을 가지고 있지만, 구분없이 선언해도 된다.  
 + 
 +  var i=10; 
 +  var j="문자열"; 
 + 
 + 
 + 
 +  - 변수이름도 대소문자 구별 
 +  - 만들기만 하면 값은 undefined 가 된다.
   - 보통은 최상단에 모든 변수를 정의하는 것이 좋다.   - 보통은 최상단에 모든 변수를 정의하는 것이 좋다.
-  - comma 를 이용하여 한번에 여러개의 변수를 정의할 수 있다. +  - comma 를 이용하여 한번에 여러 개의 변수를 정의할 수 있다. 
-  - re declaring 한다고 기존 value 가 없어지지는 않는다.+  - 재정의 한다고 기존 value 가 없어지지 않는다.
  
  
-  * 사용가능한문자는영문자, 숫자, _(underbar, underscore)이다 +  * 사용가능한 문자는 영문자, 각종 유니코드문자(한글포함), 숫자, 일부특수문자  _, $ 이다 (확인기 https://mothereff.in/js-variables) 
-  * 숫자로 시작할 수 없다. +  * 숫자로 시작할 수 없다. ($나 _로 시작 가능!!!)
-  * _(underbar, underscore)를 제외한!, #, ?, $, @ 등과 같은 다른 특수문자는 올 수 없다.+
   * 공백은 허용되지 않는다.   * 공백은 허용되지 않는다.
   * 자바스크립트문법안에서 규정한 예약어(키워드)는 변수로 사용할 수 없다.   * 자바스크립트문법안에서 규정한 예약어(키워드)는 변수로 사용할 수 없다.
줄 141: 줄 152:
    
  
- +<file> 
 +var _       = function() { alert("hello from _"); } 
 +var \u0024  = function() { alert("hello from $ defined as u0024"); } 
 +var Ø       = function() { alert("hello from Ø"); } 
 +var $$$$$   = function() { alert("hello from $$$$$"); } 
 +</file>
      
  
줄 158: 줄 174:
 </file> </file>
  
 +자바스크립트의 변수에는 값, 객체 뿐아니라 함수도 할당할 수 있다. 이런 형식은 선언문이 아니라, 일반 수식과 같은 표현식 이므로, 끝에 ; 를 붙여준다. 
 +
 +
 +  var add = function (a,b){ return a+b; };
 +
 +다른 언어같으면 function 다음에 함수 이름이 오겠지만, 변수이름이랑 함수이름이 같으므로, 함수이름은 생략한다. 
 +
 +호출은 그냥 변수 이름으로 한다.
 +  add(10,12);
 +
 +객체 안에 속성으로 변수를 담을 수 있으므로, 객체 안에 함수를 담을 수도 있다. 
 +
 +  var test = {};
 +
 +  test.add = function(a,b){return a+b;};
 +
 +객체를 만들면서 함수를 정의할 수도 있다. 
 +
 +  var test = {
 +      add: function(a,b){return a+b;}
 +  };
 +
 +
 +  
 +  
 ====문자열==== ====문자열====
  
줄 163: 줄 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;
 +}
 +</file>
 +
 +  - var 를 이용한 정의는 LOCAL이 되며, 해당 function 에서만 접근 가능하다.
 +  - function 밖에서 정의된 녀석은 GLOBAL이 된다. 스크립트 어디서든 접근할 수 있다.
 +  - 만약 변수정의를 하지 않은 변수에 바로 값을 대입하면 자동으로 GLOBAL로 인식된다. ( function 안에서 수행되도 말이다. )
 +
 +
  
 ====배열==== ====배열====
줄 168: 줄 226:
  array 정의 및 값 설정은 다음과 같은 세 가지 방법이 있다.  array 정의 및 값 설정은 다음과 같은 세 가지 방법이 있다.
  
-  -  var cars = new Array(); \\     cars[0] = "Volvo"; \\     cars[1] = "BMW"; +  var cars = new Array();  
-  - var cars = new Array("Volvo", "BMW" ); +    cars[0] = "Volvo";  
-  - var cars = ["Volvo", "BMW"];+    cars[1] = "BMW"; 
 +     
 +  var cars = new Array("Volvo", "BMW" ); 
 +  var cars = ["Volvo", "BMW"]; 
 + 
 +배열안의 요소는 대괄호 []를 이용해서 접근한다.  
 + 
 +배열의 요소는 변수, 객체, 함수 등이 될 수 있다.  
 +배열에 함수를 넣고 실행하는 것은 다른 언어에서는 볼 수 없는 특성이다.  
 + 
 +  var car[2]=function(a,b) { return a+b;}; 
 +  console.log( car[2](10,11) ); 
 + 
 + 
 +배열의 요소에 하나씩 접근하는 방법은 for 반복문을 사용하면 된다.  
 + 
 +  for (var i=0; i< cars.length; i++) {  
 +      console.log( car[i] ); 
 +  } 
 + 
 +forEach **메소드**를 사용할 수도 있다.  
 +메소드 이므로, 파라메터로 작동할 함수를 전달한다.  다른 언어와 약간 차이가 있다.  
 + 
 +  cars.forEach( function(item,index) {  
 +  console.log( item ); 
 +      } 
 +  ) 
 + 
 +index는 각 요소의 인덱스 값이다. 
 + 
 +배열의 메소드 
 + 
 +| push() | 끝에 추가 | 
 +| pop() | 맨끝의 요소 삭제 | 
 +| unshift() | 앞에 추가 | 
 +| shift() | 맨앞의 요소 삭제 | 
 +| splice() | 배열의 요소 삭제, 추가 | 
 +| slice() | 배열의 일부 요소를 복제 | 
 + 
 +배열의 중간에 있는 요소를 지우려면 delete 키워드를 사용한다. (메소드 아님) 
 + 
 +  delete cars[1]; 
 +이 경우 요소는 삭제되지만, 공간은 그대로 있기 때문에 undefined 요소가 생기고, 배열의 길이도 그대로이다.  
 +아예 공간까지 없애버리는 splice() 메소드를 사용하면 된다.  
 + 
 +  cars.splice(1,2); // 인덱스1번 요소와 그 다음 요소를 삭제한다 
 + 
 +  car.splice(1,0,"현대"); // 1번 자리에 추가 
 + 
 + 
  
 =====객체===== =====객체=====
줄 181: 줄 289:
  
  
-object 는 { } 로 구분된다.  object 안의 key/value pair 는 name:value 로 표기되고, comma 로 구분된다.+객체(object) 는 중괄호 { } 를 이용해 만들 수 있다. 객체 안의 key/value pair 는 name:value 로 표기되고, comma 로 구분된다. 속성은 점(.) 연산자와 속성의 이름을 이용해 접근 할 수도 있고, 대괄호와 속성의 의름을 이용해서 접근할 수 있다.  
  
   - JS 안의 대부분은 Object 이다. String, Number, Array, Function 등등..   - JS 안의 대부분은 Object 이다. String, Number, Array, Function 등등..
줄 191: 줄 300:
  
   person = new Object();   person = new Object();
 +  person = {firstname:"John"};  
   person.firstname = "John";   person.firstname = "John";
- +  person['address']="Korea"; 
-  person = {firstname:"John"};+  
  
  
줄 351: 줄 461:
   document.write("Hello \   document.write("Hello \
   World!");   World!");
- 
-====함수==== 
- 
- 
-<file javascript> 
-function functionname() 
-{ 
-   // do sth… 
-} 
-</file> 
- 
-  - var 를 이용한 정의는 LOCAL이 되며, 해당 function 에서만 접근 가능하다. 
-  - function 밖에서 정의된 녀석은 GLOBAL이 된다. 스크립트 어디서든 접근할 수 있다. 
-  - 만약 변수정의를 하지 않은 변수에 바로 값을 대입하면 자동으로 GLOBAL로 인식된다. ( function 안에서 수행되도 말이다. ) 
  
  
줄 498: 줄 594:
 http://www.w3schools.com/js/js_examples.asp http://www.w3schools.com/js/js_examples.asp
  
-^  누구나 수정하실 수 있습니다. [[http://vaslor.net/syntax|위키 사용법]] 참고하세요.  ^ 
- 
-{{tag>javascript prompt 자바스크립트}} 
  
  
 +[[javascript post]]