코드

<body>

    <script>

        var age = prompt("당신의 나이는?","0");

        if(age >= 20){

            document.write("당신은 성인입니다.");

        }else{

            document.write("당신은 미성년자입니다.");

        }

    </script>

</body>


결과


코드 작성을 완료했다면 Ctrl + Alt + O를 눌러 크롬 브라우저로 열어본다. 질의응답 창이 나오고 '25'를 입력하고 확인 버튼을 누르면 "당신은 성인입니다."라는 문장이 출력된다.



* 자바스크립트의 가장 큰 특징은 객체(Object) 기반 언어라는 것


크롬 브라우저 설치하고 개발자 도구 살펴보기

1. https://www.google.co.kr/chrome 사이트로 이동한다. Chrome 다운로드 버튼을 클릭하여 크롬 브라우저를 내려받아 설치


2. 설치가 완료된 크롬 브라우저를 실행한다. 메뉴 펼침 버튼을 눌러 개발자 도구를 연다. 개발자 도구를 보면 Elements, Console, Source 등의 패널이 있다.


크롬 브라우저 개발자 도구 패널

- Elements : HTML(Element), 요소에 적용된 스타일(CSS)을 검사할 수 있다

- Console : 자바스크립트 오류 체크는 물론 디버깅(debugging)을 할 수 있다

- Source : 브라우저가 자바스크립트 소스를 파싱(parsing) 해오는 과정을 보여준다. 소스 패널도 오류 체크와 디버깅(debugging)을 할 수 있다


비주얼 스튜디오 코드 설치하기

웹 편집기로는 에디트플러스(Edit Plus), 노트패드++, 아톰(Atom), 서브라임 텍스트(Sublime Text), 브라켓(Brackets), 웹스톰(Webstorm), 비주얼 스튜디오 코드(Visual Studio Code) 등이 있다. 


http://minimelody.tistory.com/147 비주얼 스튜디오 코드 설치


확장 기능 이용해 HTML 문서를 크롬 브라우저에서 바로 열기

1. HTML5 기본 양식 작성

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width-device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    

</body>

</html>


2. 크롬 브라우저로 열어 보기 위한 HTML 코드 작성

<body>

<h1>Welcome My World</h1>

</body>


3. 사이드바에 있는 확장 기능 버튼을 누른다. 검색 창에 'open-in-browser'를 입력해 검색한다. 제작자 이름이 'coderfee'인 확장 기능을 선택하고 설치 버튼을 눌러 설치한다. 자동으로 HTML 문서를 열어주는 확장 기능이 설치된다. 다시 로드 버튼을 눌러 확장 기능을 적용한다.


4. 다시 코드를 작성한 문서로 돌아온다. Ctrl + Alt + O를 누르면 상단에 어떤 브라우저로 실행할지 나온다. 여기서 실행할 브라우저를 선택할 수 있다. chome을 선택하면 크롬 브라우저로 파일이 열린다.


+ Recent posts