본문 바로가기

Programing/JavaScript64

[모던JS] 010. [기본] alert, prompt, confirm을 이용한 상호작용 원문브라우저에서 사용자와 상호작용 할 수 있는 내장 함수가 있다.단순히 확인 버튼만 누르는 alert와 입력까지 해야 하는 prompt, 입력은 필요 없고 확인 취소가 있는 confirm dialog가 있다.alert 함수alert 함수는 메시지를 띄워주고 사용자가 OK를 누를 때까지 확인창이 계속 떠있게 하는 기능이다.alert("Hello");누르게 되면 뜨는 확인창을 모달 창(modal window)라고 부른다.모달의 의미는 해당 창과 페이지 밖의 웹 브라우저의 내용과는 상호작용이 불가능하다는 의미이다.따라서 사용자가 OK를 눌러서 모달창을 빠져 나오지 않으면 웹 페이지를 조작할 수 없다.prompt 함수역시 모달창을 띄워주는 함수인데, alert처럼 OK만 누를 수 있는 것이 아니라 입력 필드(i.. Programing/JavaScript 2024. 3. 25.
[모던JS] 009. [기본] 자료형(원시 타입, typeof연산자) 원문자료형(data type)의 의미자료형(data type)이란 숫자, 문자, 불리언과 같은 자료의 형태를 이야기한다.자바스크립트에서는 변수에 모든 자료형이 올 수 있다.let message = "hello";message = 123456;위의 예제처럼 변수의 자료형은 문자열이 될 수도 있고, 숫자가 될 수도 있다.이렇게 값의 타입이 언제든지 바뀔 수 있기 때문에 자바스크립트를 동적 타입 언어(dtnamically typed language)라고 한다.자료형의 종류원시 타입 (primary)숫자형(Number type)숫자형의 종류정수 : 1, 2, 3 등부동소수점 숫자 : 일반적이지 않으니 이번 과정에서는 생략특수 숫자값(special numeric value)무한대Infinity : 양의 무한대어떤.. Programing/JavaScript 2024. 3. 25.
[모던JS] 008. [기본] 변수와 상수(let, var, const, 호이스팅, 명명규칙, 대문자상수) 원문자바스크립트로 작성된 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작한다.즉 HTML과 CSS로 작성된 문서에 동적인 움직임, 명령, 행동을 발생시키기 위해서 자바스크립트를 이용한다.(예시)온라인 쇼핑몰 : 장바구니 등의 정보채팅 앱 : 사용자 정보, 메시지 주고 받기변수 (Variable)변수의 의미이름이 붙은 저장소.데이터를 저장할 때 쓰인다.예를 들어 쇼핑몰에서는 상품정보나 방문객 등의 정보를 저장할 때 변수를 사용한다.선언 방법 (let, var)변수 선언 기본형변수를 선언하기let 변수명;var 변수명;변수에 데이터를 저장하기let message;message = 'Hello';=이라는 할당 연산자를 사용하여 변수 안에 'Hello'라는 문자열을 저장했다.let me.. Programing/JavaScript 2024. 3. 25.
[모던JS] 007. [기본] 엄격 모드(use strict) 원문엄격 모드란? (use strict)자바스크립트는 호환성을 최우선시 하면서 발전해왔다.따라서 새로운 기능을 추가할 때도 기존의 기능은 전혀 건드리지 않고 발전해왔다.문제는 기존의 언어에서 언어 개발자의 실수 등으로 발생한 버그나 불완전한 코드도 여전히 남아있다는 것이다.그런데 2009년 ECMAScript5(ES5)가 등장하면서부터는 기존의 기능도 수정이 이루어졌다. 따라서 하위호환성 문제가 발생하기도 했다.하지만 그냥은 실행이 안 되고 아래의 기본형을코드의 최상단에 왔을 때만 '모던한 방식', 즉 기존의 버그까지 모두 수정한 최신의 스크립트가 작동되도록 설계하였다.기본형코드 최상단에 아래의 지시자를 입력한다."use strict";함수 하나만 엄격모드로 실행하기함수의 최상단에 아래의 지시자를 입력하.. Programing/JavaScript 2024. 3. 25.
[모던JS] 006. [기본] 코드 구조(문, 주석) 원문이 문서에서는 코드 블록을 만드는 방법에 대해 다룬다.문(statement)문의 의미어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 말함.alert('hello, world!')와 같은 것이 문이다.문을 작성하는 방법세미콜론(;)으로 구분세미콜론을 작성하지 않으면 코드가 끝나지 않았다고 생각되어 에러가 발생할 수 있음.세미콜론에 대해서는 아래에서 추가적으로 다룸.가독성을 위해 하나의 문은 한 줄에 작성하기// 바른 예alert("hello");alert("world");// 에러 예제 1alert("에러가 발생합니다.")[1, 2].forEach(alert) // 단일 문으로 인식// 에러 예제 2alert("에러가 발생합니다.")[1, 2].forEach(.. Programing/JavaScript 2024. 3. 25.