Front-End/javascript 2019. 6. 11. 23:49
-유효범위-
유효범위 (Scope)는 변수의 수명을 의미한다.
-전역변수와 지역변수-
(c언어나 java에서의 의미와 동일)
전역변수 함수 바깥쪽에 선언되어서 모든 함수에서 접근이 가능한 변수 지역변수 함수 안쪽에 선언되어서 그 함수내에서만 사용할 수 있는 변수
참고 함수 안쪽에서 변수 앞에 var(데이터타입) 이 붙으면 함수 안쪽에 있으면 지역변수, 함수 바깥쪽에 있으면 전역변수이다.
-예제-
var a = 'korea';
function f(){
a = 'corea'; //여기서 a는 전역변수인 a를 가리키고 전역변수의 값을 'corea'로 변경
}
f();
alert(a); //위에서 바꾼 a의 값인 'corea'가 출력
cs
var a = 'korea';
function f(){
var a = 'corea'; //여기서 a는 지역변수이다.
}
f();
alert(a); //지역변수는 함수내에서만 사용할 수 있고, 전역변수가 선언되어있기 때문에 전역변수 a의 값인 'korea '가 출력
cs
전역변수의 사용
불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용
-예제-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function(){
var MYAPP = {} //객체를 생성
MYAPP.calculator = { //객체 안에 들어있는 속성(객체안에 있는 변수) calculator에 객체를 생성하고 left와 right 값을 null로 선언
'left' : null,
'right' : null
}
MYAPP.coordinate = { //객체 안에 들어있는 속성(객체안에 있는 변수) corrdinate에 객체를 생성하고 left와 right 값을 null로 선언
'left' : null,
'right' : null
}
MYAPP.calculator.left = 10; //calculator의 left값을 10으로 설정
MYAPP.calculator.right = 20; //calculator의 right 값을 20 으로 설정
function sum(){
return MYAPP.calculator.left + MYAPP.calculator.right; //10과 20을 더한값 30을 sum에 리턴
}
document.write(sum()); //30이 출력됨
}
cs
요약 : 위 예제는 전역변수를 함수안에 집어넣고, 전역변수의 객체를 생성해 그 객체안에 새로운 변수를 만들어서 사용하는 예제
-유효범위의 대상 (함수)-
자바스크립트는 함수에 대한 유효범위만을 제공한다.
많은 언어들이 블록 (대체로{ }) 에 대한 유효범위를 제공하는 것과는 다른 점이다.
(즉, 자바에서는 for문 안에서 변수가 선언된것도 지역변수라고 하는데,
자바스크립트에서는 오직 함수내에서만 선언된 변수를 지역변수라고 한다. (for문,while문 등은 포함하지 않는다))
-정적 유효범위-
자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다.
이러한 유효범위의 방식을 정적 유효범위 (static scoping), 혹은 렉시컬 (lexical scoping)이라고 한다.
-예제-
var i = 5;
function a(){
var i = 10;
b();
}
function b(){
document.write(i);
}
a();
cs
출력값은 전역변수인 i가 출력이 되서 5가 출력된다.
왜냐하면 사용될때가 아니고 정의될때의 전역변수가 사용이 되기때문에 함수 a에 있는 지역변수인 i가 아니라 함수 바깥쪽에 있는 전역변수인 i가 출력이 되는 것이다.
이런범위를 정적 유효범위라 한다.
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/javascript 2019. 6. 11. 21:46
-정규표현식-
문자열에서 특정한 문자를 찾아내는 도구이다.
이 도구를 이용하면 수십줄이 필요한 작업을 한 줄로 끝낼 수 있다.
-정규표현식 생성-
정규표현식은 두가지 단계로 이루어진다.
하나는 컴파일 (compile) 다른 하나는 실행 (execution) 이다.
-컴파일-
컴파일은 검출하고자 하는 패턴을 만드는 일이다.
우선 정규표현식 객체를 만들어야 한다.
객체를 만드는 방법은 두가지가 있다.
a라는 텍스트를 찾아내는 정규표현식의 2가지 방법이다.
-패턴을 만드는 방식- 1. 정규표현식 리터럴 var pattern = /a/ // "/"와 "/" 사이의 문자열을 pattern에 넣는다. (이것을 사용해 문자 찾기 가능) 2. 정규표현식 객체 생성자 var pattern = new RegExp('a'); // RegExp 객체를 만들어서 찾고자 하는 문자 'a'를 넣어서 pattern에 넣는다.
-실행-
컴파일로 만든 패턴을 가지고 패턴을 실행해서 문자를 찾는것.
-정규표현식 메소드 실행-
RegExp.exec( ) 메소드 (해당 문자열 추출) : 해당하는 문자열이 있으면 그 문자열을 값으로 하는 배열을 리턴하고 없으면 null을 리턴한다. RegExp.test( ) 메소드 (해당 문자열 있는지 테스트) : 패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴한다.
-정규표현식 메소드 사용 예제-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var pattern = /a/ // p attern 변수에 a라는 패턴을 넣음.
undefined
console.log(pattern.exec ('sdfsdf' )); //exec( ) 메소드를 사용해서 'sdfsdf' 안에는 'a'라는 문자열이 없기 때문에 null을 리턴한다.
VM1136:1 null
undefined
console.log(pattern.exec ('basd' )); //exec( ) 메소드를 사용해서 'basd' 안에는 'a'라는 문자열이 있기 때문에 ["a"] 배열을 리턴한다.
VM1211:1 ["a" , index: 1 , input: "basd" , groups: undefined]
undefined
console.log(pattern.test ('bjxs' )); //test( ) 메소드를 사용해서 'bjxs' 안에는 'a' 라는 문자열이 없기 때문에 false 를 리턴
VM1286:1 false
undefined
console.log(pattern.test ('ards' )); //test( ) 메소드를 사용해서 'ards' 안에는 'a' 라는 문자열이 있기 때문에 true 를 리턴
VM1340:1 true
cs
-정규표현식 (문자열) 메소드 사용 예제-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = /2/ //a라는 변수에 2라는 패턴을 넣는다.
undefined
console.log('asdj2'.match(a) ); // 변수 a안에 있는 2라는 패턴이 'asdj2' 안에 있기 때문에 ["2"] 를 출력
VM1486:1 ["2" , index: 4, input: "asdj2", groups: undefined]
undefined
console.log('sndqa'.match(a) ); //변수 a안에 있는 2라는 패턴이 'sndga' 안에 없기 때문에 null을 출력
VM1521:1 null
undefined
console.log('asdfa22'.replace(a,'11') ); //변수 a안에는 2라는 패턴이 1개 들어있기 때문에 'asdfa22'에서 앞에 있는 2만 '11'로 교체해준다.
VM1653:1 asdfa112
undefined
console.log('asdfa55'.replace(a,'11') ); //변수 a안에 있는 2라는 패턴이 'asdfa55'에는 없기 때문에 'asdfa55' 가 그대로 출력된다.
VM1681:1 asdfa55
undefined
cs
-옵션-
정규표현식 패턴을 만들 때 옵션을 설정할 수 있다.
옵션에 따라서 검출되는 데이터가 달라진다.
i
i를 붙이면 대소문자를 구분하지 않는다.
g
g를 붙이면 검색된 모든 결과를 리턴한다.
또한 i와 g를 같이 사용할 수도 있다.
(대문자, 소문자 구분하지 않고 모든 문자를 리턴한다는 뜻)
-옵션 사용 예제-
1
2
3
4
5
6
7
8
9
10
11
12
var a = /a/i // 패턴에 'i'를 붙여서 대소문자 구분하지 않고 출력되게 함.
undefined
"Aadnsh".match(a); // 대소문자를 구분하지 않고 'a'가 한개이기때문에 가장 앞에있는 'A'를 배열에 담아 출력함
["A", index: 0, input: "Aadnsh", groups: undefined]
var b = /b/g // 패턴에 'g'를 붙여 검색된 모든 결과를 리턴 (즉, 모든 'b'를 검색해서 리턴한다는 뜻.. 개수에 관계없이 )
undefined
"bBBASb".match(b); // 'b'가 들어간 것이 2개이므로 'b'가 2개 출력된다.
(2) ["b", "b"]
var c = /c/ig // 패턴에 'i'와 'g'를 붙여서 대소문자를 구분하지 않고, 'c'에 개수에 상관없이 모든 'c'를 리턴한다는 뜻.
undefined
"cCsjJDJcCc".match(c); //대문자 'c'와 소문자 'c' 가 모두 리턴되는것을 확인할 수 있다.
(5) ["c", "C", "c", "C", "c"]
cs
-캡처-
괄호안의 패턴은 마치 변수처럼 재사용할 수 있다. 이 때 기호 $를 사용하는데 순서를 역전시킬때도 사용한다.
-예제-
var a = /(\w+)\s(\w+)/; // \w는 한개의 문자열을 의미 , // +는 그 문자열의 개수를 의미, //\s는 공백을 의미한다.
undefined
var str = "Java Spring"; //str변수에 문자열을 저장
undefined
var result = str.replace (a,'$2-$1' ); //replace는 치환할때 사용하는 메소드, a변수에 담긴 패턴을 사용하고 $를 사용해 문자순서를 뒤바꾼다.
undefined //그리고 공백은 '-' 로 치환되서 출력 된다.
console.log(result ); //result 변수에 담긴 값을 출력함
VM547:1 Spring-Java
cs
-치환-
URL을 링크 html 태그로 교체한다. (이건 나중에 정규표현식만 설명한 강의 따로봐야될듯. 어려움)
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/javascript 2019. 6. 10. 21:02
-UI (User Interface)-
사용자가 지정한 인터페이스 (화면)
-API (Application Programming Interface)-
응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나
프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.
-레퍼런스와 튜토리얼-
튜토리얼 : 언어의 문법을 설명
레퍼런스 : 명령어의 사전을 의미
-자바스크립트의 API-
자바스크립트의 API는 크게 자바스크립트 자체의 API와 자바스크립트가 동작하는 호스트 환경의
API로 구분된다.
자바스크립트 API 문서
* ECMAScript (표준문서)
* 자바스크립트 사전 (생활코딩)
* 자바스크립트 레퍼런스 (MDN)
* jscript 레퍼런스 (MSDN)
호스트 환경의 API 문서
* 웹브라우저 API
* Nods.js API
* Google Apps Script API
출처 (생활코딩)
https://opentutorials.org/module/532/6533
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/javascript 2019. 6. 9. 20:37
-라이브러리-
라이브러리는 모듈과 비슷한 개념이다.
모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용되기
편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다고 할 수 있다.
라이브러리가 무엇인지를 보여주기 위해 jQuery를 잠깐 사용
jQuery 다운로드
http://jquery.com/
jQuery 메뉴얼을 이용해서 사용법을 파악한다.
http://api.jquery.com/
jQuery를 다운받고 jQuery에 자바스크립트 코드를 다운로드 받아서 그것을 읽어보면 된다.
1. 제이쿼리 홈페이지에 접속후 다운로드 버튼 클릭
2. 빨간색 네모부분 클릭
3. 클릭후 코드를 전체 복사
4. sublinetext에 복사한 코드를 jquery.js 파일을 만들고 그 안에 붙여넣기
5. jQuery.demo.html 파일 만들기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html >
<html >
<head >
< script type = "text/javascript" src = "jquery.js" > < / script >
jquery.js 파일을 불러온다.
</head >
<body >
<ul id ="list"
<li >empty</li >
<li >empty</li >
<li >empty</li >
<li >empty</li >
<li >empty</li >
</ul >
<script type ="text/javascript"
$( '#list li' ).text( 'coding everybody' );
$('#list li')는 id값이 list인 태그를 가리키고, li는 그 list태그 안에 있는 li태그를 가리킨다.
그리고 .text('coding everybody')는 그 li태그 안에 있는 문자열인 'empty'를 'coding everybody'로 바꾼다는 의미이다.
그래서 출력결과는 'coding everybody' 가 5번 출력되게 된다.
</script >
</body >
</html >
cs
궂이 jQuery 코드를 사용하는 이유는 브라우저를 사용해서 <li>태그 안에 있는 값을 바꾸려면 너무 코드가 복잡해지기 때문에
보여주기 위해서 jQuery를 사용한 것이다.
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/javascript 2019. 6. 9. 20:05
-모듈-
코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 기법
코드를 여러개의 파일로 분리하는 것.
-모듈의 장점-
1. 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용 할 수 있다. (마치 함수처럼 여러군데에서 사용할 수 있음)
2. 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
3. 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
4. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
5. 한번 다운로드된 모듈은 웹 브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때
시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)
-모듈이란?-
순수한 자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지는 않지만, 자바스크립트가 구동되는
호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다.
자바스크립트의 대표적인 호스트 환경인 웹브라우저에서 로직을 모듈화하는 방법이 있다.
호스트 환경이란? 호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다. 자바스크립트는 브라우저를 위한 언어로 시작했지만, 더 이상 브라우저만을 위한 언어가 아니다. 예를들어 node.js는 서버 측에서 실행되는 자바스크립트다. 이 언어는 자바스크립트의 문법을 따르지만 이 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다.
<관련 예제>
호출할 함수를 별도의 파일로 분리시킴.
파일을 불러와서 그 파일안에 있는 함수를 호출해서 출력시킴
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" / >
< script src = "greeting.js" > < / script >
</head >
<body >
<script >
alert (welcome());
</script >
</body >
</html >
cs
greeting.js
function welcome(){
return 'Hello world';
}
cs
웹브라우저가 화면에 출력될때 src속성이 있는지 없는지 확인하고 그 값이 있다면
그 값에 해당되는 파일이 있다면 " greeting.js" 를 <script>~</script>사이에 넣어서 출력한것과 같이 된다.
출력 결과는 greeting.js 파일의 welcom( ) 메소드가 호출이 되어서 "Hello world" 가 출력된다
이렇게 함으로써 코드가 간결해지고, main.html의 용량을 줄여준다.
sub.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html >
<html >
<head >
< script type = "text/javascript" src = "greeting.js" > script >
</head >
<body >
<script type ="text/javascript" >
welcome();
</script >
</body >
</html >
cs
sub파일에서도 main.html 파일처럼 greeting.js 파일을 불러서 welcome() 메소드를 호출할 수 있다.
그리고 출력 결과는 "Hello world" 가 출력이 된다.
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/javascript 2019. 6. 9. 15:48
-객체란?-
배열은 안에 들어갈 값으로 숫자를 사용했지만, 인덱스로 문자를 사용할때는 객체(dictionary)를 사용해야한다.
다른 언어에서는 연관배열 (associative array) 또는 맵 (map), 딕셔너리(Dictionary) 라는 데이터 타입이 객체에 해당한다.
-객체의 문법-
var grades = {'egoing' : 10 , 'k8805' : 6, 'sorialgi' : 80}; 위의 예제에서 egoing는 key 가 되고, 10은 value 가 된다.
다른 방법
var grades = { }; or new object( ); grades['egoing '] = 10 ; grades['k8805'] = 6; grades['sorialgi'] = 80; 비어있는 객체를 만들고 대괄호 사이에 인덱스 값을 부여하고, 우항에 그 인덱스에 넣을 값을 부여한다. 위의 예제에서 egoing는 key 가 되고, 10은 value 가 된다.
객체에서 값을 가져오고 싶을때는 ['인덱스값'] 또는 .인덱스값 으로 가져올수 있다
ex - grades['egoing'] or grades.egoing 10이 출력됨
[ ]안에 들어가는 값은 문자열이기 때문에 ['ego+'ing'] 이런식으로도 가져올 수 있다.
대괄호만 가능하고 .grades.( )는 문법오류때문에 불가능 하다.
-객체와 반복문-
배열 내부에 있는 데이터는 순서가 있다.
for문을 사용해서 객체 안에 있는 반복문을 출력하는 방법
var grades = { 'egoing' : 10 , 'k8805' : 6, 'sorialgi' : 80}; for (key in grades ) { document.write("key : "+key+" value : " +grades[key]+ "<br / >"); } 새로운 형식의 for in문 grades 안에 있는 인덱스 값들은 for문이 한번 돌 때마다 key라는 변수에 하나씩 저장된다는 의미... key는 변수의 이름이기 때문에 다른 이름으로 변경이 가능하다.
웹페이지 우클릭 -> 요소검사를 통해 웹페이지가 어떤 html로 이루어졌는지 알 수 있음
<ul>~ <li></li>~</ul> 문으로 리스트로 만들수 있음...
for in 문은 배열에서도 사용이 가능하다.
아래 형식은 인덱스 번호가 출력됨.
var arr = ['a','b','c']; for (var name in arr) { console.log (arr[ name] ); } 0 1 2 출력 arr[ ]안에 name라는 변수를 담게되면 인덱스에 해당하는 값들인 a b c 출력
-객체지향 프로그래밍-
var grades = { 'list' : {'egoing' : 10, 'k8805' : 8, 'sorialgi' : 80} 'show' : function( ){ alert('Hello world'); } } elert (grades['list']['egoing']); list안에 있는 egoing의 값이 출력되서 10이 출력됨
var grades = { 'list' : {'egoing' : 10, 'k8805' : 8, 'sorialgi' : 80} 'show' : function( ){ alert('Hello world'); } } grades['show']( ) ; 변수 grades에 담긴 함수 show에 값인 Hello world가 출력된다.
자바스크립트에서는 함수도 변수에 저장이 될수 있다.
this 사용 예제
var grades = { 'list' : {'egoing' : 10, 'k8805' : 8, 'sorialgi' : 80} 'show' : function( ){ for(var name in this.list){ console.log(name, this.list[name]); } } } grades.show(); 객체이름을 적고 변수이름인 show를 호출하면 그 변수에 담겨있는 함수인 function()가 실행되서 출력값이 출력된다. this는 다른 언어들의 this와 동일하다. 출력값은 list의 값을 name에 넣은 name의 list의 값인 10 8 80 이 출력된다.
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/CSS 2019. 6. 5. 12:20
CSS 사용이유 : HTML만 사용하면 문서의 디자인이 한정적이기 때문에 CSS를 사용한다.
-CSS 구문 구성-
CSS의 규칙은 선택자(Selector)과 선언 블록(declaration block)으로 구성된다.
(어떤거? (Selector) 를 어떻게? (Declaration) 꾸며줄 것인가?? 라는 의미)
Selector Declaration Declaration
h1 { color : red; font-size : 10; }
위의 예제에서는 <h1> 태그 요소의 글자 색상은 빨간색으로 하고 글자 크기는 10으로 표시하라는 뜻이된다.
color <- Property red <- Value font-size <- Property 10 <- Value
첫번째 선택자(Selector) 은 HTML의 <DIV>나 <P> 태그 같은 스타일을 지정할 HTML 태그나 클래스, ID 등을 가리킨다.
(쉽게 말해서 html의 어떤 요소를 꾸며줄건지 선택하는 부분)
두번째 선언블록은 하나 이상의 선언의 모음을 말하는데, 블록 안에 각 선언들은 세미콜론 ( ; ) 으로 끝마치거나
구분되고 시작과 끝은 중괄호 ({ })로 둘러싸여진다.
(자세한 속성에 대한 값들.. 예를 들면 색깔이나 높이 등등등... 그리고 선언들이 합쳐진것을 선언블록이라고 한다.)
블록안을 살펴보면 개별적인 선언 (declaration)은 속성(Property)과 (Value)으로 구성된다.
속성이란건 어떤 요소에 대한 속성을 말한다.
-em 단위-
em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다.
간단한 예제
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html >
<html lang ="ko"
<head >
<meta charset ="utf-8"
<title >CSS</title >
<style >
html { font-size : 16px ; } //html요소의 크기를 16픽셀로 한다
body { font-size : 1.5em ; } //body 요소의 크기를 상위요소 크기의 1.5배인 24픽셀로 한다.
.a { font-size : 2.0em ; } //문단 요소의 크기를 상위요소(body) 크기의 2 배인 48픽셀로 한다.
</style >
</head >
<body >
<p class ="a" p >
</body >
</html >
cs
-rem 단위-
rem 단위는 문서의 최상위 요소, 즉 html 요소의 크기의 몇 배인지로 크기를 정합니다. 위 예제에서
에서 단위를 rem으로 바꾸면
.a { font-size: 2.0rem ; }
cs
글자 크기는 32픽셀이 됩니다.
(html 요소의 크기가 16픽셀이고 2.0 배를 해주었기 때문에 32픽셀이 된다.)
참고로 html 요소와 문단 요소 사이에 있는 body 요소의 크기는 영향을 미치지 않습니다.
-정리- CSS는 선택자와 선언모음으로 구성이 되고 각 선언들은 속성과 값으로 구성된다.
출처
https://www.youtube.com/watch?v=ujzr0nxWb2E
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/javascript 2019. 6. 1. 12:08
배열
배열 (array)이란 연관된 데이터를 모아서 통으로 관리하기 위해 사용하는 데이터 타입이다.
변수가 연관된 데이터 하나를 저장한다면 , 배열은 연관덴 데이터 여러개를 저장하는 것이다.
toUpperCase( ) - 자바 스크립트가 기본적으로 제공해주는 함수
매개값으로 소문자를 주면 대문자로 리턴해주는 함수
배열의 원소 추가
다음은 배열의 끝에 원소를 추가하는 방법이다.
push는 인자로 전달된 값을 배열(li)에 추가하는 명령이다.
배열 li의 값은 a, b, c, d, e, f 가 됐다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f'); //배열 뒤쪽에 f를 추가한다.
alert(li); //["a","b","c","d","e" ] 를 출력한다.
cs
복수의 원소를 배열에 추가하는 방법이다.
concat는 인자로 전달된 값을 추가하는 명령이다.
var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f','g']); //배열 뒤쪽에 f,g를 추가한다.
alert(li); // [" a","b","c","d","e","f","g"] 를 출력한다.
cs
배열의 시작점에 원소를 추가하는 방법
unshift는 인자로 전달한 값을 배열의 첫번째 원소로 추가하고 배열의 기존 값들의 색인을 1씩 증가시킨다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z'); //배열 앞쪽에 'z' 를 추가한다.
alert(li); // ["z","a","b","c","d","e","f","g" ] 를 출력한다.
cs
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
