실습환경 만들기

1. Javascript의 특징

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

2. alert 명령어

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

3. 실습

먼저 Javascript 코드를 작성하고 lecture01.js으로 저장
alert("hello world");

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

index.html
<html>
    <head>
        <meta charset="utf-8">
        <script src="lecture01.js"></script>
    </head>
    <body>
        This is a basic HTML page
    </body>
</html>

브라우저에서 작성한 HTML 파일을 불러들여 결과를 확인

script src="lecture01.js"을 입력한 상태에서 저장 후 브라우저에서 새로고침 하면 알림창이 뜬다.

4. 기억할 점

Javascript 프로그램을 JS 파일에 작성 후 html 파일에서 해당 스크립트가 실행될 수 있는 구문 추가 :<script src="lecture01.js"></script>
그 후 그 결과를 브라우저에서 확인
브라우저에서 경고창을 띄울 수 있음 : alert("hello world");
프로그램을 변경하면 브라우저에서 새로고침이 필요

Developer Console 사용하기

1. 개발자 도구 (Developer Console)

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

console.log("Hello developer console");
console.log("2");
console.log("3");

2. console.log 명령어

console.log 뒤에 따라오는 괄호 안에 들어있는 메시지를 콘솔창에 출력하는 명령어
웹페이지 개발자 도구 콘솔창에 명령어 직접 실행 가능

Javascript는 한 줄을 읽고 한줄을 수행한 수

3. 실습

변수 선언과 초기화

1. 변수

프로그램 실행 도중 임의의 값을 저장해 두고 읽을 수 있는 공간

※ 변수의 선언과 초기화
선언 : 컴퓨터에게 변수를 사용할 것이라고 선언(알려주는) 역할
초기화 : 선언한 변수에 처음으로 값을 저장하는 과정
변수에 값을 저장하는 법 : 대입연산자 (=) 를 활용
콤마(,)를 활용해 여러 변수를 동시에 선언, 초기화 가능

2. prompt() 명령어

promprt 뒤에 따라오는 괄호 안에 들어있는 메세지를 사용자에게 보여주고, 문자열을 입력받는 명령
변수에 값을 저장하는 구문과 함께 사용해서, 사용자가 입력한 값을 변수에 저장 가능

3. 실습

변수의 활용

1. 변수의 값 활용

변수의 이름을 사용하면, 변수의 값을 읽어서 사용 가능

var msg;
msg="Hello World";
alert(msg);

var msg;
msg="Hello World";
console.log

2. console.log 명령어

괄호 안에 여러 개의 메시지를 콤마(,)로 구분하여 활용할 수도 있음

var name=prompt("이름을 입력해주세요.")
console.log(name, "님 환영합니다.");

3. 실습

기본자료형

1. 자료형이란?

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

2. 자료형의 종류

1) number Type: 숫자
var a=100, b=3.14;

2) string Type: 문자열
var c="안녕하세요", d="a";

3) boolean Type: 맞다/틀리다를 표현
var e = true, f = false;

3. 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"라고 출력

※ 개발자 도구(F12) 꿀팁
콘솔에 직접 값을 입력해 결과값을 확인할 수 있다.