- 해당 내용들은 https://ko.javascript.info/ 와 GDSC KNU 2기 자바스크립트 스터디를 통해 공부한 내용들입니다
1. Hello World!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>스크립트 전</p>
<script>
alert('Hello, World!');
</script>
<p>스크립트 후</p>
</body>
</html>
<script> 에는 자바스크립트 코드가 들어가고 브라우저는 해당 태그를 만나면 자동으로 처리하여줌
*script 태그 안에는 속성이 있음 → <script type =”text/javascirpt>”나 <script language=…>가 있는 경우에 앞은 어떤 내용인지 뒤에는 현재 사용하고 있는 스크립트를 나타냄
외부스크립트
<script src="/path/to/script.js"></script>
주의해야 할 점
- HTML 안에 직접 스크립트를 작성하는 경우은 스크립트가 아주 간단한 경우에만 사용
- 스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장해서 성능상의 이점 있음
- script태그는 src 속성과 내부 코드를 동시에 갖지 못함
<script src="file.js">
</script>
→ src를 통해서 파일을 불러 오는 거 임으로 당연히 안될 수 밖에 없음
과제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("자바스크립트!")
</script>
</body>
</html>
2. 코드 구조
문(statement) → 문법구조(syntax structure) + 명령어(command)
- 서로 다른 문(문장?)은 세미콜론으로 구분하여 줍니다.
alert('Hello'); alert('World');
//일반적으로는 각 문의 가독성을 위해 서로 다른 줄에 작성하는 것이 일반적임
alert('Hello');
alert('World');
세미콜론
자바스크립트 세미콜론(;) 쓸까말까?
스터디 발표 후 반복문 do/while에 세미콜론을 써야한다고 되어있는 이유에 대한 질문이 있었고 이유를 알아보기 위해 자료를 조사해보았다. 그러면서 ASI와, 세미콜론삽입에 대한 다양한 의견이
velog.io
[공부하면서 참고 했던 한 블로그의 글]
줄 바꿈이 있으면 자바스크립트에서 세미콜론을 붙인 것으로 대부분 받아드리지만
대부분의 경우가 항상을 의미하지 않기 때문에 유의 하여야만 함.
- 줄바꿈이 세미콜론을 의미하지 않는 경우
alert(3+
1
+ 2);
- 에러 예제에 대한 생각
[1,2].forEach(alert)
//1과 2가 한번씩 alert 되어짐
alert("에러가 발생합니다.")
[1,2].forEach(alert)
//"에러가 발생합니다" 문구만 나오고 끝남
alert("제대로 동작합니다.");
[1,2].forEach(alert)
//"제대로 동작합니다" 문구와 밑의 문이 제대로 동작하게 됨
→ 세미콜론이 끝마침 역할을 해주고 다음에 또 문이 이어질 수 있는 것을 알려주는 역할을 함. 줄 바꿈으로 나눴더라도 문 사이엔 세미콜론을 적는게 규칙으로도 정해져 있고, 습관적으로 꼭 적어주는 것이 제일 좋을 거 같음
주석
기본적으로 // 두개의 슬래시를 통해서 시작되어짐
//~~~~
//한줄짜리 주석을 적을 때는 이렇게 적어주면 됨
/*
여러줄의 주석을 적어줘야 할 때는 이렇게 적어주면 됨
*/
- 유의해야 할 점은 중첩으로 주석을 쓰는 것은 사용이 불가하다는 점.
- 어떤 클래스의 특정 함수에 대한 주석을 통한 문서화도 할 수 있음
/**
* 메뉴 항목을 추가한다.
* @param {string} id 항목에 대한 고유 식별자
* @param {string} url 항목 아이콘
* @param {string} title 항목 타이틀
* @param {function} callback 실행에 대한 호출 함수
* @returns {boolean} 성공 여부
*/
addMenu(id, url, title, callback) {
...
모든 공부한 내용의 기반은 "모던 JavaScript 튜토리얼" 사이트를 참고해 진행한 스터디 내용과 개인공부 내용을 정리해서 올립니다. 자바스크립트 공부하실 때 참고하시면 좋을 거 같습니다~!
모던 JavaScript 튜토리얼
ko.javascript.info
'DEV' 카테고리의 다른 글
| [GDSC] konkuk kprint; (건국대 컨퍼런스를 다녀오며) [1편] (0) | 2024.05.17 |
|---|---|
| 자바스크립트 처음부터 다시보기 EP.1 (0) | 2022.10.12 |
| javaScript 복습 1 (0) | 2022.02.24 |
