https://nomadcoders.co/javascript-for-beginners
바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders
Javascript for Beginners
nomadcoders.co
노마드 코더 <바닐라 JS로 크롬 앱 만들기>로 학습한 내용을 정리하였다.
자바스크립트를 배우는 건 오늘이 처음이다. 열심히 해보쟈.
1.
자바스크립트를 다루는 방법 중 하나는 브라우저의 console을 이용하는 것.
자바스크립트는 브라우저에 이미 설치되어있음.
오른쪽 마우스 > 검사 눌러서
이렇게 콘솔을 눌러주면 된다.
맥 기준 fn + F12 를 눌러도 바로 콘솔창으로 갈 수 있다.
2.
console에
alert("HI")를 쳤더니
이렇게 뭐가 떴다
자바스크립트를 이용해서 내가 브라우저에 영향을 미친 것이다.
3.
console은 긴 코드를 작성하기에는 적절하지 않다.
한 줄씩만 작성할 수 있기 때문이다.
따라서 자바스크립트 파일을 만들어보자.
momentum이라는 폴더를 만들어보자.
터미널로 그 폴더의 경로로 들어가서
code .을 해주면 비주얼스튜디오코드가 열린다.
그리고 momentum이라는 폴더 안에 app.js, index.html,style.css 이라는 파일을 만들어주었다.
4.
브라우저는 HTML을 열고, HTML은 CSS와 JavaScript를 가져오는 것.
CSS와 JavaScript 파일을 그냥 브라우저에서 열려고 하면 이상하게 열린다.(실행되지 않고 코드만 달랑~)
단순히 CSS, JavaScript 파일만 열려고 하면 아무 일도 일어나지 않는다는 뜻.
이 CSS와 JavaScript 파일을 브라우저와 이어주는 접착제 같은 역할을 HTML이 함.
html 파일을 열고
! 와 tab 키
를 눌러 기본값이 나오게 하자.
style.css 파일을 아래와 같이 설정하고
body {background-color: beige;}
index.html 파일을 다음과 같이 설정하면
<!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>Momentum</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
아래의
<link rel="stylesheet" href="style.css">코드 때문에 index.html 파일과 style.css 가 연결되고
index.html 파일을 실행하면
CSS 파일에 적은 background-color가 잘 적용이 된 것을 볼 수 있다.
5.
일반적으로 자바스크립트 파일은 <head>에서 가져오지 않는다.
html 파일의 에서 javasrcipt와 연결시켜주는 코드를 입력해보자.
<!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>Momentum</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
</body>
</html>
아래의
<script src="app.js"></script>코드가 html 파일과 app.js 파일을 연결해준다.
html 파일을 실행하면
background-color in CSS와 alert message in JS가 잘 적용된 것을 볼 수 있다.
6.
브라우저에서 검사를 눌러서 나오는
이 개발자툴에서
elements에서는 html과 css (하단의 styles)를 보여주고
console에서는 javascript를 볼 수 있음.
해당 html과 연결되는 javascript 코드에 에러가 있다면
console에서 이렇게 에러를 띄운다.
따라서 console을 항상 열어두는 것을 습관화하자.
'Front-End > JavaScript' 카테고리의 다른 글
| [JavaScript] Todo-List 만들기(1) (0) | 2023.03.30 |
|---|---|
| [JavaScript] 230327 학습일기 (0) | 2023.03.29 |
| [JavaScript] 230326 학습일기 (0) | 2023.03.27 |
| [JavaScript] 230324 학습일기 (1) | 2023.03.25 |
| [JavaScript] 230323 학습일기 (0) | 2023.03.24 |
