JavaScript
개발 : 브랜든 아이크, Ecma International
개발일 : 1995년 12월 4일
최신 버전 : ECMAScript 2021(2021년 6월)
개요
Ecma International의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당된다. 특수한 목적이 아닌 이상 모든 웹 브라우저에 인터프리터가 내장되어 있다. 오늘날 HTML, CSS와 함께 웹을 구성하는 요소 중 하나다. HTML이 웹 페이지의 기본 구조를 담당하고, CSS가 디자인을 담당한다면 JavaScript는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다.[1] 웹 페이지를 자동차에 비유하자면, HTML은 자동차의 뼈대, CSS는 자동차의 외관, JavaScript는 자동차의 동력이라고 볼 수 있다.document.write("Hello, world!"); // HTML 문서에 출력된다.
alert("Hello, world!"); // 알림창으로 출력된다.
console.log("Hello, world!"); // 보통 F12(또는 Ctrl+Shift+I / macOS의 경우에는 ⌘+⌥+I)를 누르면 보이는 콘솔 창에 출력된다.
- 자바스크립트는 chrome 에 console창에서 작성하기도 한다.
*변수
ecma 5 버전에서는
var변수를 사용하였다. 유연하게 변수가 적용되는 대신 단점이 커서
ecma 6 버전에 새로 나온const(변할 수 없는 값) 와let(변할 수 있는 값) 을 사용한다.
*호이스팅 이란?
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.
- 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
- 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
- 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
- 유효 범위: 함수 블록 {} 안에서 유효
- 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리에서는 변화가 없다.
* ecma 5 : var
var는 block scope를 철저히 무시한다. 즉 선언하지 않아도 값을 어디서 가져온다.
(var로 만든것은let으로 변환하면 됨)var현개발에서var사용을 하지 않음var는 hoisting이 일어남- 어디에 선언되었는지 상관없이 맨 상단으로 끌어올려 주는것
- 대부분은 프로그램 언어에서는 변수를 선언하고 그 값을 할당하는것이 정상
- 자바스크립트 var에서는 선언도 하기 전에 값을 할당하고 심지어 값을 할당하기 전에 출력도 할 수 있음
1. Use strict
자바스크립트는 치명적인 오류가 아니면 에러를 보내지 않고 warning으로 끝나는 경우도 있기에 엄격한 모드를 실행할 때 사용한다.
ex) 'use strict';
2. variable - 변경될수 있는 값 (read/write) - 읽고 쓰기만 가능
let,var값의 재할당이 가능
ex)
let name='sehyeon'
console.log(name);
name='hello'
console.log(name);
const값의 재할당이 불가능
ex)
const name1='sehyeon'
console.log(name1);
name1='hello'
console.log(name1);
3. const - (read only) 읽기만 가능, 한번 할당되면 변하지 않는 값
- 보안상 다른 해커가 값을 변경하는 것을 막을 수 있음
- 실수를 방지 할 수 있음
- ex) const dayInWeek=7;
변경가능(Mutable)-let
변경불가능(Immutable)-const
4. 전역변수 , 지역변수
let globalName='globalname';
전역변수: 메모리에 탑재되어 있기 때문에 어디서든 불러내면 나타남
{
let names='JooJoo';지역변수
console.log(names);
names='hello1'
var num=1;
console.log(num);
}
5. variable types
- primitive(더이상 나눠질 수 없는 타입)-number, string, boolean, null, undefined, symbol
- object(객체 single item들을 묶어서 한 박스로 관리해줌)
- function, first-class function- 변수로 할당이 가능 인자값 리턴 타입이 가능
ex) JavaScript를 이용하여 카운팅 버튼 만들기
결과
HTML
<body>
<div id="wrap">
<div id="counter">0</div>
<div id="increase">+</div>
<div id="decrease">-</div>
</div>CSS
#wrap{
width: 300px;
margin: 50px auto;
background: #eee;
padding: 10px 20px;
display: flex;
justify-content: space-between;
font-size: 30px;
}Script
<script>
const $counter=document.getElementById('counter');
const $increase=document.getElementById('increase');
const $decrease=document.getElementById('decrease');
let num = 0;
const render =function(){
$counter.innerHTML = num;
}
$increase.onclick = function(){
num++;
console.log('increase 버튼 클릭', num)
render();
}
$decrease.onclick = function(){
num--;
render();
}
var score=80;
score=90;
console.log(score);
let aa=70;
aa=50;
console.log(aa);
</script>