공부했던 내용 정리
# 자바스크립트(Javascript)
1. 웹의 동작(동적)을 구현하기 위한 언어
2. 웹 브라우저에 자바스크립트 엔진이 내장되어 있기 때문에 사용가능
3. 웹 브라우저에서 동작(단 Node.js 환경은 운영체제에서 동작)
4. 객체 기반의 스크립트 언어
5. HTML 문서 내에서 <script> ~ </script> 태그 안에 작성
6. 대소문자를 구별
# 웹 페이지에서 자바스크립트의 역할
웹 페이지는 3가지(HTML, CSS, JS)코드가 결합되어 작성된다.
자바스크립트는 사용자의 입력을 처리하거나 웹 어플리케이션을 작성하는 등
웹 페이지의 동적 제어에 사용된다.
- 사용자의 입력 및 계산
HTML폼은 입력 공간만 제공하고,
KEY, MOUSE의 입력과 계산은 오직 자바스크립트만 처리가 가능하다.
- 웹페이지 내용 및 모양의 동적 제어
HTML태그의 속성이나 콘텐츠, CSS 속성값을 변경하여
웹 페이지에 동적인 변화를 일으키는 데에 활용된다.
- 브라우저 제어
브라우저 윈도우의 크기나 모양 변경, 새 윈도우 나 탭 열기, 다른 웹 사이트 접속,
브라우저의 히스토리 제어 등 브라우저의 작동을 제어하는 데 활용된다.
- 웹 서버와의 통신(Ajax)
웹 페이지가 웹 서버와 데이터를 주고 받을 때 활용된다.
--------------------------------------------------------------------------------
# 자바스크립트의 출력
출력: 개발자가 사용자에게 값을 표현해주는것
1. 문서 출력
document.write() 함수 통해 <body> 에 내용을 출력
2. 대화상자 출력
window.alert() 함수를 통해 알림창으로 출력
알림창 > 경고창
- 개발자를 위한 출력
3. 콘솔 출력
console.log() 함수를 통해 콘솔창에 출력
# 외부 자바스크립트 파일로 적용
<script src="경로/파일명.js"></script>
--------------------------------------------------------------------------------
# 변수(Variable)
데이터(값)를 저장할 수 있는 메모리 공간
x = 10
저장공간 이름 대입연산자 저장될 값
# 대입연산자
오른쪽에 있는 값을 왼쪽의 저장공간에 넣어라!
# 변수의 선언
변수명 앞에 let이 붙어있으면 선언
let 변수명; // 선언
변수명 = 값; // 초기화
let num;
num = 10;
let num;
let data = 20; // 선언 + 초기화
var num;
num = 10;
* var를 사용하지 않는 이유
1. 같은 이름의 변수를 선언할 수 있음
# 상수(constant)
한번 선언된 상수는 다시 재정의 할 수 없으며, 값도 재할당 할 수 없다.
즉, 변하지 않는 값!
const 상수명;
상수명 = 값; //에러발생!
const 상수명 = 값; // ok!
# 자바스크립트 식별자(이름)
식별자(identifier)란 자바스크립트 개발자가 변수, 상수, 함수에 붙이는 이름이다.
식별자를 만들 때 다음 규칙을 준수 해야 한다.
- 첫 번째 문자: 알파벳, _ , $ 문자만 사용가능하다.
- 두 번째 이상문자: 숫자, 알파벳, _ , $ 사용가능.
- 대소문자 구분: data 와 Data는 다른 식별자 이다.
- 키워드는 사용 불가(ex. class, default, if, else 등등)
- 상수는 가급적 대문자로 표현
6variable (X)
student_id (o)
_code (o)
if (x)
%calc (x)
$hi (o)
--------------------------------------------------------------------------------
# 자료형(type)
프로그램에서 다룰 수 있는 값의 종류를 의미한다.
1. 숫자형(number)
100, 3.14
다른 언어와 달리 정수와 실수를 따로 구분하지 않음
모든 수를 실수 하나로만 표현
2. 문자열형(string)
따옴표로 둘러싸인 문자들의 집합체, 문자의 나열을 뜻한다.
"", '', ``(백쿼트)
3. undefined
타입이 정해지지 않은 것을 의미한다.
4. null
값이 정해지지 않은 것을 의미, null로 변수를 초기화 한 경우
5. 객체형(object)
여러 속성, 여러 값을 하나의 변수에 저장할 수 있도록 해 주는 타입
Key - Value 구조로 이루어져 있다.
let apple_id = "apple"
let apple_pw = "abcd1234"
let apple_age = 10
▲ 매우 불쾌
----------------------------------
let apple = {id : "apple",
pw : "abcd1234",
age : 10
}
Key Value
id "apple"
pw "abcd1234"
age 10
6. 심볼형(Symbol)
'유일하고 변경 불가능'한 기본값을 만드는 타입이다.
객체 속성의 Key값으로 사용할 수 있다.
const symboll = Symbol("apple");
const symboll2 = Symbol();
--------------------------------------------------------------------------------
# 자바스크립트의 형변환
1. 자동 형변환(암시적, 묵시적)
숫자 + 문자열 > 문자열
10 + "20" > "1020"
10 + "" > "10"
※ 단, (숫자로 이루어진) 문자열과 - * / 를 할 경우? 숫자
10 - "20" > -10
10 * "20" > 200
10 / "20" > 0.5
10 * "Hello" > NaN
* NaN(Not a Number)
정의 되지 않은 값이나 표현할 수 없는 값
숫자로 변환할 수 없는 연산을 시도한 경우
<!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>자동 형변환</title>
</head>
<body>
<h2>자동 형변환</h2>
</body>
<script>
const a= 10 +"문자열";
console.log(a); // 10문자열
// 숫자 + "" = 문자열
const b= 20;
console.log(b + "") //"20"
console.log(typeof(b + "")) //string
const c= "3" * "5";
console.log(c); // 15
// 숫자 - (문자로 이루어진) 문자열
const d= 100 - "★";
console.log(d);
</script>
</html>2. 강제 형변환(명시적)
자바 스크립트는 자동으로 형변환을 지원하지만
명시적으로 변환할 필요가 있을 때 사용하는 함수.
Number() : 문자 > 숫자 변환
String() : 숫자나 불린(boolean) 등을 문자열형으로 변환
Object() : 모든 자료형 > 객체 변환
parseInt() : 문자열형을 정수(int)로 변환
parseFloat() : 문자열형을 실수(float)로 변환
<!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>강제 형변환</title>
</head>
<body>
<h2>강제 형변환</h2>
<script>
const num1 = "10";
const num2 = "20";
//10 + 20 = 30
// console.log(`${num1} + ${num2} = ${num1+num2}`)
console.log(`${num1} + ${num2} = ${Number(num1)+Number(num2)}`)
//실제로 num1, num2 공간에 있는 값을 숫자로 바꾼게 아니기 때문에
//다시 1020이 나오게된다.
console.log(`${num1} + ${num2} = ${num1+num2}`)
</script>
</body>
</html>'Language > JavaScript(web)' 카테고리의 다른 글
| [javascript] 프로토타입, 객체종류, 콜백 함수 (0) | 2023.06.07 |
|---|---|
| [javascript] 변수의 범위, 화살표 함수, 객체 (0) | 2023.06.07 |
| [javascript] 제어문, 배열, 함수 (1) | 2023.06.07 |
| [javascript] 연산자, 제어문 (0) | 2023.06.07 |
| [javascript] 대화상자, 연산자 (0) | 2023.06.07 |
