티스토리 뷰
<script> 태그
자바스크립트를 HTML문서 대부분의 위치에 삽입가능
코드구조
문 statement
어떤 작업을 수행하는 문법구조와 명령어를 의미
코드의 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성하는 것이 일반적
세미클론
줄바꿈이 있다면 세미클론을 생략할 수 있다
대부분의 겨웅 줄바꿈은 세미클론을 의미, 하지만 항상은 아님
주석
// 한줄일때 사용
/* */ 문단으로 사용
엄격모드
"use strict"
반드시 최상단에 위치할 것
변수와 상수
변수
변수(variable)는 데이터를 저장할 떄 쓰이는 이름이 붙은 저장소
let 키워드를 사용하여 변수 생성
let message; //massage 라는 이름을 가진 변수 생성(선언
message = "hi"; //문자열 저장,=할당 연산자 사용해 변수 안에 데이터 저장
alert(massage); //변수에 저장된 값을 보여줌
let massage = "hi";
alert(massage); // hi 라고 출력, 이런 방식으로도 작성 할 수 있음
변수 message는 message라는 이름표가 붙어있는 상자에 hi라는 값을 저장한 것
상자 속엔 어떤값이든 넣을 수 있다
원하는 만큼 값을 변경할 수 있다
let massage;
message ="hi";
message = "hello"; //값이 변경됨
alert(massage);값이 변경되면 이전 데이터는 변수에서 제거됨
let hello = "hello zz"; // 헬로라는 박스안에 헬로우 ㅋㅋ 데이터 넣음
let message; //메세지라는 박스 만듦
message = hello; //메세지라는 박스에 헬로우 박스 복사 데이터도 복사됨
alert(hello);
alert(message); // 두개 다 hello zz로 출력변수 두 개 선언 후 한변수의 데이터를 다른 변수에 복사 할 수 있다
변수는 한번만 선언해야 함 같은 변수를 여러번 선언시 에러 발생
변수는 한번만 선언하고 선언한 변수 참조시 let없이 변수명만 사용하여 참조
변수 명명 규칙
변수명에는 오직 문자와 숫자 $ _ 만 가능
첫 글자는 숫자불가
대 소문자 구별
예약어 불가
상수
상수 (constant) 변화하지않는 변수
선언 시 const 사용, 상수는 재할당할 수 없음 상수 변경하려고 하면 에러발생
대문자 상수
기억하기 힘든값을 변수에 할당해 별칭으로 사용하는 것
대문자와 밑줄로 구성된 이름으로 명명
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0"기억하기 훨씬 쉽다! 오타를 낼 확률이 낮다! 코드 가독성 증가 !
바람직한 변수명
사람이 읽을 수 있는 이름사용
줄임말이나 짧은 이름피하기
최대한 서술적이고 간결하게 명명
자신만의 규칙이나 소속된 팀의 규칙 따르기
자료형
숫자형(number type)
정수및 부동소수점 숫자를 나타냄
곱셉* 나눗셈/ 덧셈+ 뺄셈-
infinity : 어떤 숫자보다 더 큰 특수값 무한대(∞)를 나타냄,어느숫자든 0으로 나누면 무한대를 얻을 수있음, 직접참조 가능
-infinity :
NaN: 계산 중 에러 발생 나타내주는 값
Bigint : 길이에 상관없이 정수를 나타낼수있음, 정수 리터럴 끝에 n을 붙이면 만들 수 있다
문자형(string)
따옴표로 묶음
큰따옴표 "" 작은따옴표 '' 역따옴표(백틱) ``
역 따옴표로 변수나 표현식을 감싼후 ${..} 안에 넣어주면 변수나 표현식을 문자열 중간에 넣을 수 있음
불린형(논리타입)
true false 두가지 값밖에 없는 자료형
null
존재하지 않는 값 비어있는 값 알 수 없는 값
undefind
값이 할당되지않은 상태
변수는 선언했지만 값을 할당하지않았다면 해당변수에 자동할당
객체형 – 복잡한 데이터 구조를 표현할 때 사용합니다.
심볼형 – 객체의 고유 식별자를 만들 때 사용합니다.
alert, prompt, confirm을 이용한 상호작용
alert : 메세지를 보여줌
함수시 실행시 사용자가 확인버튼 누를때까지 메세지를 보여주는 창 떠있음
prompt : 사용자에게 텍스트 입력하는 메세지 띄워줌과동시 입력필드 제공
사용자가 입력한 문자열 반환하고 취소 또는 esc누를경우 null반환
두개의 인수를 받음, 함수가 실행되면 텍스트메세지와 입력필드,확인 및 취소버튼이 있는 모달 창 띄워줌
title 사용자에게 보여줄 문자열, default 입력 필드의 초깃값(선택값)
confirm : 사용자가 확인 또는 취소버튼 누를떄까지 메세지가 창에 보여짐
매개변수로 받은 질문과 확인 및 취소버튼이 있는 모달 창 보여줌
사용자가 확인버튼을 누르면 true 그외의경우 false반환
모달 창의 위치는 브라우저가 결정 대개 중앙에 위치
모달 창의 모양은 브라우저마다 다름 개발자는 창의 모양 수정불가
기본 연산자와 수학
용어: 단항 이항 피연산자
피연산자 : 연산자가 연산을 수행하는 대상 인수라고도 불림 argument
단항 : 피연산자를 하나만 받는 연산자
이항 : 피연산자를 두개받는 연산자
자바스크립트에서 지원하는 수학 연산자
덧셈 +
뺼셈 -
곱셈 *
나눗셈 /
나머지 %
- a%b 는 a를 b로 나눈후 그나머지를 정수로 반환
거듭제곱 **
- a**b는 a를 b번 곱한 값 반환
이항연산자 '+'와 문자열 연결
alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21" 이항연산자 +를 사용할때 피연산자중 하나가 문자열이면 다른 하나도 문자열로 변환됨
alert(2 + 2 + '1' ); // '221'이 아니라 '41'이 출력
alert( 6 - '2' ); // 4, '2'를 숫자로 바꾼 후 연산이 진행
alert( '6' / '2' ); // 3, 두 피연산자가 숫자로 바뀐 후 연산이 진행
단항 연산자 + 와 숫자형의 변환
숫자형이면 아무런 동작도 하지않음
숫자형이 아닌 경우엔 숫자형으로 변환됨
할당연산자
= (assignment)
우선순위 3위로 아주 낮음
값을 반환함
증가 감소 연산자
증가연산자는++ 변수를 1증가시킴
감소연산자는 -- 변수를 1감소시김
증가/감소연산자는 변수에만 쓸 수 있다 !
비교연산자
불린형반환
true 반환시 긍정, 참, 사실 의미
false 반환시 부정, 거짓, 사실이 아님 의미
다른형을 가진 값 간의 비교
비교하려는 값의자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 바꿈
alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교 진행
alert( '01' == 1 ); // true, 문자열 '01'이 숫자 1로 변환된 후 비교 진행
불린값의 경우 true는 1, false는 0으로 변환된 후 비교
일치연산자 ===
동등연산자 ==은 0과 false를 구별하지못함
일치연산자는 형변환없이 값 비교가능
null, undefined 비교
일치연산자 사용
동등연산자 사용시 특별규칙 적용되어 true가 반환됨
과제 1
admin과 name이라는 변수를 선언하세요.
name에 값으로 "John"을 할당해 보세요.
name의 값을 admin에 복사해 보세요.
admin의 값을 alert 창에 띄워보세요. "John"이 출력되어야 합니다.
let admin;
let name = ("john");
admin = name;
alert(admin);