💡 자바스크립트란?
자바스크립트는 '웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어이다.
자바스크립트로 작성한 프로그램을 스크립트(script)라고 불린다.
주석 :
- 한줄 주석 : //
- 여러 줄 주석 : /* */
스크립트 태그
HTML 문서 내에서 <script>태그를 사용하여 자바스크립트 코드를 삽입 가능
외부 스크립트 연결
<script src = "파일 경로.js"></script>를 사용하여 외부 자바스크립트 파일을 HTML에 연결
1) 변수와 상수
-
(ES5)var : 중복선언 가능, 장단점이 존재하므로 되도록 let 사용
-
(ES6)let : 변수 선언, 값 변경 가능
-
const : 상수 선언, 한 번 할당하면 변경 불가
데이터 타입
1) number, string, boolean , null , undefined 등 다양한 데이터 타입 존재
연산자 :
산술 연산자 (+, -, *, /, %)
대입 연산자 (=, +=, -= )
비교 연산자 (>, <, >=, <=, ==, ===, != )
문자열 연결 연산자 (+)
논리 연산자 (&&, ||, !)
오라클과 다른 점 (===연산자 추가)
let a = 1;
let b = '1';
let c = 2;
let d = true;
console.log( a == b );
= ture 출력 ( 값만 비교 , 데이터 타입을 자동변환하여 숫자와 문자열 상관없이 1이라는 숫자를 비교
1과 '1'을 비교시 같은 값으로 인식)
console.log( a === b );
= false 출력 ( 값과 타입까지 비교 , 오류확률을 줄일 수 있다 )
console.log( a == c );
= false 출력
console.log( a == d );
= ture 출력 (2진수에서 1은 ture이기 때문에 1은 곧 ture이며 ture==ture는 ture 출력)대화상자
[1] alert : 경고창을 띄우는 함수
window.alert("hello javaScript");
alert('hi');[2] confirm : 사용자에게 확인을 받는 함수
let result = confirm('계속 진행할까요?')= 경고창 팝업으로 계속 진행할까요? 출력
확인 선택시 true 출력
[3] prompt : 사용자에게 값을 받는 함수, 입력한 내용은 문자열로 반환
result = prompt('이름을 입력하세요');= 팝업으로 이름을 입력하세요(text창 출력)
ES6 :
let , const : 변수 및 상수 선언
화살표 함수 (=>) : 함수 표현을 간단하게 만듦
템플릿 리터럴 : 백틱 기호 사용(${} 사용)으로 변수의 포함한 문자열 표현
const result = `내이름은 ${name}이고, 나이는 ${age}살 입니다.`;= 내 이름은 김씨이고, 나이는 20살입니다. 출력조건문과 반복문
if , else if , else : 조건에 따라 코드 실행
for , for-of, for in : 반복문을 통해 코드 반복 실행
[1] for문 예제
for (let i = 0; i < 10; i++) {
console.log(i);
}
[2] for-of문 예제
배열의 내용을 편하게 사용하기 위한 반복문 *대괄호 이용 []
let names = ['김','이','박','최','정'];
for(let name of names){
console.log(name);
}[3] for-in문 예제
key =
['name', 'age', 'address']
Object.values=
['김', 20, '서울']
for(let key in person){
console.log(`${key} : ${person[key]} `);
내장 객체
Date , Math 등 다양한 내장 객체를 사용하여 특정 기능을 수행
함수
function 키워드를 사용하여 함수를 정의하고 매개변수와 반환 값을 구성함
function : 함수 사용 선언
add : 함수 이름
[1] es5버전 함수 (매개변수가 여러 개인 경우) :
function add( a, b ){
return a + b;
}[2] es6버전 함수(매개변수가 여러 개인 경우) :
const add = (a,b) => a + b;[3] es5버전 객체 반환 :
function createPerson(name, age) {
return {
name : name,
age : age
};
}const creatPerson = (name , age) => ({name,age}); :
-
function 키워드 대신 '=>'을 사용하여 함수 정의
-
매개 변수가 하나일 경우 괄호 생략가능
-
함수 본문이 한 줄일 경우 중괄호 {}와 return 문 생략가능
