html로 골격을 잡으면 css는 잡혀진 골격을 예쁘게 꾸며주는 역할을합니다. 이 둘까지는 이미지처럼 보여주기 역할을 한다면 javascript는 웹페이지의 동작을 책임져요!
javascript는 지금까지 많은 업데이트를 해왔는데 업데이트를 했다고 해서 그 전버전이 삭제되거나 새로운 버전이 나온다고 해도 기능들을 막 추가할 수는 없습니다.
이유는 왜그럴까요?
이미 그 전버전으로 배포된 웹사이트들이 많기때문에 전 버전을 삭제해버리면 많은 오류를 낼 수 있기 때문이에요 그래서 javascript에는 처음 설계자가 실수한 오류조차도 javascript에 아직 그대로 남아있습니다.
자바스크립트의 버전
- ES1 (초판, 1997)
- ES2 (1998)
- ES3 (1999)
- ES5 (2009, 엄격모드, 배열메서드 (map, filter,forEach 등), JSON 등)
- ES6 (2015, ECMAScript 2015, const, let, promise, Arrow function, class 등의 문법들이 대거 추가)
- ES7 (2016, ECMAScript 2016, 이하생략)
자바스크립트삽입 위치
<head>,<body>의 문서 처음,중간, 끝 그러나 보통 <body>의 맨 끝에 넣는것이 관례적이다 (절대적인건 아님)
이유는 아래 예시 코드를 보며 얘기해 보자면 document가 완성되지 않은 상태에서 'one'이라는 id를 선택하려 했기 때문에 해당 스크립트가 적용되지 않는다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Document</title>
<script>
document.getElementById('one').innerHTML = 'hi'
</script>
</head>
<body>
<h1 onclick="alert('경고!')">hellow world</h1>
<p id="one">hello</p>
<!-- document에서 'hello' 가 'hi' 로 바뀌어야 하지만 바뀌지 않음 -->
</body>
</html>*script의 위치는 프로젝트에 따라 <head>에 넣거나 <body>의 중간 아님 시작에 넣기도 한다.
내부 스크립트와 외부 스크립트
script 는 css 와 마찬가지로 내부스크립트와 외부스크립트(링크)로 나눠서 넣을수 있다. 단, 추후에 유지보수를 할 경우를생각해서 css와 script는 html과 분리해주는 것이 좋다.
<!-- 외부 스크립트 연결 -->
<script src="../js/test.js"></scropt>
<!-- 내부 스크립트 -->
<script>
console.log('hellow')
</script>Javascript 출력 방법
- 문서 내에 요소를 선택하여 출력하는 방법 (innerHTML, innerText 등)
<h1 id="one"> Hellow world </h1>
<script>
document.getElementById('one').innerHTML = 'hi world'
</script>
<!-- doucument 에서 'hellow world' 가 'hi world' 로 변경됨 -->- 문서 내에 직접 출력하는 방법
document.write('js hello!')
<!-- document 에 'js helloo!' 가 나옴 -->- 사용자 인터렉션 (alert, confirm 등) 해당 포스트 참고 2023.02.08 - [dev/javascript] - 대화상자
- 콘솔에 찍는 방법 (console.log, console.table, console.error 등)
코드구조
- 한문장(statement)을 완성하고 싶을땐 ;(세미클론) 또는 다음 줄에 문장을 쓰면되지만 일반적으로 세미클론을 붙이는편
- 문장은 값, 연산자, 키워드 , 명령어, 표현식 (값으로 평가, 함수나 key, index를 통한 값으 호출도 표현식) 등으로 구성
- 공백음 병합할 수 있음
let a = 10,
b = 20
let a = 10, b = 20
let a=10,b=20
<!-- 띄어쓰기 방식은 모두 달라도 공뱅이 병합되기 때문에 모두 같음 -->
let a = 1 0
<!-- 그러나 위 방식처럼 10인지 1과 0인지 일반적이지 않는 공백은 병합하지 않음 -->- 주석은 코류를 보류하거나 코드에 대한 설명을 적을떄 사용
// <!-- 한 줄 주석 -->
/* */ <!-- 여러 문장 주석 -->- 엄격모드
- ES5에서 최신의 문법들이 많이 추가가 되었는데 기존에 문법을 변경하는 문법도 나옴
- 이러한 문법들은 기존 코드의 문제를 불러일으킬 수 있기 때문에 use strit 라는 지시자를 통해 엄격 모드를 활성화 했을때에만 반영
- class 문법의 경우 엄격 모드가 기본 ("use strict"를 쓰지 않더라도 자동으로 엄격모드로 작동)
- 보통 코드의 최상단에 적용
- 함수별로 엄격보드를 다르게 적용할 수 있으나 혼란을 야기할 수 있음
"use strict"
<!-- 엄격모드 활성화 -->'dev > JavaScript' 카테고리의 다른 글
| 조건문 if,else, else if, switch (0) | 2023.02.09 |
|---|---|
| 연산자 (0) | 2023.02.09 |
| 대화상자 (0) | 2023.02.08 |
| 자료형 과 형변환 (0) | 2023.02.08 |
| javascript 변수 (0) | 2023.02.07 |
댓글