ⅰ. JavaScript란?
- 프로그래밍 언어 중 하나로 브라우저가 알아들을 수 있는 언어
- 역사적인 이유와 이미 만들어진 표준이기 때문에 모든 브라우저는 기본적으로 JavaScript를 알아듣게 설계되어있고, 모든 웹서버는 HTML + CSS + JavaScript를 주게됨
HTML은 뼈대, CSS는 꾸미기, JavaScript는 웹을 움직이게 하는 코드
ⅱ. JavaScript 기초
- JavaScript 선언
- JavaScript는 내부와 외부에 선언할 수 있음
- JavaScript 선언문의 형태
<script>
JavaScript 코드
</script>
- <script>태그를 사용하며, JavaScript 코드는 웹 사용자에게 보이지 않음
- HTML 내부에 선언
- JavaScript 선언문의 위치는 html문서 내 <head>태그, <body>태그 영역 내에 위치할 수 있음
- <head> 영역에 위치
▶ 순차적으로 실행하기 때문에 <body> 태그에 쓰인 HTML 코드를 실행하기 전 JS코드를 먼저 해석
▶ 코드 양이 적을 겨우는 괜찮지만, 작성한 script 코드나 스타일 시트등의 용량이 클 수록 <head>의 있는 모든 코드를 해석하는데 시간이 걸림
=> <body>태그 내에 코드 해석이 늦어져 사용자에게 보이는 페이지 로드가 느려짐
▶ 페이지 로드 전에 반드시 실행 되어야 하는 자바스크립트 코드가 있는 경우에는 <head>안에 선언하는 경우가 많음
- <body> 영역에 위치
▶ <body> 태그의 제일 하단에 선언문을 위치 시킴
▶ <body>영역에 있는 HTML 코드가 먼저 실행되어 사용자의 화면에 HTML코드가 나타나고 자바스크립트 코드가 실행되기 때문에 페이지 로딩 속도가 빠르게 느낌
▶ 대부분의 자바스크립트 코드는 <body> 영역에 작성하는 것이 좋음
- HTML 외부에 선언
▶ script안에 코드가 길어지거나 해당 웹에 서브페이지의 수가 많아질 경우엔 유지보수 측면에서 많은 불편함이 생김
=> 코드의 효율적인 관리와 가독성을 위해 외부로 분리 필요
▶ 외부에 선언하는 방법
1) js파일을 생성(ex. home.js)
2) 생성된 js파일에 <script>태그 없이 작동시킬 코드만 작성
3) 필요한 html파일 내부 <head> or <body>태그 내에 <script>태그를 적은 후 경로를 삽입
=> <script src="./파일명"></srcipt>
- JavaScript 함수
▶ 프로그래밍에서는 정해진 일을 반복하는 것을 함수라함
▶ function 함수명() {
javascript 코드 작성
}
▶ 아래의 코드를 해석하면 hello라는 함수를 선언한 후에 경고창을 뜨게하는 alert라는 명령어를 사용하여 함수를 실행하면 안녕하세요라는 경고창을 뜨게 만든 후 버튼에 클릭이벤트로 함수와 버튼을 연결시킴. 버튼을 누르면 함수가 실행됨
<script>
function hello() {
alert('안녕하세요')
}
</script>
.
.
.
<button onClick="hello()">버튼</button>
- console.log()
▶ 코딩한 것이 맞게 출력되는지 확인하기 위해 사용하는 명령어가 console.log()
▶ 윈도우는 F12, 맥은 fn + F12를 눌러서 개발자도구를 열고, console탭에 들어가면 console.log()에 작성한 명령어가 실행됨
▶ console 창은 개발자들이 정확하게 출력되는지 스스로 찍어볼수 있도록 만들어진 탭으로 새로고침을 하면 모두 사라지게 됨
- 변수
▶ 변수의 선언
let or const 변수명 = 값
▶ 변수는 값을 저장하는 박스
▶ let은 한번 선언하면 다시 선언하지 않고 값을 넣을수 있고, const는 한번 선언하면 값을 바꿀수 없음
▶ 변수 대입은 오른쪽에 있는 것을 왼쪽에 넣는다고 생각하면 됨
▶ 변수명은 쉽게 알아 볼 수 있게 쓰는 것이 중요하고 다른 특수문자나 띄워쓰기는 불가능함
let age = 20
age = 15
const num = 15
num = 20 // 오류 발생
- 기본연산
▶ 사칙연산, 문자열 더하기가 기본적으로 가능
let a = 1
let b = 2
a + b // 3
a / b // 0.5
const firstName = 'Jisu' // camel case
const last_name = 'Kim' // snake case
firstName + last_name // JisuKim
firstName + ' ' + last_name // Jisu Kim
- 배열
▶ 순서를 지켜서 가지고 있는 형태
▶ 변수 여러개를 쉽게 작성할 수 있음
let aList = [] // 배열의 선언
// or
let bList = ['apple', 1, 2, 'banana'] // 배열의 선언
console.log(bList[1]) // 1을 출력
console.log(bList[0]) // apple을 출력
// => 컴퓨터는 0부터 세기때문에 우리가 생각하는 1을 출력하려면 0을 입력
bList.push(3)
console.log(bList) // ['apple', 1, 2, 'banana', 3] 출력
console.log(bList.length) // 5를 출력
- 객체(Object)
▶ 키(key)밸류(value) 값의 묶음
let aDict = {} // 객체 선언
// or
let bDict = {name: 'Jisu', age: 20} // 객체 선언
console.log(bDict[name]) // 'Jisu'를 출력
console.log(bDict[age]) // 20을 출력
bDict[height] = 160 // 객체에 키: 밸류 넣기
console.log(bDict) // {name: 'Jisu', age: 20, height: 160}을 출력
- 배열과 객체
▶ 두개를 조합한 형태의 자료를 많이 사용함
▶ 보기에 깔끔해지고, 다루기 쉽고, 순서를 표시할수 있고, 정보를 하나로 묶을수 있기 때문에 중요
let customers = [
{name: 'Jisu', age: 20},
{name: 'Jennifer', age: 22}
]
// customers[0][name]의 값은? 'Jisu'
// customers[1][age]의 값은? 22
let newCustomer = {name: 'Chaeyeong', age: 25}
customers.push(newCustomer)
// customers의 값은?
// [{name: 'Jisu', age: 20},{name: 'Jennifer', age: 22}, {name: 'Chaeyeong', age: 25}]
// customers[2][name]의 값은? 'Chaeyeong'
- 기본 함수들
▶ 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재