1. Javascript 기초
1-1. Javascript란?
- 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어로 브라우저가 알아들을 수 있는 언어
- 스크립트(script): 자바스크립트로 작성한 프로그램< JS 주석처리 > - 한 줄 주석: //주석내용 - 여러 줄 주석: /*주석내용*/
1-2 자바스크립트 - HTML 연결
HTML 문서에 직접 작성
<head>~</head> 안에 <script>~</script> 태그 만들어 작성<!--예시--> <head> <script> function hey() { alert('안녕!'); } </script> </head> <body> <button onclick="hey()">버튼</button> </body>
스크립트 파일을 만든 후 불러오기
1. JavaScript 파일을 같은 폴더에 따로 만들어 작성 2. HTML 문서에 연결 → <head>~</head> 안에 <script src="JS파일이름.js"></script> 코드 넣기
2. 기초 문법
2-1. 함수
1) 개념
함수란?
- JavaScript의 기본적인 구성 블록 중 하나
- 고유 미션을 수행하는 명령어들의 모임
- 미리 작성한 후 호출하여 사용함
함수 용어 정리
- 변수: 언제든지 변경할 수 있는 값이자, 그 값을 저장하는 박스
- 매개변수: 함수를 정의할 때 사용하는 변수
- 인수: 함수가 호출될 때 매개변수에 실제로 담기는 값
- 반환값 or 결과값: 함수가 호출된 곳으로 반환하는 값
콘솔창이란?
- 자바스크립트를 실행하고, 에러 메시지 등을 출력해주는 창
→ 명령 프롬프트
2) 변수명
- 데이터의 의미를 쉽게 알아볼 수 있게 작성하는 것이 중요!
3) 함수 선언하고 호출하기
선언하기
function 함수이름(매개변수) { 명령문 ... return 반환값 // return: 결과값을 반환하기 위한 명령어 }호출하기
- 함수 이름을 사용해 함수를 실제로 사용하는 것
함수이름(인수);예시
- 선언하기
function sum(n1, n2) { console.log('숫자', n1, n2); // console.log: 콘솔창에 메시지 표시하기 위한 명령어 return n1 + n2; }
- 호출하기
sum(1, 2); // 3 sum(3, -1); // 2
4) 기본 내장 함수
- 기본적으로 내장되어있는 함수는 로딩 과정이 필요없다.
※ 변수 대입: 'let'으로 변수를 선언
let n = 23 n = 50 // 한 번 let으로 선언했으면, 다시 선언하지 않고 값을 대입연산
- 사칙연산
let a = 4 let b = 2 a+b // 6 a-b // 2 a*b // 8 a/b // 2let first_name = 'eunju' let last_name = 'lee' first_name + last_name // 'eunjulee'# 문자+숫자 는 숫자를 문자로 바꾼 뒤 연산함 let n = 1 let a = "number" a+n // number1
- 나눗셈의 나머지 구하기
et a = 15 let b = 4 a % b // 3
- 특정 문자로 문자열 나누기
let phone_umber = '010-1234-5678' let result = phone_umber.split('-') // '-'로 문자열 나누기 result // ['010', '1234', '5678']
2-2. 자료형
1) 리스트
리스트 : 대량의 데이터를 순서를 가지고 저장
- 리스트 선언
- let a_list = [] - let a_list = [1,2,3]
- 출력
a_list[1] // 2 를 출력 a_list[2] // 3 을 출력
- 리스트 추가
a_list.push('안녕') a_list // [1, 2, 3, "안녕"] 를 출력
- 리스트 길이 구하기
a_list.length // 4를 출력
2) 딕셔너리
딕셔너리 : 키(key)와 값(value)을 한 쌍으로 저장하는 자료 구조
- 키(key): 중복 불가, 값(value): 중복 허용
- 딕셔너리 선언
- let a_dict = {} - let a_dict = {'name':'eunju','age':23} a_dict['name'] // 'eunju'를 출력 a_dict['age'] // 23을 출력
- 딕셔너리 추가
a_dict['height'] = 164 a_dict // {name: "eunju", age: 23, height: 164}을 출력
- 딕셔너리 삭제
del a_dict['name'] a_dict // {age: 23, height: 164}을 출력
2-3. 조건문
1) 조건문이란?
특정 조건을 만족할 때 작업을 실행하는 제어문
2) if | else if | else
if
if (조건식) { // 조건식을 충족하면 블록문을 실행 명령문 }if - else
if (조건식) { 명령문 } else { // if 조건식을 충족하지 않는 나머지에 대해 명령문을 수행 명령문 }if - else if
if (조건식) { 명령문 } else if (조건식) { // 조건식을 충족하면 명령문을 실행 → 조건을 2개 이상 만들 때 사용 명령문 } else if (조건식) { 명령문 } ...if - else if - else
if (조건식) { 명령문 } else if (조건식) { } else { // if, else if 조건식을 모두 충족시키지 않는 나머지에 대해 명령문을 실행 명령문 }
2-4. 반복문
1) 반복문이란?
반복해서 실행하는 제어문
2) while
조건을 만족하면 반복 실행한다.
n = 0; while (n < 5) { // 조건식 'n < 5'를 만족시키면 명령문 반복 실행 명령문 n ++; // n이 증가해야 무한 반복하지 않음 }< 증감 연산자> - i++ : i 를 1 증가시킴 - i-- : i 를 1 감소시킴
3) for
정해진 횟수만큼 반복 실행한다.
for (시작조건; 반복조건; 더하기) { 명령문 }< 0부터 99까지 출력 > for (let i = 0; i < 100; i++) { console.log(i); } // i=0부터 i=99 까지 console.log(i)를 실행 // 명령문을 실행 할 때마다 i가 1 증가하므로 반복조건에 맞지 않을 때까지 반복 실행함
4) 조건문과 반복문
조건문과 반복문을 활용해 짝수만 출력
for (let i = 1; i < 10; i++) { if (i%2 == 0) { console.log(i); } } // 2 4 6 8 출력
