• 회원가입
  • 로그인
  • 구글아이디로 로그인
웹디자인언어 JavaScriptLv 1 : 손님

[Array] JS - Array - 배열 ★★★★★

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3,597  

목차

  1. 배열 (Array) 기본 내용
  2. 배열 메서드 (Array Method)
  3. 배열 정렬 (Array Sort)
  4. 배열 반복 메서드 (Array Iteration Method)
  5. 배열 관련 추천 강의 주소

 

배열 (Array) 기본 내용

[목차]

 

배열 기본예제

 

<p id="hz"></p>


<script>

var code = ["HTML", "CSS", "JS"];

document.getElementById("hz").innerHTML = code;

</script>

 

결과보기

 

배열 정의

 

한 번에 둘 이상의 값을 보유 할 수있는 특수 변수.

 

 

1.

하나의 변수에 여러 값을 담을 때 유용.

 

2.

만약, 배열 사용 안 하면, 아래처럼 각 변수에 각각 담아야 하는 불편 있음.

 

var code1 = "HTML";

var code2 = "CSS";

var code3 = "JS";


3.

배열값 접근법

색인배열 : 색인 (Index) 이용해 각 배열값에 접근 가능.
연관배열 : 배열키 (Key) 이용해 각 배열값에 접근 가능.

 

 

배열 생성법1 - [ ] 방식 ★ (더 간결/빠름/정확)

 

var array_name = [item1, item2, ...]; 

 

또는,

var array_name = [

    item1, 

    item2,
    ...

]; 

 

★ 배열값은 줄바꿈 가능.

[예제1] 한줄방식

 

<p id="hz"></p>


<script>

var code = ["HTML", "CSS", "JS"];

document.getElementById("hz").innerHTML = code;

</script>

 

결과보기

[예제2] 줄바꿈방식

 

<p id="hz"></p>


<script>

var code = [

    "HTML", 

    "CSS", 

    "JS"

];

document.getElementById("hz").innerHTML = code;

</script>

 

결과보기

 

★ 배열값 마지막 뒤에 쉼표 넣으면 브라우저간 크로스브라우징 안 됨. (IE8 이하 에러남).

 

배열 생성법2 - new Array() 방식

 

<p id="hz"></p>


<script>

var code = new Array("HTML", "CSS", "JS");

document.getElementById("hz").innerHTML = code;

</script>

 

결과보기

※ 배열도 객체의 일종이라, array() 함수 앞에 new 키워드 추가. 

※ [배열값..] 방식이 new array(배열값...) 방식보다 더 간결하고 속도도 빠름. 첫 번째 방법 사용 권장.

 

배열값 접근

 

array_name[index]


※ index는 0부터 시작. (예) [0] : 첫 번째 , [1] 두 번째

[예제]

 

<p id="hz"></p>


<script>

var code = ["HTML", "CSS", "JS"];

var html = code[0];

var css = code[1];

var js = code[2];

var txt = code + "<br>" + html + "<br>" + css + "<br>" + js;

document.getElementById("hz").innerHTML = txt;

</script> 

 

결과보기

 

배열값 변경 / 전체 배열값에 접근

 

  • 배열값 변경 : arrayName[index] = "new value";
  • 전체배열접근 : arrayName

 

 

 <p id="hz"></p>


<script>

var code = ["HTML", "CSS", "JS"];

code[0] = "PHP"; // 배열값 변경

document.getElementById("hz").innerHTML = code; // 전체배열 접근

</script> 

 

결과보기

 

배열은 객체 일종

 

1.

Array (배열)은 Object(객체)의 일종.
typeof 연산자로 arrayName 판별하면, Object (객체)로 나옴.

 

2.

JS 배열은 배열로 가장 잘 설명됨.

 

3.

배열의 각 항목에 대해 INDEX (색인번호)로 접근.
객체는 각 항목에 대해 Property_Name (속성명) 사용해 접근.

 

[Array 배열]

 

<p id="demo"></p>


<script>

var hz = ["홈짱닷컴", "Homzzang.com", 2012];

document.getElementById("demo").innerHTML = hz[0];

</script>

 

결과보기

[Object 객체]

 

<p id="demo"></p>


<script>

var hz = {site:"홈짱닷컴", host:"Homzzang.com", open:2012};

document.getElementById("demo").innerHTML = hz["site"];

</script>

 

결과보기 

 

배열값도 객체 일종

 

JS 배열값 역시 객체 성격이라, 다른 유형의 변수 가질 수 있음.

즉, 

한 배열에 객체, 함수, 배열, 문자열, 숫자, 날짜 등 다양한 데이터형식을 담을 수 있음.

 

 

var hzArray = {}; // hzArray 배열변수선언

hzArray[0] = Date.now; 

hzArray[1] = hzFunction;

hzArray[2] = hzCars; 

 

 

배열의 속성/메서드

 

JS 배열은 다양한 내장 속성・메서드 존재. (배열의 강점)

 

 

var hz = ["홈짱닷컴", "Homzzang.com", 2012];

var x = hz.length;   // 내장속성 (배열값 개수)

var y = hz.sort();   // 내장 메서드 (배열 정렬)

 

 

배열의 length 속성 (=배열개수=배열값개수=배열길이)

 

1.

length 속성 : 배열 개수

 

2.

length 값은 항상 배열 index 최대값보다 1 큼. (왜냐면, index는 0부터 시작).

 

 

<p id="demo"></p>


<script>

var hz = ["홈짱닷컴", "Homzzang.com", 2012];

document.getElementById("demo").innerHTML = hz.length; // 3

</script> 

 

결과보기

 

첫번째 배열값에 접근

 

arrayName[0]

 

 

<p id="demo"></p>


<script>

var hz = ["홈짱닷컴", "Homzzang.com", 2012];

var first = hz[0];

document.getElementById("demo").innerHTML = first;

</script> 

 

결과보기

 

마지막 배열값에 접근

 

arrayNname[arrayName.length - 1]


 

<p id="demo"></p>


<script>

var hz = ["홈짱닷컴", "Homzzang.com", 2012];

var last = hz[hz.length - 1];

document.getElementById("demo").innerHTML = last;

</script> 

 

결과보기

 

전체 배열값에 접근 - for반복문 또는 Array.forEach() 이용

 

for 반복문 (가장 안전)이나 Array.forEach() 함수 이용.


[for 반복문]

 

<p id="demo"></p>


<script>

var hz, text, cnt, i;

hz = ["홈짱닷컴", "Homzzang.com", 2012];

cnt = hz.length;


text = "<ul>";

for (i = 0; i < cnt; i++) {

  text += "<li>" + hz[i] + "</li>";

}

text += "</ul>";


document.getElementById("demo").innerHTML = text;

</script>

 

결과보기

[foreach() 함수]

 

<p id="demo"></p>


<script>

var hz, text;

hz = ["홈짱닷컴", "Homzzang.com", 2012];


text = "<ul>";

hz.forEach(homzzang);

text += "</ul>";

document.getElementById("demo").innerHTML = text;


function homzzang(value) {

  text += "<li>" + value + "</li>";

} 

</script>

 

결과보기

 

배열값 추가

 

  • 방법1: array.push(value1,value2,....)
  • 방법2: array[array.length] = "value1"; array[array.length] = "value2"; ....

 

[예제1]

 

<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

var code = ["HTML", "CSS", "JS"];

document.getElementById("demo").innerHTML = code;


function homzzang() {

  code.push("PHP","SQL");

  document.getElementById("demo").innerHTML = code;

}

</script>

 

결과보기

[예제2]

 

<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

var code = ["HTML", "CSS", "JS"];

document.getElementById("demo").innerHTML = code;


function homzzang() {

  code[code.length] = "PHP";

  code[code.length] = "SQL";

  document.getElementById("demo").innerHTML = code;

}

</script>

 

주의: code[code.length + 1] = "SQL"; 처럼 하면 중간에 배열값 없는 구멍 생김.

 [주의] - 인덱스 높은 요소 추가하면 배열에 정의되지 않은 "undefined" 구멍이 생김.

 

<p id="demo"></p>


<script>

var code, text, cnt, i;

code = ["HTML", "CSS", "JS"];

code[6] = "Lemon";


cnt = code.length;

text = "";

for (i = 0; i < cnt; i++) {

  text += code[i] + "<br>";

}

document.getElementById("demo").innerHTML = text;

</script>

 

결과보기

 

연관배열 (Associative Array) = 해시 (Hash)

 

1.

연관배열: 배열값에 Number Index (숫자색인) 대신 NAME (이름)으로 접근 가능한 배열. 

JS는 연관배열 지원 안 함. (JS에서 배열은 항상 숫자 인덱스 사용)

 

<p id="demo"></p>


<script>

var hz = [];

hz[0] = "홈짱닷컴";

hz[1] = "Homzzang.com";

hz[2] = 2012; 

var txt = hz[0] + " " + hz.length;

document.getElementById("demo").innerHTML = txt; // 홈짱닷컴 3

</script>

 

결과보기

 

2.  

NAME 인덱스 사용하는 경우 JS는 배열을 표준 객체로 재정의.

그 후, 일부 배열 메소드 및 속성은 잘못된 결과 생성하니 주의. 

 

<p id="demo"></p>


<script>

var hz = [];

hz['site'] = "홈짱닷컴";

hz['host'] = "Homzzang.com";

hz['open'] = 2012; 

var txt = hz['site'] + " " + hz.length + " " + hz['0'];;

document.getElementById("demo").innerHTML = txt; // 홈짱닷컴 0

</script>

 

결과보기

 

배열(Array ) / 객체(Object) 차이점

 

  • JS 배열 : NUMBER INDEX (숫자 색인) 사용. (연관배열 지원 X)
  • JS 객체 : NAME INDEX (이름 색인) 사용.


PS. JS 배열 : 번호가 매겨진 인덱스를 가진 특별한 종류의 객체. 

 

배열 사용 경우

 

1.
배열은 숫자 색인 사용할 때 사용.


2.
배열 생성은 [...] 방식 사용. ※ new Array(...) 방식은 느리니 사용 자제.

 

var hz = new Array();  // 나쁜 방식 (복잡, 느림, 비정상작동가능성)

var hz = [];                // 좋은 방식  

 

[예제1] - 배열값 2개 이상일 땐, 두 방식 모두 동일 결과 나옴. 단, 처리 속도는 차이 남.

 

<p id="demo"></p>


<script>

//var hz = new Array("홈짱닷컴","Homzzang.com", 2012); // 나쁜 방식

var hz = ["홈짱닷컴","Homzzang.com", 2012]; // 좋은 방식

document.getElementById("demo").innerHTML = hz[0];  

</script>

 

[예제2] - new array() 방식은 배열값이 하나일 때, 문자열 배열값은 정상출력 O

 

<p id="demo"></p>


<script>

var hz = new Array("홈짱닷컴");

document.getElementById("demo").innerHTML = hz[0];  // 홈짱닷컴

</script>

 

 

결과보기

[예제3] - new array() 방식은 배열값이 하나일 때, 숫자 배열값은 정상출력 X

 

<p id="demo"></p>


<script>

var hz = new Array(2012);

document.getElementById("demo").innerHTML = hz[0];  // undefined

</script>


결과보기

 

배열인지 여부 체크 방법들

1. typeof 연산자로 배열의 데이터타입 판정 시, object (객체)로 나옴.

(예제)

 

<p id="demo"></p>


<script>

var hz = ["홈짱닷컴", "Homzzang.com", 2012];

document.getElementById("demo").innerHTML = typeof hz; // object

</script>

 

결과보기

2. Array의 데이터타입을 직관적으로 Array로 나오게 하는 3가지 방법.

 

방법1: Array.isArray(array_name) - ECMAScript 5가 이전 브라우저에서 지원 X

방법2: 사용자정의 isArray() 함수 생성. - 방법1의 문제 해결 가능.

방법3. instanceof 키워드 사용.

 

2-1. Array.isArray(array_name) 방식

ECMAScript 5 이상 사용 가능. 오래된 브라우저에선 사용 불가.

 

<p id="demo"></p>


<script>

var hz = ["홈짱닷컴", "Homzzang.com", 2012];

document.getElementById("demo").innerHTML = Array.isArray(hz);

</script>


결과보기

2-2. 사용자정의 isArray() 함수 생성. - 방법1의 문제 해결 가능.

인수가 배열이면 항상 true 반환.
엄밀히 말하면, 객체 프로토 타입에 "Array" 단어 포함 시 true 반환.

 

<p id="demo"></p>


<script>

var hz = ["홈짱닷컴", "Homzzang.com", 2012];

document.getElementById("demo").innerHTML = isArray(hz);


function isArray(arr) {

  return arr.constructor.toString().indexOf("Array") > -1;

}

</script>

 

결과보기

2-3. instanceof 키워드 사용.

instanceof 연산자는 객체가 주어진 생성자에 의해 생성 시 true 반환함.

 

<p id="demo"></p>


<script>

var hz = ["홈짱닷컴", "Homzzang.com", 2012];

document.getElementById("demo").innerHTML = hz instanceof Array; // true

</script>

 

결과보기

 

배열 메서드 (Array Method)

[목차]

 

배열을 문자열로 전환

 

  • toString() - 배열을 쉼표로 구분된 배열값의 문자열로 변환.
  • join() - toString() 메서드와 유사하나, 쉼표 구분 대신 별도 구분자 설정 가능. 

 

 

배열값추가 / 배열값제거

[배열 뒤쪽] - 속도 빠름.

 

  • pop() - 배열 마지막 배열값 제거. (제거된 배열값 반환)
  • push() - 배열 마지막에 새로운 배열값 추가. (새로운 배열개수 반환)

 

[배열 앞쪽] - 속도 느림.

 

  • shift() - 첫 번째 배열값 제거 후, 다른 모든 배열값을 더 낮은 인덱스로 이동. (제거된 배열값 반환)
  • unshift() - 배열 처음에 새 배열값 추가 후, 다른 모든 배열값을 더 높은 인덱스로 이동. (새로운 배열개수 반환)

 

 

배열값변경 / 배열값추가

 

array_name[index] = "value"; 
(예) hz[0] = "홈짱닷컴"; 

  

array_name[array_name.length] = "value";  
(예) hz[hz.length] = "홈짱닷컴";

 

 

배열값삭제

 

delete array_name[index];
(예) delete hz[0]; 

 

[주의]

delete 사용하면 배열에 undefined 구멍 생길 수 있으니, pop() 또는 shift() 사용. (∵ 해당 배열값만 삭제하고 나머지 배열값의 색인 조정은 안 하므로)

 

 

배열값추가/삭제 후 배열잇기

 

  • splice() - 배열의 특정 색인에 배열값 추가/삭제. (undefined 구멍 안 만들고 제거 가능)

 

 

배열병합 (배열연결)

 

concat()

  • 기존 배열을 병합 (연결)하여 새 배열 생성. 
  • 기존 배열 변경 안 함. 항상 새 배열을 반환.
  • 여러 개의 배열 독립변수 사용 가능.
  • 배열값을 독립변수로 사용 가능.

 

 

배열자르기

 

slice()

  • 배열의 일부를 새로운 배열로 잘라냄.
  • 새로운 배열 생성. (기존 배열에서 요소 제거 안 함.)
  • 2개의 독립변수 사용 가능. (단, 2번째 독립변수의 배열값은 포함 안 함.)
  • 1개의 독립변수만 사용하면, 해당 위치부터 마지막까지 잘라내 배열 생성.

 

 

자동 toString() - 배열을 문자열로 자동전환

 

기본 값이 예상되면 JS는 배열을 쉼표로 구분된 문자열로 자동 변환.
그 결과, 아래 두 경우는 동일한 결과 나옴.


 

 

[참고] 모든 JS 객체는 toString() 메서드 갖음.

 

배열최대값 /배열최소값 (= 최대배열값/최소배열값)

 

JS 배열엔 최대배열값・최소배열값 찾는 내장 함수 없음.

이 문제 해결 방법을 이 페이지 아래에서 소개 예정.

 

 

배열 정렬 (Array Sort) 

[목차]

 

문자열배열정렬 (= 오름차순)

 

sort() - 문자열 배열을 알파벳순으로 정렬. (숫자 경우, 제대로 작동 X)

 

 

문자열배열 내림차순 (+ 문자열배열 역순정렬)


  • reverse() - 배열순서 뒤집기 (= 배열역순정렬) 
  • sort() 적용 후 reverse() - 내림자순배열정렬. (위 두 메서드를 함께 사용. 즉, 오름차순 정렬시킨 후, 순서 뒤집음.)

 

 

숫자배열정렬 (= 배열값비교함수) ★

[오름차순]

 

arrayName.sort(function(a, b){return a - b}); 

  • 음수: ab순
  • 0 : 그대로
  • 양수: ba순

 

[내림차순]

 

arrayName.sort(function(a, b){return b - a});

  • 양수 : ab순
  • 0 : 그대로
  • 음수 : ba순

 

 

숫자배열비교함수

 

오름차순

function(a, b){return a - b} 

 

 

1.

비교 함수의 목적은 대체 정렬 순서 정의하며. 비교 함수는 배열의 모든 값을 한 번에 두 값씩 비교.

 

2.

비교 함수는 인수에 따라 (음수/0/양수)값 반환. 

  • 음수 : ab순 정렬. (예) (1,3) 경우, 1-3 = -2 (즉, 1 < 3)이므로, 1,3 순서 배치.
  • 0 : 현재 순서. (예) (1,1) 경우, 1-1 = 0  (즉, 1 = 1)이므로, 순서 조정 X
  • 양수 : ba순 정렬. (예) (3,1) 경우, 3-1 = 2 (즉, 3 > 1)이므로 , 1,3 순서 재조정.

 

[예제]

 

<button onclick="homzzang1()">알파벳순</button>

<button onclick="homzzang2()">순자크기순</button>


<p id="demo"></p>


<script>

var num = [30, 100, 1, 5, 25, 10];

document.getElementById("demo").innerHTML = num;  


function homzzang1() {

  num.sort();

  document.getElementById("demo").innerHTML = num;

}

function homzzang2() {

  num.sort(function(a, b){return a - b});

  document.getElementById("demo").innerHTML = num;

}

</script>


결과보기

 

배열랜덤정렬 (= 랜덤배열정렬)

 

arrayName.sort(function(a, b){return 0.5 - Math.random()}); 

 

 

배열최대값/배열최소값 구하기

[방법1] - (오름차순, 내림차순)으로 먼저 배열정렬시킨 후, 숫자 색인 이용해 찾기. ※ (최대배열값・최소배열값)만 찾을 경우에 매우 비효율적.

 

  • 오름차순: arrayName.sort(function(a, b){return a - b}); 
  • 내림차순: arrayName.sort(function(a, b){return b - a});

 

[방법2]

 

  • 최대값 찾기 - function getArrayMax(arr) {return Math.max.apply(null, arr);}
  • 최소값 찾기 - function getArrayMin(arr) {return Math.min.apply(null, arr);}

 

[참고] 

  • Math.max.apply(null, [1, 2, 3])  ==  Math.max(1, 2, 3)
  • Math.min.apply(null, [1, 2, 3])  == Math.min(1, 2, 3)

 

[방법3] - 사용자 정의 함수 생성. (각 값을 발견된 최대값・최소값과 비교반복해 최대값・최소값 찾음.)

 

[최대값 구하기]

function getArrayMax(arr) {

  var len = arr.length;

  var max = -Infinity;

  while (len--) {

    if (arr[len] > max) {

      max = arr[len];

    }

  }

  return max;

}

 

[최소값 구하기]

function getArrayMin(arr) {

  var len = arr.length;

  var min = Infinity;

  while (len--) {

    if (arr[len] < min) {

      min = arr[len];

    }

  }

  return min;

}

 

 

객체배열정렬

 

1.

JS 배열엔 데이터타입이 다른 객체가 포함되는 경우 있는데,

sort() 메서드 사용한 사용자정의 함수 만들어 배열 정렬 가능.

 

2.

숫자 정렬보다 문자열 정렬시키는 함수가 좀 더 복잡함.

 

[숫자 정렬]

 

<button onclick="homzzang()">정렬</button>


<p id="demo"></p>


<script>

var code = [

  {lang:"PHP", level:3},

  {lang:"HTML", level:1},

  {lang:"CSS", level:2}

];


displayCode();


function homzzang() {

  code.sort(function(a, b){return a.level - b.level});

  displayCode();

}


function displayCode() {

  document.getElementById("demo").innerHTML =

  code[0].lang + " " + code[0].level + "<br>" +

  code[1].lang + " " + code[1].level + "<br>" +

  code[2].lang + " " + code[2].level;

}

</script>

 

결과보기

[문자열 정렬]

 

<button onclick="homzzang()">정렬</button>


<p id="demo"></p>


<script>

var code = [

  {lang:"PHP", level:3},

  {lang:"HTML", level:1},

  {lang:"CSS", level:2}

];


displayCode();


function homzzang() {

  code.sort(function(a, b){

    var x = a.lang.toLowerCase();

    var y = b.lang.toLowerCase();

    if (x < y) {return -1;}

    if (x > y) {return 1;}

    return 0;

  });

  displayCode();

}


function displayCode() {

  document.getElementById("demo").innerHTML =

  code[0].lang + " " + code[0].level + "<br>" +

  code[1].lang + " " + code[1].level + "<br>" +

  code[2].lang + " " + code[2].level;

}

</script>

 

결과보기

 

배열 반복 메서드 (Array Iteration Method) 

★ 배열 반복 메소드는 모든 배열값에 대해 작동함. 

[목차]

Array.forEach() 메서드 ★

Array.forEach() 특징

  • 각 배열요소에 대해 콜백함수만 실행. (배열 반환 X)
  • IE9 이상 주요 최신브라우저 지원.

 

Array.map() 메서드 ★

Array.map() 특징 
  • 각 배열요소에 대해 콜백함수 실행 후 새 배열 반환.
  • 값 없는 배열 요소 경우, 함수 실행 X.
  • 원래 배열을 변경 X
  • IE9 이상 주요 최신브라우저 지원.

 

Array.filter() 메서드 ★

Array.filter() 특징 

  • 테스트함수 충족하는 배열요소로 구성된 새 배열 반환.
  • IE9 이상 주요 최신브라우저 지원.

 

Array.reduce() 메서드

Array.reduce() 특징 

  • 단일값을 생성 (또는, 단일값으로 감소) 위해 각 배열 요소에서 함수실행.
  • 배열 왼쪽에서 오른쪽으로 동작.
  • 원래 배열을 줄이지는 않음.
  • 초기값을 가질 수 있음.
  • IE9 이상 주요 최신브라우저 지원.


Array.reduceRight() 메서드

Array.reduceRight() 특징 

  • 단일값을 생성 (또는, 단일값으로 감소) 위해 각 배열 요소에서 함수실행.
  • 배열 오른쪽에서 왼쪽으로 동작.
  • 원래 배열을 줄이지는 않음.
  • 초기값을 가질 수 있음.
  • IE9 이상 주요 최신브라우저 지원.

 

Array.every() 메서드

Array.every() 특징 

  • 모든 배열요소가 테스트함수 충족하는지 여부 참거짓 반환.
  • IE9 이상 주요 최신브라우저 지원.

 

Array.some() 메서드

Array.some() 특징 

  • 일부 배열요소가 테스트함수 충족하는지 여부 참거짓 반환.
  • IE9 이상 주요 최신브라우저 지원.

 

Array.indexOf() 메서드

Array.indexOf() 특징 

  • 배열에서 요소값 검색 후 일치한 첫번째 색인번호 반환.
  • 첫 번째 항목 위치는 0이고 두 번째 항목 위치는 1
  • 항목을 찾을 수 없으면 -1 반환.
  • IE9 이상 주요 최신브라우저 지원.

 

Array.lastIndexOf() 메서드

Array.lastIndexOf() 특징 

  • 배열에서 요소값 검색 후 일치한 마지막 색인번호 반환.
  • IE9 이상 주요 최신브라우저 지원.

 

Array.find() 메서드

Array.find() 특징 

  • 테스트 콜백함수 통과한 첫번째 배열요소의 값 반환.
  • IE12 이상 주요 최신브라우저 지원.

 

Array.findIndex() 메서드

Array.findIndex() 특징 

  • 테스트 콜백함수 충족한 첫번째 배열요소의 색인번호 반환.
  • IE12 이상 주요 최신브라우저 지원.

 

 

배열 관련 추천 강의 주소

 

 
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

JavaScript 관련글

JQuery 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글
분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★ document.write() = 다큐먼트라이트
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
오늘: 13,135 | 어제: 23,936 | 최대: 31,885 | 전체: 8,408,915
  • 채팅방
  • 필독
1. 채팅창 헤드에서 접속자 확인 2. 닉네임 클릭해 1:1 채팅 가능 3. 닉네임 클릭해 귓속말 가능 4. 닉네임 클릭해 호출하기 가능 5. 우하단 클릭해 환경 설정 가능 6. 의뢰글 작성 후 의뢰 상담 가능 7. 질문글 작성 후 질문 상담 가능 8. 채팅방에 개인정보 입력 금지 9. 채팅방에 광고 욕설 비방 금지
  • (견적/의뢰/질문/등업) 상담은 게시판 이용해 주세요.
  • 인터넷 임시파일 제거 시 속도 ↑ (Ctrl + Shift + Del)

공지사항

최신글

최신댓글

사이트명:홈짱닷컴, 연락처:
Copyright ⓒ https://homzzang.com. All rights reserved.
찾아주셔서 감사합니다. Since 2012