JS -

born_a·2022년 11월 14일

HTML, CSS, JS

HTML : 웹 페이지의 구조를 나타냄
CSS : 웹 페이지 안에 존재하는 요소들의 스타일을 나타냄
JS : JS로직을 통해 문서의 구조와 스타일에 변화를 줄 수 있음.
- 브라우저에서는 Javascript에서 HTML, CSS에 접근할 수 있는 API를 제공함

브라우저에서는 Window Object를 제공해주고,자바스크립트에서는 해당 객체를 통해 각종 html element나 css에 접근하고 조작을 가할 수 있다.

Javascript의 특징

HTML+CSS와 함께 사용해 client side 웹 프로그램을 작성할 수 있다.
웹 브라우저에서 바로 실행이 가능하다.

alert 명령어

alert 뒤에 따라오는 괄호 안에 들어있는 메시지를 브라우저 경고창에 띄워주는 명령어

실습방법

Javascript 코드를 작성한다.
lecture01.js

alert("hello world");

해당 코드를 로드하는 HTML 파일을 작성한다

index.html

<html>
    <head>
    ...
    <script src="lecture01.js"></script>
    ...
    </head>
    <body>
    ...
    </body>
</html

console 이용

개발자 도구 (Developer Console)

브라우저의 우측 상단 메뉴에서 더보기, 개발자 도구 메뉴를 이용해 활성화
여러 탭 중 console 탭을 사용해 console 을 확인 가능
직접 명령어를 입력해 실행 가능하며 (>) , 그 결과를 바로 확인 가능 (<)

console.log 명령어

console.log 뒤에 따라오는 괄호 안에 들어있는 메시지를 콘솔창에 출력하는 명령어
console.log 명령어
괄호 안에 여러 개의 메시지를 콤마(,)로 구분하여 활용할 수도 있음

변수

변수 선언과 초기화

var name=prompt("") : 해당 문장을 출력후 사용자에게 값을 입력받아 입력 받은 값을 저장하게 함.

변수의 이름을 사용하면, 변수의 값을 읽어서 사용 가능
var var1 = "1", var2 = "2", var3 = "3";

console.log(var1);
alert(var2);
prompt(var3);

자료형

기본 자료형

자료형이란?

변수에 저장할 수 있는 값의 종류를 자료형이라고 한다.

자료형의 종류

number Type: 숫자
var a=100, b=3.14;
string Type: 문자열
var c="안녕하세요", d="a";
boolean Type: 맞다/틀리다를 표현
var e = true, f = false;
typeof() 명령어
typeof 뒤에 따라오는 괄호 안에 들어있는 변수의 type을 알려주는 명령어

var a=100;
console.log(a,typeof(a));
//100 "number"라고 출력

var c="안녕하세요";
console.log(c,typeof(c));
//안녕하세요 "string"라고 출력

var e=true;
console.log(e,typeof(e));
//true "boolean"라고 출력

prompt는 사용자로부터 받은 문자열을 결과로 돌려주기 때문에