1. 어떻게 코드를 작성하고 브라우저에 실행시킬까?
* 실습 initial 코드
자바스크립트 코드는 html document 와 함께 돌아가니 아래 index.html 코드를 준비한다.
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JavaScript Fundamentals – Part 1</title>
<style>
body {
height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(to top left, #28b487, #7dd56f);
}
h1 {
font-family: sans-serif;
font-size: 50px;
line-height: 1.3;
width: 100%;
padding: 30px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<h1>JavaScript Fundamentals – Part 1</h1>
</body>
</html>
① style태그 아래 script 태그를 작성하고 그 내부에 소스코드를 작성한다.
② 간단한 실습을 위해
변수를 하나 선언하고 'amazing'이라는 값으로 초기화한다.
* 세미콜론은 문장의 종료를 나타내지만 필수는 아니다.
<script>
let js = 'amazing';
if (js === 'amazing') alert("Javascript!!!!");
</script>③ 저장 후 파일 탐색기에서 index.html 파일을 직접 chrome으로 열어보면 소스코드가 정상 실행된다.
④ 팝업을 닫으면 body에서 설정한 기본화면이 보임.
⑤ 스크립트 영역에 아래와 같이 단순 연산을 입력하면 ?
40 + 8 + 23 - 10;
-> 어떻게 화면에 나타낼지 정하지 않았기 때문에 브라우저상 변화가 없다.
-> 콘솔에서 보고싶다면 console.log(40 + 8 + 23 - 10);
* 앞의 실습(구글 크롬 > 개발자도구 > 크롬)에서는 console.log나 <script> 태그가 필요없었다.
=> 스크립트 태그를 통해 다리를 연결하고 브라우저에 있는 콘솔을 개발하는 것
⑥ html과 js 분리하기
script.js 파일을 새로 생성하고 지금까지 작성한 코드를 옮긴다.
index.html 에서는 script 태그까지 지우고 이제 script.js 와 연결해야함
보통 body 태그의 마지막라인에 연결설정을 한다.
지금 실습에서는 동일한 폴더에 있기 때문에 아래 처럼 추가하면 된다.
<body>
<h1>JavaScript Fundamentals – Part 1</h1>
<script src="script.js"></script>
</body>⑦ Values
문자열을 나타낼 때 " 또는 ' 모두 사용가능하다
console.log("Jonas");
console.log('Jonas');
let firstName = "Jonas";
console.log(firstName);값은 자바스크립트에서 가장 작은 정보의 단위이고, 변수에 저장하여 사용할 수 있다.
⑧ 명명규칙
* camemlCase : 변수명이 여러단어로 이루어져있을 때, 단어를 구분하는 첫글자는 대문자로 표기한다.
ex) firstName
* 변수는 숫자로 시작할 수 없다. -> Syntax error발생
* 예약어를 사용하면 안된다. ex) let, new ,,
* 변수명은 대문자로 시작하면 안된다. -> 객체 지향 프로그래밍에서 사용하고 있으니 변수에는 X
* 변하지 않는 값(constant)은 대문자로 작성
ex) let PI = 3.1415;
⑨ 에러를 보기위해 console.log 를 사용하지 않아도 에러를 확인할 수 있다.
728x90
반응형
'개발자 :-) > Javascript' 카테고리의 다른 글
| Amchart5 - radar chart / gauge chart (0) | 2022.10.12 |
|---|---|
| Amchart5 - 파이차트 그리기 (1) | 2022.10.11 |
| [Javascript] let, const, var 사용하기 (fundamental - part.1) (0) | 2022.10.05 |
| [Javascript] 데이터 타입 (fundamental - part.1) (0) | 2022.10.05 |
| [Javascript] 자바스크립트 기초 - part.1 html css 와 관계 (0) | 2022.10.04 |
댓글