Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- PM부트캠프
- UI
- tag
- 스프링
- 회고
- db
- 서비스기획
- 쇼핑몰
- 서비스분석
- 생활코딩
- UX
- 스프링부트
- 데이터
- 서비스 기획자
- 회고록
- 코딩
- 자바스크립트
- 데이터분석
- jquery
- 프로덕트 매니저
- SpringBoot
- 서비스 기획
- kpt회고
- PM
- 코드스테이츠
- html
- CSS
- 프로젝트 매니저
- javascript
- PO
Archives
- Today
- Total
콘텐츠기획자의 IT입문서
다시 기초부터 복습하는 자바스크립트 본문
jQuery 쓰는 것도 카페24 쓰니까 click 이벤트로 css 바꿔주는 정도만 쓰다보니
자바스크립트 배웠던 게 기억 속에서 희미해져서.... ^_ㅠ
복습 차원에서 다시 차근차근 공부해본다!
스크립트
- HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용해야 한다.
- 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장해야 한다.
그 이유는 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에
성능상의 이점이 있다고 한다!
예를 들어, 여러 페이지에서 동일한 스크립트를 사용하는 경우
브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용하기 때문에
트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다.
문 (Statement)
- 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 뜻한다.
- 서로 다른 문은 세미콜론으로 구분한다.
단, 대부분 줄 바꿈 = 세미콜론이기 때문에 줄 바꿈이 있다면 세미콜론 생략 가능하다.
<script>
//정상작동
alert('Hello')
alert('World')
//불완전 표현식으로 한줄로 인식하여 작동
alert(3 +
1
+ 2);
//작동오류 - [...] 앞에는 세미콜론이 있다고 생각하지 않음
alert("에러가 발생합니다.")
[1, 2].forEach(alert)
</script>
모던 마크업
HTML4에선 스크립트에 타입을 명시하는 것이 필수였다.
(그래서 카페 24 안에 이런 태그들이..)
<script type="text/javascript"></script>
하지만 이젠 타입 명시가 필수가 아니다!(게다가 모던 HTML 표준에선 위의 속성의 이미가 바뀌었다고 함)
엄격모드
자바스크립트는 꽤 오랫동안 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되며 호환성 이슈 없이 발전해왔다.
- 장점 : 기존 작성한 코드는 절대 망가지지 않는다.
- 단점 : 실수나 불완전한 결정이 언어 안에 영원히 박제된다.
변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되어있지만
"use strict" 라는 특별한 지시자를 사용해 엄격 모드를 활성화 했을 때 변경사항이 활성화 될 수 있다.
스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작하는 것!
("no use strict"같은 지시자는 존재하지 않으므로 일단 엄격 모드가 적용되면 돌이킬 방법은 없다고...)
<script>
"use strict";
// 이 코드는 모던한 방식으로 실행됩니다.
...
</script>
근데 어차피 클래스(class)와 모듈(@import)을 사용하면 use strict가 자동으로 적용되기 때문에
엄청 옛날에 작성된 코드를 유지보수하는 것이 아니면 별도로 "use strict"를 작성해주지 않아도 될듯 하다.
출처 : https://ko.javascript.info/
'JavaScript' 카테고리의 다른 글
자바스크립트 자료형 10 (0) | 2022.06.24 |
---|---|
변수와 상수 (0) | 2022.06.24 |
jQuery - 타임세일 구현하기 (0) | 2022.06.17 |
jQuery - 현재 주소에 따라 카테고리 스타일 바꾸기 (0) | 2022.06.16 |
input type="file" 스타일 변경하기 (0) | 2022.03.05 |
Comments