정적인 HTML에 웹 페이지를 살아있는듯 동적으로 만드는 JavaScript
기초부터 정리해보자!
자바스크립트?
HTML과 CSS만 사용하여 제작된 웹사이트를 정적인 웹사이트라고 할 때 이 웹사이트는 디자인만 되어있을뿐 웹사이트에서 이용할수 있는 기능이 아무것도 없다. 하지만 JavaScript를 추가하면 웹사이트 내부의 기능을 부여하고 자바스크립트 언어 기반으로 제작된 API를 이용하여 풍부한 기능을 가진 동적인 웹사이트를 제작할 수 있다.
API?
Application Programming Interface의 약자로, 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스.
자바스크립트 작성
기초 문법
1. 내부 자바스크립트 : <head> 내에 작성
<head>
<script>
alert('Hello World');
</script>
</head>2. 외부 자바스크립트 : <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) // Parkconst 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.
변수에 사용되는 데이터 타입(Data Type)
문자형
문자열(string) 타입은 텍스트 데이터를 나타내는 데 사용한다.
// 문자열 var string; string = '문자열'; string = "문자열"; string = `문자열`; // 백틱(많이 사용되지는 않는다.)
숫자형
var num = 100; var num = Number("100");
논리형
참(true), 거짓(false)를 나타낸다.
var foo = true; console.log(foo); // true
null & undefined
null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다.undefined는 변수만 선언하고 값이 할당되지 않은 것이다.
참조문서
- https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d
- https://aljjabaegi.tistory.com/352
- 서재 - 모던 자바스크립트 Deep Dive
RN App Developer