JavaScript
: 웹페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어 => 동적 기능, 동적 처리, 이벤트 처리, 슬라이드 메뉴 등등
JAVASCRIPT ⇒ HTML <script></script> 코드 안에서 작성 가능.
<head>,<body>태그 안에서 둘 다 사용 가능
→ 전부 head에 넣으면 시간이 너무 오래걸리게 된다. 페이지가 느린 느낌이 들게 된다.
console.log() : 콘솔에서 확인 가능 => 중간 사항 체크 가능
alert() : 브라우저가 열렸을 때, 내용을 알림창으로 보여줌
변수
변수: 임의의 값을 담아두는 변하는 값 - 메모리 주소를 거쳐간다.
1. 변수 선언
let 변수name;
let ⇒ 중복 선언 불가능. 재할당은 가능하다. 아무것도 할당하지 않으면 자동으로 undefined 할당var 변수name;
var ⇒ 중복선언, 재할당 가능! 아무것도 할당하지 않으면 자동으로 undefined 할당.
2. 변수 할당: 변수가 들어갈 공간을 만들고 거기에 값을 넣는다. = 연산자 사용
const 변수이름 = 값
const: 초기에 선언할 때 반드시 선언과 동시에 값을 할당 해줘야 한다.
- 재선언, 재할당 모두 불가능!!
let 변수이름 = 값
var 변수이름 = 값
프로그래밍 언어 타입
강한 타입 언어: 타입 검사를 통과하지 못한다면 실행 자체가 안된다.
변수를 선어할 때 string, int, double 등처럼 타입을 한 종류만 명확히 지정
예시: Java, C, C++ 등등약한 타입 언어: 런타임에서 타입 오류를 만나더라도 실행을 막지 않는다.
예시: Javascript, Python 등등
⇒ 자바스크립트는 약한 타입 언어!
자바스크립트는 데이터 종류에 관계 없이 var, let, const로 변수를 선언하고 사용한다.
자료형
primitive 기본형
- string: 문자 데이터
- number: 숫자형 데이터 - 정수, 부동 소수점, 무한대, NaN
- boolean: 참, 거짓 둘 중 하나의 값을 갖는 요소 - True/False
- null: 빈 값, 타입은 존재하지만 값은 존재하지 않는다.
- undefined: 값도 타입도 없다.
object 객체 기본형이 아닌 것은 모두 객체
자료형 확인하기
typeof( )typeof('string') typeof(245) typeof(null)
형변환
- 문자열
- String()
- toString()
String(true); a.toString(); (false).toString();
- 정수
- Number()
- ParseInt()
Number(true); // 1로 변환된다. false는 0으로 변환된다. Number('10'); parseInt('10');
Javascript 연산자
- 대입연산자: =
- 비교연산자: ==, != → 숫자 1과 문자 1의 값만 비교
=== , !=== → 값 뿐만 아니라 type도 같이 비교한다.
, > >=, < , <=- 산술연산자: +, -. *, /
- 논리연산자: !,
&&→ and,||→ or
Javascript 함수
function functionname(parameter) { } const functionname = function(parameter) { }특정 작업을 수행하기 위해 독립적으로 설계된 코드 집합!
일반적으로 함수 이름은 카멜 표기법을 사용한다.
함수 만들기 실습
var no_1 = 1;
var no_2 = 2;
var no_3 = 3;
function add(a, b, c) {
alert(a + b + c);
}
add(no_1, no_2, no_3);
function sub(a, b) {
alert(a - b);
}
sub(no_1, no_2);
function divide(a, b) {
alert(a / b);
}
divide(no_1, no_2);
function mul(a, b) {
alert(a * b);
}
mul(no_1, no_2);Javascript 조건문
특정 조건 만족시 실행하는 명령의 집합, 특정 조건 속에서 작업을 수행하고 싶을 때 사용한다.
- if 조건문
if (조건1) {
조건1이 참이라면 실행
} else if (조건2) {
조건1이 참이 아니고 조건2가 참이라면 실행
} else {
조건 1, 2 모두 참이 아닐 때 실행
}if문을 중첩해서 사용하는 것도 가능하다.
if (조건1) {
if (조건2) {
} else {
}
}- switch 조건문 - 정확한 어떤 값일 때
switch(변수) {
case 값1:
// 변수와 값1이 일치하면 실행
break;
case 값2:
// 변수와 값2가 일치하면 실행
break;
default:
//다 아닐 때 실행
break;
}
switch (a) {
case 8:
console.log("a = 8 ");
break;
}
Javascript 반복문
똑같은 명령을 일정 횟수만큼 반복해 수행하도록 하는 실행문
- for
for (초기문; 조건문; 증감문) {
//조건문의 결과가 참인 경우 반복적으로 실행
}
for (var i = 0; i < 10; i++) {
console.log("i :" + i);
}
여기서 i++는 i = i + 1과 같다. - while
주의) while문의 경우 조건문의 결과를 바꾸지 않으면 무한루프에 빠질 수 있다.
while ( 조건문 ) {
///조건문이 참인 경우 반복적으로 실행
}
var j = 0;
while (j < 10) {
console.log("j:" + j);
j++;
}- for ... of
배열의 모든 요소를 거쳐 반복한다.
const users = ["Max", "Anna", "Joe"];
for (const user of users) {
console.log(user);
}비교
for (let i = 0; i < someArray.length; i++) {
console.log(someArray[i]);
}- for in
한 객체의 열거 가능한 모든 속성을 거쳐 반복한다.
const loggedInUser = {
name: "max",
age: 32,
isAdmin: true,
};
for (const propertyName in loggedInUser) {
console.log(propertyName);
console.log(loggedInUser[propertyName]);
}