JavaScript
웹 브라우저에서 많이 사용하는 인터프리트 방식의 객체지향 프로그래밍 언어
ECMA(European Computer Manufacturers Association) 스크립트 표준을 따르는 대표적인 웹 기술이다. (EC5 버전으로 배울 것)
자바스크립트 작성 방식
inline 방식
- html 태그의 on이벤트 속성을 이용하여 내장 메소드를 호출하거나 개발자가 선언한 사용자 정의 함수를 호출할 때 사요한다.
- 자바스크립트 양이 한 두 줄 정도로 소량일 때 사용한다.
- 태그에 이벤트 핸들러 속성을 이용하여 직접 실행 코드를 작성한다.
<태그명 on이벤트 = "함수명();">
internal 방식
- 가장 일반적인 방식
- html 파일 내 <head>나 <body> 안에 자바스크립트 소스 작성한다.
- 자바스크립트 코드 작성, 함수 단위로 소스코드를 작성하고 html 태그에서 이벤트 핸들러를 통해 함수를 실행시키는 방식이다.
<script>실행할 소스코드 작성</script>
external 방식
- 자바스크립트 양이 많을 경우 사용한다.
- 외부에 별도의 자바스크립트 소스파일(*.js)을 작성하고 html에서 <script src="경로.js"> 태그를 이용하여 해당 파일을 불러와 사용하는 방식이다.
- 여러 개 html 파일에서 공통적으로 사용하는 기능일 경우 사용한다.
| *** <script> 태그를 주로 <body>에서 사용하는 이유 1. 브라우저가 위에서부터 아래로 하나씩 읽으면서 화면에 그려준다. 바디 중간에 스크립트를 만나게 되면 스크립트를 먼저 그려주고 (변수 선언, 대입 되는 값 등) 실행시켜준다. 스크립트 내용이 복잡해지거나 하면 화면이 끊기는 것처럼 보이는 현상이 생긴다. 2. 어떤 요소에 접근해야 하는 경우가 있는데, 헤더 부분에서 스크립트가 있으면 그려지고 나서 요소에 접근해야 하는데 요소가 만들어지지 않았는데 코드에 접근하면 에러가 발생할 수 있기 때문에 |
자바스크립트 실행 방식
인터프리터 방식이다.
웹 브라우저에 내장되어 있는 자바스크립트 파서가 소스코드를 한 줄씩 읽고 해석한다. (cf. 전체를 해석해 놓은 컴파일 언어와 차이점)
자바스크립트 실행은 작성된 html문서를 브라우저에서 읽으면 바로 실행할 수 있다.
데이터 출력
데이터 입력
메소드(HTML 요소 접근 방법)
document.getElementById()
HTML 태그의 id 속성 값은 페이지에서 유일한 식별자 역할을 한다.
리턴 값 : 단일 값(why? id는 중복을 허용하지 않기 때문에)
let 변수 = document.getElementById("아이디명");** 변수는 객체를 의미하는 레퍼런스 변수
document.getElementsByName()
HTML 태그의 name 속성 값으로 객체 정보를 가져올 때 사용한다.
리턴 값 : 배열(why? name은 중복을 허용하므로)
let 변수 = document.getElementsByName("이름");
document.getElementsByTagName()
HTML 태그의 태그 명을 이용하여 태그들을 한꺼번에 가져와서 순서대로 반환한다.
리턴 값 : 배열(why? 태그는 중복을 허용하므로)
let 변수 = document.getElementsByTagName("태그 명");** 변수는 배열이 된다. (하나밖에 없어도 일단 배열로 리턴하고 값은 1개만 담겨있는다.)
기본 문법
변수
변수 선언
- 종류 : 멤버 변수, 지역 변수
- 변수에 대한 자료형은 있으나 선언하지 않는다.
| < var 추가 설명> - 값에 따라서 변수 타입이 결정된다. - 함수 안에서 선언하면 함수 안에서 사용 가능한 지역 변수, 함수 바깥에 (스크립트) 작성하면 전역 변수가 된다. <ES6 버전부터 추가된 기능> let : 지역 변수, 중복 선언 불가능 const : 상수, 중복 선언 불가능 ▶️ var는 가급적 쓰지 않는 것이 좋다. - 선언하기도 전에 console.log(변수명) ⇒ undefined 라고 나오는데 이런 것을 var hoisting (바 호이스팅) 이라고 한다. var는 no block scope 이다. 아무 곳에서나 보일 수 있어서 위험하다. - ⭐ var hoisting (move declaration from bottom to top) : 선언 되어 있는 위치에 상관없이 항상 제일 위로 선언을 끌어 올려주는 것이다. ▶️ const - favor immutable data type always for a few reasons : 1. 보안성 2. 스레드 안정성 3. 개발자 실수 감소 |
명명 규칙
| - 영어 대/소문자 구분O, 숫자, _, $ 사용 가능하다. - 첫 글자는 숫자 사용이 불가능하다. - 예약어는 사용이 불가능하다. - 한글 사용이 가능하지만, 일반적으로 사용하지 않는다. - 생성자 함수는 항상 대문자로 시작한다. - 변수, 인스턴스, 함수, 메소드는 항상 소문자로 시작한다. - 이름에 의미 있는 단어의 조합을 권장한다. - 두 단어 결합 시 낙타봉 표기법을 권장한다. |
✔️ typeof()
값의 자료형을 확인하는 연산자이다.
리턴 값은 값의 자료형이다.
선언 시 자료형을 지정하지 않아 변수 명을 보고 데이터 확인이 불가능하다.
자료형을 확인할 때 자주 사용한다.
| - typeof("문자열값") or typeof('문자열값') → String - typeof(숫자) → number - typeof(참/거짓) → Boolean - typeof(객체) → object - typeof(초기값이 없는 변수) → undefined - typeof(function) → function |
| [두 개는 달라요!] 함수 = 스크립트 영역 안에서 선언한 것, 함수처럼 객체에 대한 것만이 아니라 범용적으로 작업 되는 코드 그룹 메소드 = 객체 내부에 포함되어 있는 것, 객체 데이터를 조작하는 것 |
✔️ 문자열(String)
""(큰따옴표), ''(작은따옴표)로 묶여있는 리터럴,
내장 객체로 String 객체로서 관리된다.
기본적인 메소드가 존재한다.
✔️ 숫자(number)
정수형 숫자와 부동소수점 숫자로 구분한다.
정수로 표현되어도 사실은 실수 형태이다. ( 연산해도 실수 형태로 나온다. )
내장 객체로 Math 객체 제공이 된다.
기본 메소드가 존재한다.
✔️ 기타 자료형
- 논리 값 (Boolean) : true, false 두 가지 값을 가진다.
- true : any other value
- false : 0, null, undefined, NaN, ' '
- 객체 (Object) : new로 선언된 사용자 객체와 자바스크립트 내장 객체이다.
- undefined : 변수 명이나 함수 명으로 선언되지 않은 식별자일 때 지정한다.
- 함수(function) : 함수(메소드)를 가지는 자료형이다.
| 자바 스크립트 엔진에 따라서 기타 자료형들은 차지하는 메모리 공간이 다르다. ( cf. Java에서는 자료형들 마다 차지하는 메모리 공간이 정해져 있다. ) |
데이터 형변환
✔️ 숫자 → 문자열
숫자와 문자를 + 연산하면 문자가 우선되어 숫자를 문자로 변환한다.
강제 형변환 : String()함수 이용
✔️ 문자열 → 숫자
숫자, 문자 + 이외의 사칙 연산할 경우, 숫자가 우선되어 문자를 숫자로 변환한다.
강제 형변환 : Number(), parseInt(), parseFloat() 함수 이용
** parseInt()함수는 인자가 2개로 → 문자열, radix(해당진수)를 선택할 수 있다.
| Number(null) // 0 Number(undefined) // NaN Number(0) // false Number('0') // true Number('') // 빈 문자열, False Number(' ') // 공백이 있는 문자열, true |
연산자
| <비교 연산자> == : 동등 연산자(loose equality) === : 일치 연산자(strict equality), 값 비교 + 타입 비교 ex) console.log(0 == false); // true console.log(0 === false); // false console.log(' ' == false); // true console.log(' ' === false) / / false console.log(null == undefined); // true console.log(null === undefined); // false |
제어문
▪️ 조건문
- if
- else
- else if
▪️ 반복문
- for
- while
- do ~ while
- for in
- break, continue
▪️ 분기문
- switch : 케이스가 다양할 경우 간결하게 작성할 수 있다.
'Programming > JavaScript' 카테고리의 다른 글
| DAY 93. JavaScript - DOM (0) | 2021.11.19 |
|---|---|
| DAY 88. JavaScript - 객체, 내장 객체 (0) | 2021.11.14 |
| DAY 87. JavaScript - 함수 (0) | 2021.11.13 |
| DAY 86. JavaScript - 배열 (0) | 2021.11.12 |
