자바스크립트를 처음 하는 날이라 가장 기초적인 타입부터 조건문, 반복문 등에 대해 배웠는데 타 언어를 미리 알고 있으시다면 크게 부담되지 않을 것 같다. 나 역시 이미 어느정도 안다는 생각때문인지 집중이 잘되지 못한 것 같다.
자바스크립트 작성 위치
1. HTML 태그의 이벤트 속성에 작성
2. <script> 태그 내에 작성
3. 자바스크립트 파일에 작성
1. HTML 태그의 이벤트 속성에 작성
모든 태그는 이벤트 속성을 작성할 수 있으며 어떤 이벤트 속성은 특정 태그에만 작성된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid #000;
font-size: 1vm;
}
</style>
</head>
<body>
<div class="box" onmouseover="this.innerText='마우스 포인터 올라감'"
onmouseout="this.innerText='마우스 포인터 나감'">
마우스를 올려보세요.
</div>
</body>
</html>// 60번 gif 자리
2. <script> 태그 내에 작성
script 태그는 웹 문서 안의 어디든 위치할 수 있다.
<script charset=“문자셋” src=“외부 스크립트 파일” type=“미디어 타입”>
자바스크립트 소스 코드
</script>그러나 이러한 경우에는 script 태그의 위치가 어디든 위치할 수 있지만 동작을 하기 위해서는 그 위치가 중요하다.
웹 브라우저가 웹 문서를 읽는 과정
HTML 파싱
DOM 트리 생성
Render 트리(DOM tree + CSSOM 트리 결합) 생성
Display 표시
만약 중간에 script 태그를 만나면 파싱을 중단하고 javascript 파일 및 코드를 로드한 후에 파싱을 완료하기하고
이후 남은 HTML 파싱을 수행한다. 따라서 script 태그를 body 태그의 가장 아랫부분에 넣어주는 것이 일반적이다.
3. 자바스크립트 파일에 작성
script 태그의 src 속성에 외부 스크립트 파일의 URL을 명시한다.
<script charset=“문자셋” src=“외부 스크립트 파일” type=“미디어 타입”>
자바스크립트 소스 코드
</script>상대경로, 절대경로 모두 작성이 가능하며 상대경로로 작성될 경우 같은 프로젝트 내에 있는 경우가 대부분이다.
일반적으로 폴더를 생성한 후 그 안에 자바스크립트 파일을 위치시킨다. 이후 src에 상대 경로로 지정한다.
절대경로의 경우 자바스크립트 외부 라이브러리를 사용하는 경우가 대부분이다.
var box = document.querySelector(".box");
box.onmouseover = function () {
box.innerText = "마우스 포인터 들어감";
};
box.onmouseout = function () {
box.innerText = "마우스 포인터 나감";
};<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
font-size: 1vm;
}
</style>
</head>
<body>
<div class="box">
마우스를 올려보세요.
</div>
<script src="./js/script.js">
</script>
</body>
</html>이런 식으로 js, html 코드를 작성한 뒤 자신이 저장한 위치에 맞게 src에 url을 명시한다.
앞에서 말했듯이
자바스크립트 코드 또는 외부 링크의 최적 위치는 body 태그 내 최하단이다.
HTML을 읽는 과정에서 스크립트를 만나면 중단 시점이 생기고, 그 만큼 화면에 표시되는 것이 지연된다.
DOM 트리가 생성되기 전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있다.
자바스크립트의 기초문법은 자세히 적지않고 몰랐던 부분이나 중요한 부분만 작성할 것이어서 없는 부분이 있을 수 있습니다.
JAVASCRIPT 기초 문법
자바스크립트 문장
문장(또는 문, statement)
자바스크립트 프로그램의 기본 단위로 문이라고도 한다.
한 줄에 한 문장만 있을경우 세미콜론(;)을 생략할 수 있다.
주석문의 경우 코드를 설명하거나 코드의 실행을 막고자 할 때 사용된다.
한줄 주석 : // 으로 작성
여러줄 주석 : /* ..*/ 으로 작성
표현식(Expression)
하나의 값으로 평가되는 것으로 리터럴, 변수, 객체의 프로퍼티, 배열의 요소, 함수 호출, 메서드 호출 등이 모두 하나의 값으로 계산된다.
이러한 표현식도 문장의 구성요소 중 하나이다.
자바스크립트 코드 블록(javascript code blocks)
중괄호를 이용하여 코드를 그룹화 할 수 있다.
코드 그룹화는 함께 실행될 명령문을 정의한다.
제어문, 함수 등에서 사용되며 단독으로 사용할 수 있다.
자바스크립트 입출력
사용자에게 입력받아야 하거나 실행 결과를 표시해야 할 경우에 사용한다.
웹 브라우저에서 제공하는 여러 입출력 함수를 사용한다.
종류: 알림창, 확인창, 프롬프트창, 웹 브라우저 화면 출력, 웹 브라우저 콘솔 출력
역할은 정해져 있지만 변수, 수식결과, 문자열, 객체 정보 등은 모두 출력이 가능하다.
알림창
가장 많이 사용하는 간단한 대화 상자로 간단한 실행 결과, 사용자에게 특정 메세지를 보여주기 위한 용도로 사용한다.
alert(메시지)
편집중! 진도 나가면서 정리하려니 당일 정리가 쉽지않다..
'이것 저것 공부 > 프론트엔드 백엔드 몰입교육' 카테고리의 다른 글
| 15일차 (0) | 2021.08.13 |
|---|---|
| 14일차 (0) | 2021.08.12 |
| mongo db, server와 client, docker로 서비스 돌리기 13일차 (0) | 2021.08.11 |
| 입출력/파일입출력/parse argument/repl/docker/포트 포워딩 12일차 (0) | 2021.08.11 |
| 트랜지션과 애니메이션(7일차) (0) | 2021.08.04 |
