자바스크립트
자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다.
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다.
자바스크립트를 공부해야하는 이유는 아래와 같습니다.
JavaScript는 모든 웹 개발자가 배워야 하는 3가지 언어 중 하나입니다.
1. 웹 페이지의 내용을 정의하는 HTML
2. 웹 페이지 레이아웃을 지정하는 CSS
3. 웹 페이지의 동작을 프로그래밍하는 JavaScript
자바스크립트를 처음 사용하기 위해 프로그램을 설치할 필요가 없습니다.
자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다.
현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다.
JavaScript Can Change HTML Content
자바스크립트를 사용하여 웹 프로그래밍에서 할 수 있는 일은 다음과 같이 매우 다양합니다.
1. 자바스크립트는 HTML의 '내용'을 변경할수 있습니다
2. 자바스크립트는 HTML의 '속성'을 변경할수 있습니다.
3. 자바스크립트는 HTML의 '스타일'을 변경할수 있습니다.
아래 예제는 HTML element가 (id = "demo")를 "찾고" element 내용을 (innerHTML)를 "Hello JavaScript"로 변경합니다.
자바스크립트는 <script> 태그 안에서 작동됩니다.
JavaScript Functions and Events
Function: 자바스크립트가 실행하는 명령
Event: 함수 실행으로 발생한 결과
External JavaScript
외부 js 파일에 자바스크립트 코드를 저장하고 불러와서 사용할 수 있습니다.
다만, script src="파일경로+파일명" 을 명시해야합니다.
JavaScript Output
자바스크립트 출력
자바스크립트는 여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있습니다.
자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같습니다.
1. window.alert() 메소드 : 윈도우 alert 박스를 나타냄
2. HTML DOM 요소를 이용한 innerHTML 프로퍼티: 원하는 특정 HTML 요소를 지정하여 그 값을 변경
3. document.write() 메소드 : HTML 결과물을 바꾸는것
4. console.log() 메소드: 콘솔 로그를 나타낸다.
JavaScript Keywords
KeywordDescription
| break | Terminates a switch or a loop |
| continue | Jumps out of a loop and starts at the top |
| debugger | Stops the execution of JavaScript, and calls (if available) the debugging function |
| do ... while | Executes a block of statements, and repeats the block, while a condition is true |
| for | Marks a block of statements to be executed, as long as a condition is true |
| function | Declares a function (함수명 정의) |
| if ... else | Marks a block of statements to be executed, depending on a condition |
| return | Exits a function |
| switch | Marks a block of statements to be executed, depending on different cases |
| try ... catch | Implements error handling to a block of statements |
| var | Declares a variable (변수 선언) |
JavaScript is Case Sensitive
자바스크립트는 대소문자 구분한다.
JavaScript and Camel Case
식별자 작성 방식
자바스크립트에서는 식별자를 작성할 때 다음과 같은 작성 방식을 사용할 수 있습니다.
1. Camel Case 방식
2. Underscore Case 방식
Camel Case 방식이란 식별자가 여러 단어로 이루어질 경우에 첫 번째 단어는 모두 소문자로 작성하고, 그다음 단어부터는 첫 문자만 대문자로 작성하는 방식입니다.
Underscore Case 방식은 식별자를 이루는 단어들을 소문자로만 작성하고, 그 단어들은 언더스코어(_)로 연결하는 방식입니다.
예제
var firstVar = 10; // Camel Case 방식
function my_first_func { // Underscore Case 방식
var firstLocalVar = 20; // Camel Case 방식
}
JavaScript Data Types
var 타입은 모든 데이터 타입을 contain할 수 있습니다.
JavaScript Arithmetic
number + number = number
string + string = string --> var x = "John" + " " + "Doe"; ==> "John Doe"
string + number+ number = string --> var x = "5" + 2 + 3; ==> "523" (string이 먼저 나오면 나머지 숫자들도 string으로 간주)
number + number+ string = string --> var x = 2 + 3 + "5"; ==> "55" (number가 먼저 나오면 숫자부분들만 덧셈을 하고 string은 숫자뒤에 concatenate해줌)
Primitive Data
typeof 명령어는 데이터타입을 반환한다.
(주의점: array 배열은 object로 여겨져서 object로 반환이된다. )
JavaScript String Methods
String Length
Finding a String in a String
use indexOf()
Searching for a String in a String
use search()
Extracting String Parts
string을 잘라내는 방법은 3가지가 있습니다. (아래 함수에서 첫 index 와 마지막 index 를 지정하여 해당 범위의 string 추출)
Replacing String Content
replace("바꾸고자 하는 텍스트", "새로운 텍스트") 함수는 특정 텍스트를 새로운 텍스트로 교체할 수 있습니다.
The charAt() Method
Converting a String to an Array
특정 string을 split하여 배열로 저장할 수 있습니다.
JavaScript Array Methods
stack과 같이, array에 pop(), push() 에 할 수 있고, 나머지는 아는 내용이다.
다음 메소드는 원본 배열을 직접 변경하는 메소드입니다.
1. push()
2. pop()
3. shift() : shift() 메소드는 pop() 메소드와는 달리 배열의 가장 마지막 요소가 아닌 첫 요소를 제거하고, 그 제거된 요소를 반환합니다. 따라서 shift() 메소드도 실행할 때마다 배열의 길이가 1씩 줄어들게 됩니다.
4. unshift() : unshift() 메소드는 하나 이상의 요소를 배열의 가장 앞에 추가합니다.
원본 배열은 추가한 요소의 수만큼 길이(length)가 늘어나게 되며, 요소를 성공적으로 추가하면 배열의 총 길이를 반환합니다.
5. reverse() : reverse() 메소드는 배열 요소의 순서를 전부 반대로 교체합니다.
즉, 가장 앞에 있던 요소가 가장 뒤에 위치하며, 가장 뒤에 있던 요소는 가장 앞에 위치하게 됩니다.
6. sort() : sort() 메소드는 해당 배열의 배열 요소들을 알파벳 순서에 따라 정렬합니다.
이 메소드는 배열 요소를 모두 문자열로 보고 정렬하므로, 숫자나 불리언과 같은 타입의 요소들은 잘못 정렬될 수도 있습니다.
7. splice() : splice() 메소드는 기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경합니다.
첫 번째 인수는 새로운 요소가 삽입될 위치의 인덱스이며, 두 번째 인수는 제거할 요소의 개수입니다.
그 이후의 인수들은 모두 배열 요소로서 지정된 인덱스부터 차례대로 삽입됩니다.
이 메소드는 배열에서 제거된 요소를 배열의 형태로 반환하며, 아무 요소도 제거되지 않았으면 빈 배열을 반환합니다.