정적인 HTML에 웹 페이지를 살아있는듯 동적으로 만드는 JavaScript
기초부터 정리해보자!
HTML과 CSS만 사용하여 제작된 웹사이트를 정적인 웹사이트라고 할 때 이 웹사이트는 디자인만 되어있을뿐 웹사이트에서 이용할수 있는 기능이 아무것도 없다. 하지만 JavaScript를 추가하면 웹사이트 내부의 기능을 부여하고 자바스크립트 언어 기반으로 제작된 API를 이용하여 풍부한 기능을 가진 동적인 웹사이트를 제작할 수 있다.
API?
Application Programming Interface
의 약자로, 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스.
<head>
내에 작성<head>
<script>
alert('Hello World');
</script>
</head>
<head>
내에 script src
속성을 이용해 작성<head>
<script src="outerjs.js"></script>
</head>
<head>
<script>
// 주석처리
/*
여러줄 주석처리
*/
alert('Hello World');
</script>
</head>
변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 공간을 식별하기 위해 붙인 이름이다.
변수는 하나의 값을 저장하기 위한 메커니즘이다. 여러 개의 값을 저장하려면 여러 개의 변수를 사용해야 한다.
var userId = 1; var userName = 'Kim'; // 변수는 하나의 값을 저장하기 위한 수단이다.
변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var
, let
, const
를 사용한다. 변수를 선언할 때는 한글을 사용할 수 없고, 영문과 숫자, 일부 특수 문자 ( _ ,$)만 사용 가능하다.
var score;
var? let? const?
var
: 변수의 재할당이 가능하다var name = "Kim"; console.log(name) // Kim var name = "Lee"; console.log(name) // Lee
let
,const
: 변수에 재선언이 불가하다.(let
은 재할당은 가능하지만const
는 그조차도 불가)let name = "Kim"; console.log(name) // Kim let name = "Lee"; console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared name = "Park"; console.log(name) // Park
const name = "Kim"; console.log(name) // Kim const name = "Lee"; console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared name = "Park"; console.log(name) // Uncaught TypeError: Assignment to constant variable.
// 문자열 var string; string = '문자열'; string = "문자열"; string = `문자열`; // 백틱(많이 사용되지는 않는다.)
var num = 100; var num = Number("100");
var foo = true; console.log(foo); // true
null
은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다. undefined
는 변수만 선언하고 값이 할당되지 않은 것이다.