[Javascript] <태그>, #속성 기본 정리
<script></script> 라는 태그 안에서 이루어지는 것. 또는 <head> 태그 속 <link href="" rel=""> 를 이용해 js문서를 참조할 수도 있다.
body 내에서 <script> 링크를 참조한다면, 가능한 한 <body> 태그의 제일 하단에 <script scr=""></script> 로 기입한다.
문자형 변수
--
이스케이프 문자
자바스크립트에서는 문자열안에 여러 줄의 글을 입력할 수 없습니다.
아래처럼 코드를 작성하면 오류가 발생합니다.
var myString = "first line
second line
third line";
대신 줄바꿈 이스케이프 문자열인 \n를 사용하여 표현합니다.
var myString = "first line\nsecond line\nthird line";
대표적인 이스케이프 문자로는 아래가 있습니다.
| \n | 줄바꿈 |
| \t | 수평 탭 |
| \\ | 문자 “\” |
| \' | 작은 따옴표(') |
| \" | 큰 따옴표(") |
배열
개요
JavaScript의 배열은 숫자형이나 문자열과 마찬가지로 일반적인 스크립트 언어와 크게 다른 것이 없습니다.
C나 Java와는 상당히 다른데, 동적 타입 언어의 특징상 배열에도 타입이 정해져있지 않습니다.
배열은 []나 new Array()로 생성하며, 크기의 제약이 없고, 하나의 배열에 서로 다른 타입의 변수가 들어갈 수 있습니다.
var emptyArray = [];
var oddNumbers = [1, 3, 5, 7, 9];
var evenNumbers = new Array(2, 4, 6, 8, 10);
var mixedArr = ['a', 1, 'b', 3, new Date(), "today"];
항목에 접근시에는 fruits[1] 처럼 사용합니다.
자주쓰는 속성과 메소드
길이
var colors = ['red', 'blue'];
console.log(colors.length);
// 2
맨 뒤에 항목 추가
colors.push('green');
// ['red', 'blue', 'green']
맨 뒤의 항목 제거
colors.pop(); // 함수의 반환값: green
// 배열의 값: ['red', 'blue']
맨 앞에 항목 추가
colors.unshift('white');
// ['white', 'red', 'blue']
맨 앞의 항목 제거
colors.shift(); // 함수의 반환값: white
// ['red', 'blue']
배열 내부 값의 위치 찾기
console.log( colors.indexOf('red') );
// 0
인덱스 위치에서부터 n개의 항목 제거
fruits = ['red', 'blue', 'green', 'yellow'];
var removedItem = fruits.splice(1, 2); // 1번 인덱스부터 2개 제거
// fruits: ['red', 'yellow']
// removedItem: ['blue', 'green']
객체
개요
자바스크립트에서 객체는 매우 중요한 개념입니다. 자료형 강의에서 자바스크립트의 자료형은 Primitive 타입과 Object 타입이 있다고 했는데, 다시 말하면 Primitive 타입 이외의 모든 변수는 객체 타입이라는 소리입니다.
객체와 Primitive(원시) 타입의 가장 큰 차이점은 Reference(참조)에 있습니다.
원시 타입 변수는 다른 변수에 값을 할당하거나 함수 인자로 넘길 때, 값을 복사하여 전달하지만,
객체는 메모리 주소를 복사시키며 값 자체는 복사되지 않아 같은 객체를 참조하게 됩니다.
배열도 객체의 일부이며, 함수의 인자로 넘기거나 다른 변수에 참조시킬 수 있습니다.
사용법
자바스크립트에서 좁은 의미의 객체는 키-값 형태의 쌍을 저장할 수 있는 딕셔너리를 의미합니다.
아래는 샘플 JavaScript Object 입니다.
var me = {
'name': 'young',
'birth': 1996,
'sex': 'm'
}
중괄호 {} 를 이용해 생성하며 : 과 ,를 이용해 중괄호 내부에서 키-값 쌍을 설정할 수 있습니다.
{} 대신 new Object() 생성자 사용도 가능하며, 인덱스 접근자 [i]를 사용하여 키-값을 설정할 수도 있습니다.
var me = {};
me['name'] = 'young';
me['birth'] = 1996;
me['sex'] = 'm';
프로퍼티 접근자 .을 사용하여 property(키)에 접근할 수도 있습니다.
var me = { 'name': 'young' };
me.birth = 1996;
QuerySelector
개요
JavaScript에서 제어 대상(문서 객체)를 찾기 위해서 몇 가지 함수를 제공합니다.
적절한 제어 대상을 정하고 함수 호출을 하면 객체를 반환하게 되는데, 이 객체의 속성과 메소드를 통해 자바스크립트에서 문서를 동적으로 처리할 수 있습니다.
| getElementById | id 속성으로 검색 | 객체(한개) |
| getElementsByClassName | class 속성으로 검색 | 배열(여러개) |
| getElementsByTagName | 태그 이름으로 검색 | 배열(여러개) |
| querySelector | jQuery-유사 셀렉터 | 객체(한개) |
| querySelectorAll | jQuery-유사 셀렉터 | 배열(여러개) |
위 함수들은 글로벌 함수가 아닌 객체 모델에서 사용할 수 있는 함수입니다.
즉, getElementById 함수로 이미 찾은 객체 내부에서 다시 getElementsByClassName 함수를 사용하는 식이죠.
문서 전체에서 객체를 찾을 시에는 document 전역 변수를 사용합니다.
querySelector 함수와 querySelectorAll 함수는 jQuery 강의를 참고 바랍니다.
사용법
var mytext1 = document.getElementById('mytext1');
var containers = document.getElementsByClassName('container');
var images = document.getElementsByTagName('img');
var mytext1_1 = document.querySelector('#mytext1');
var containers = document.querySelector('.container');
getElementById
예제
<input id="mytext1" type="text">
<script type="text/javascript">
var myText1 = document.getElementById('mytext1');
myText1.value = Math.random();
</script>
:
getElementsByClassName
예제
<input class="rand-text" type="text">
<input class="rand-text" type="text">
<input class="rand-text" type="text">
<script type="text/javascript">
var randTexts = document.getElementsByClassName('rand-text');
for (var i = 0; i < randTexts.length; i++)
randTexts[i].value = Math.random();
</script>
getElementsByTagName
예제
<select id="my-selector">
<option></option>
<option></option>
<option></option>
</select>
<script type="text/javascript">
var mySelector = document.getElementById('my-selector');
var mOptions = mySelector.getElementsByTagName('option');
for (var i = 0; i < mOptions.length; i++)
mOptions[i].innerHTML = Math.round(Math.random() * 10000);
</script>