◉ HTML 파일과 자바스트립트 연결하기
- 연결하는 방법은 내부 스크립트와 외부 스트립트 2가지가 있음
1. 내부 스크립트 방법
▪︎ HTML 파일의 script 태그의콘텐츠 영역에 자바스크립트 코드를 작성하는 방법
<body>
<script>
document.write("내부 스크립트 방법");
<script>
<body>- document.write() : 웹 브라우저 화면에 글자를 표시해주는 자바스트립트 코드 ( 추후 자세히 배울 예정 )
▪︎ 실행 결과
2. 외부 스크립트 방법
▪︎ js 확장자로 된 별도의 파일을 생성 → 생성된 파일에 자바스크립트 코드 작성 → HTML 문서와 연결
document.write("외부 스크립트 방법");
▪︎ HTML 문서에 script.js 파일과 연결
: src 속성을 사용해 연결하려는 파일 경로 입력
<body>
<script src="/js/JSexam.js"></script>
</body>
▪︎ 실행 결과
3. script 태그 사용 위치
▪︎ 항상 body 태그의 종료 태그 바로 전에 사용함
( 내부 스크립트와 외부 스트립트 방법 모두 동일 )
→ 웹 브라우저에 화면이 표시되는 것에 영향을 미치지 않도록 하기 위해서!
▪︎ 실무에서는 주로 외부 스트립트 방법을 사용함
→ 유지 보수가 편하기 때문
◉ 프로그래밍 시작 전 알아두기
1. 주석
// 한 줄 주석은 슬래시 2개로 표시
/*
자바스크립트는 여러 줄 주석도
간단하게 처리할 수 있음
*/
2. 자바스크립트 오류 확인 방법
▪︎ 프로그래밍 언어 실행하는 방법
① 컴파일 방식
- 코드 실행하기 전에 모든 코드를 컴퓨터가 이해할 수 있는 기계어로 한 번 변환한 후, 실행하는 방식
② 인터프리터 방식
- 코드를 한 번에 한 줄씩 실행하는 방식
▪︎ 자바스크립트는 인터프리터 방식으로 실행
- 코드를 한 번에 한 줄씩 실행하다 보니 오류가 발생하면, 오류가 발생한 시점과 줄 번호를 알려줌
- 오류 발생 시점부터 실행을 멈춤
◉ 자료형
1. 문자열
▪︎ 템플릿 문자열
- ES6에서 추가된 템플릿 문자열은 백틱(`)으로 문자열 정의
- 문자열에 큰따옴표나 작은따옴표가 있어도 영향 받지 않음
- 이스케이프 문자를 사용하지 않아도 엔터를 누르면 줄 바꿈 적용됨
- ${} 문법을 이용해 문자열에 변수 또는 식을 넣을 수 있음
let dan = 3;
let gugu = 8;
let string = `${dan} 곱하기 ${gugu}은 ${dan * gugu}입니다.`;
console.log(string);3 곱하기 8은 24입니다.
2. undefined
▪︎ 변수나 상수를 컴퓨터 메모리 공간에 선언하면, 반드시 생성한 공간에 저장할 데이터를 할당해야 함
▪︎ 할당하지 않을 경우, 자바스크립트 내부적으로 변수와 상수 공간에 임시로 데이터를 할당하는데, 이때 할당되는 값이 undefined
▪︎ 다른 자료형과 달리, 사용자가 임의로 정의하고 할당하는 자료형이 아님
let empty;
console.log(empty); // undefined
3. 배열
▪︎ 모든 자료형 저장 가능
let array = [ 'abc', 10, true, undefined, null, [], {}, function(){} ];
▪︎ 비어있는 배열도 정의 가능
- 빈 배열이라고 하며, 나중에 데이터를 동적으로 추가하려고 할당함
let array = [];
4. 객체 리터럴
▪︎ 객체 정의 시, 중괄호 {}를 사용
▪︎ 중괄호 안에는 키와 값의 한쌍으로 이루어진 속성이 들어감
{
key1 : value1,
key2 : value2
}
▪︎ 배열과 달리, 값을 키로 구분하기 때문에 값의 의미를 쉽게 파악할 수 있음
// 배열
let studentScore = [ 80, 70, 90 ];
// 객체 리터럴
let studentScore - {
kor : 80,
eng : 70,
math : 90
};
// 로그 출력
console.log(studentScore.kor); // 80
console.log(studentScore['eng']); // 70▪︎ 객체 리터럴의 각 값에 접근할 때도 배열처럼 대괄호 [] 사용 또는 마침표 사용
◉ 연산자
1. 비교 연산자
▪︎ 피연산자를 비교한 뒤, 논리형 값인 true, false를 반환하는 연산 수행
▪︎ 비교 연산자 ( 헷갈리는 부분만 정리 )
| 연산자 | 예 | 설명 |
| == | x == y | x와 y의 값이 같으면, true 반환 |
| === | x === y | x와 y의 값과 자료형이 같으면, true 반환 |
| != | x != y | x와 y의 값이 다르면, true 반환 |
| !== | x !== y | x와 y의 값과 자료형이 다르면, true 반환 |
- 동등 연산자(==)와 일치 연산자(===) 비교
10 == '10' // true
10 === '10' // false
10 != '10' // false
10 !== '10' // true'프론트엔드 > Javascript' 카테고리의 다른 글
| JS - 객체 / 표준 내장 객체 (0) | 2023.08.16 |
|---|---|
| JS - 함수 정의 / 매개변수와 인수 / return문 / 스코프 (0) | 2023.08.14 |
| JS - 조건문 / 반복문 / 인위적으로 반복문 종료시키는 방법 (0) | 2023.08.13 |
| JS - 이클립스에 연결 / 조건문 / confirm 함수 (0) | 2023.07.25 |
| JS - 기본 용어 / 변수 / 연산자 (0) | 2023.07.24 |