개발자꿈나무
자바스크립트 - 스크립트 삽입, 코드 구조, 엄격모드, 변수 상수, 자료형 본문
Hello, world! - 웹 페이지에 스크립트 삽입 방법
1. 'script' 태그 : <script>태그를 지용하면 자카스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입가능
<!DOCTYPE HTML>
<html>
<body>
<p></p>
<script>
alert( 'Hello, world!' );
</script>
<p></P>
</body>
</html>2. 외부 스크립트
- 코드 양이 많은 경우에는 파일로 소분하여 저장
- 분해해 놓은 각 파일은 src 속성을 사용해 html에 삽입
<script src="/.../script.js"></script> // 절대경로
<script src="script.js"></script> // 상대경로
<script src="https://..."></script> // url도 가능! <script> 태그는 src속성과 내부 코드를 동시에 가지지 못하므로, src속성이 있으면 태그 내부 코드는 무시
! 스크립트를 두 개로 분리하면 정상적으로 실행
<script src="file.js">
alert(1); // src 속성이 사용되었으므로 이 코드는 무시
</script>
<script src="file.js">
<script>
alert(1); // 정상적으로 실행
</script>코드 구조
1. 문
- 어떤 작업을 수행하는 문법 구조와 명령어
- 서로 다른 문은 세미콜론으로 구분
- 한 줄에 입력도 가능하지만 서로 다른 줄에 작성한는 것이 일반적
alert('Hello'); alert('World');
alert('Hello');
alert('World');2. 세미콜론
- 줄 바꿈이 있다면 세미콜론 생략 가능(줄 바꿈이 있으면 암시적으로 세미콜론으로 해석)
- 대부분의 경우는 세미콜론을 의미하지만 [ ] 대괄호 앞 같은 경우는 인식을 못하기 때문에 ;를 써주는게 좋음
3. 주석
- 한 줄짜리 주석은 두 개의 슬래시 //로 시작
- 여러 줄의 주석은 슬래시와 별표로 시작과 끝맺음 /* */
- 단축키 : Cmd + /
! 중첩 주석은 지원하지 않음
엄격 모드 - 기존 기능와 새로운 기능의 호환성을 활성화 하기 위함
1. use strict
- 지시자 "use strict" or 'use strict'를 스크립트 최상단에 놓으면 전체가 모던한 방식으로 동작
- 지시자를 스크립트 최상단이 아니라 함수 본문 맨 앞에 오게되면 함수만 엄격 모드로 실행
! 스크립트 최상단에 위치시키지 않으면 엄격 모드가 활성화되지 않을 수도 있음. "use strict" 위에는 주석만 사용가능
! use strict를 취소할 방법은 없음. 모드가 적용되면 돌아갈 수 없음.
alert("some code");
// 하단에 위치한 "use strict"는 스크립트 상단에 위치하지 않으므로 무시됨
"use strict";
// 엄격 모드가 활성화 되지 않습니다.
2. 브라우저 콘솔
- 기본적으로 use strict가 적용되어 있지 않음
- 'use strict'를 입력한 후, Shift + Enter키를 눌러 줄 바꿈 후 원하는 스크립트 입력
'use strict'; <Shift + Enter를 눌러 줄바꿈함>
// 코드 입력
<Enter를 눌러 실행>변수와 상수
1. 변수
- 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'
- let 키워드를 사용해 변수를 생성
- 할당 연산자 =를 사용해 변수 안에 데이터 저장
- 변수 선언과 값 할당을 한 줄에 작성할 수도 있고, 한 줄에 여러 변수를 선언하는 것도 가능하지만 가독성을 위하여 한 줄에는 하나의 변수를 입력하는 것이 좋음
let message; // 변수 생성
message = 'Hello'; // 문자열을 저장
alert(message); // 변수에 저장된 값을 보여줌
let message = 'Hello!'; // 변수 정의 값 할당 한 줄에 가능
alert(message); // Hello!
let user = 'John', age = 28, message = 'Hello'; // 이것보다는
let user = 'John';
age = 28;
message = 'Hello'; // 이걸 더 권장- 변수는 값이 얼마든지 바뀔 수 있음, 값이 변경되면 이전 데이터는 변수에서 제거
- 변수 두 개를 선언하고, 한 변수의 데이터를 다른 변수에 복사할 수 있음
let message;
message = 'Hello!';
message = 'World!'; // 값 변경
alert(message); // World!
let Hello = 'Hello world!';
let message;
message = Hello; // Hello의 'Hello World' 값을 message에 복사
alert(Hello); // Hello world!
alert(message); // Hello world!2. 변수 명명 규칙
- 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있음
- 첫 글자는 숫자가 될 수 없음
- 여러 단어를 조합하여 변수명을 만들 때는 카멜 표기법을 사용하는데 첫 단어를 제외하고는 대문자로 작성 ex) myVeryLongNAme
! 예약어 목록에 있는 단어는 변수명으로 사용할 수 없음.(let, class, return, function...)
3. 상수
- 변화하지 않는 변수를 선언할 땐 let 대신 const를 사용
const myBirthday = '11.17.1996';
myBirthday = '03.09.1989'; // error
4. 대문자 상수
- 기억하기 힘든 값을 변수에 할당에 별칭을 사용하는 것은 널리 사용되는 관습
- 이런 상수는 대문자와 밑줄로 구성된 이름으로 명명
- 기억하기 쉽고 오타낼 확률 낮고 코드 가독성이 증가한다
- 하드 코딩한 값의 별칭을 만들 때 주로 사용한다. 실행 전에도 값을 알고 있고, 후에도 바뀌지 않는 경우
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7FF00"
let color = COLOR_ORANGE;
alert(color); // #FF7FF00
const BIRTHDAY = '18.04.22'; // 생일은 변하지 않기 때문에 하드코딩하다고 볼 수 있음
const AGE = someCode(BIRTHDAY); // 그러나 나이는 매년 바뀔 수 있기 때문에 대문자는 덜 적합함※ data, value, a, b, c 등의 정확한 의미를 내포하지 않는 변수명은 바람직하지 않음. 다른 사람들이 알아보기 힘들기 때문! shoppinCart처럼 사람이 읽을 수 있고 명확하게 의미를 알 수 있을만한 변수명을 사용하는 것이 바람직
자료형 - 8가지
1. 숫자형
- 정수 및 부동소수점 숫자
- 관련된 연산도 가능 * / + -
- 일반적인 숫자외에 Infinity, -Infinity, NaN 같은 '특수 숫자 값'도 가지고 있음
- Infinity는 어떤 숫자보다 더 큰 무한대를 나타내며 어느 숫자든 0으로 나누면 무한대를 얻음
- NaN은 계산 중에 에러가 발생했다는 것. 어떤 추가 연산을 해도 NaN의 결과값은 잘 바뀌지 않음
alert( 1 / 0 ); // 무한대
alert( Infinity ); // 무한대
alert( "숫자가 아님" / 2 ); // NaN, 문자열을 숫자로 나누면 오류 발생
alert( "숫자가 아님" / 2 + 5 ); // NaN2. BigInt
- 몹시 큰 정수형
- 길이에 상관없이 정수를 나타내면 정수 리터럴 끝에 n을 붙이면 만들어짐
3. 문자형
- 문자열을 따옴표로 묶음
- 큰 따옴표, 작음 따옴표 둘 다 가능
- 특이하게 역 따옴표(백틱)이 있는데 역 따옴표로 변수나 표현식을 감싼 후 ${...} 안에 넣어주면 원하는 변수나 표현식을 문자열 중간에 넣을 수 있음
- ${...} 안에는 변수나 수학 관련 표현식도 가능하고 더 복잡한 표현도 다 가능함.
let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;
let name = "John";
alert( `Hello, ${name}!` ); // Hello, John!
alert( `the result is ${ 1 + 2 }` ); // the result is 3
alert( "the result is ${ 1 + 2 }` ); // the result is ${ 1 + 2 }
4. 불린형
- true false 두 가지 값밖에 없음
- 긍정 : true 부정 : false
- 비교 결과를 저장할 때도 사용됨
let nameFieldChecked = true; // 네, name field가 확인되었음
let ageFieldChedcked = false; //아니요, age field가 확인되지 않았음
let isGreater = 4 > 1;
alert( isGreater ); // true
5. null값
- 어느 자료형에도 속하지 않는 독자적인 null 값만 포함하는 자료형
- 존재하지 않는 값, 비어있는 값, 알 수 없는 값을 나타내는 데 사용
- let age = null;은 나이를 알 수 없거나 값이 비어있음을 보여줌
6. undefined 값
- null값처럼 자신만의 자료형을 형성
- 값이 할당되지 않은 상태를 나타낼 때 사용
- 변수는 선언했지만, 값을 할당하지 않았다면 undefined가 자동으로 할당
- 개발자가 변수에 undefined를 명시적으로 할당하는 것도 가능하지만, 직접 할당할 때는 null을 사용하는 게 더 바람직
let age;
alert(age); // 'undefined'
let age = 100;
age = undefined;
alert(age); // "undefined"
7. typeof 연산자
- 인수의 자료형을 반환할 때 사용
- 변수의 자료형을 알고싶을 때 유용
- typeof x , typeof(x) 다 가능
typeof undefined // undefined
typeof 0 // number
typeof 10n // bigint
typeof true // boolean
typeof "foo" // string
typeof Symbol("id") // symbol
'HTML,CSS,JS' 카테고리의 다른 글
| 자바스크립트 - alert prompt confirm, 형 변환, 기본 연산자, 비교 연산자 (0) | 2023.01.04 |
|---|---|
| CSS - 텍스트 스타일 (글꼴 속성, 웹 폰트 사용, color 속성) (0) | 2023.01.03 |
| CSS - 스타일 시트, 선택자, 캐스케이딩 (0) | 2023.01.03 |