[Web_JavaScript] 01

● 자바스크립트(Javascript)

1. 퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다.

2. 컴파일 과정 없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 바로 실행된다.

※ 개발의 발전을 통해 컴파일 과정이 가능해졌으며, Node.js로 서버 환경을 구축한다.

[index.html]

자바스크립트 코드 → 인터프리터 → 결과 출력

</script>

● 웹 페이지에서 자바스크립트의 역할

(1) 웹 페이지는 3가지(HTML, CSS, JS) 코드가 결합되어 작성된다.

(2) 자바스크립트는 사용자의 입력을 자리하거나 웹 에플리케이션을 작성하는 등 웹 페이지의 동적 제어에 사용된다.

(3) 사용자의 입력 및 계산

- HTML 품은 입력 창만 제공하고, KEY, MOUSE의 입력과 계산은 오직 자바스크립트로만 처리가 가능하다.

(4) 웹 페이지 내용 및 모양의 동적 제어

- HTML 태그의 속성이나 콘텐츠, CSS 속성 값을 반영하여 웹 페이지의 동적인 변화를 일으키는 데에 활용된다.

(5) 브라우저 제어

- 브라우저 윈도우의 크기나 모양 변경, 새 윈도우나 탭 열기, 다른 웹 사이트 접속,

브라우저의 히스토리 제어 등 브라우저의 작동을 제어하는 데 활용된다.

(6) 웹 서버와의 통신(Ajax)

- 웹 페이지가 웹 서버와 데이터를 주고 받을 때 활용된다.

(7) 웹 애플리케이션 작성(API)

- 자바스크립트 언어로 활용할 수 있는 많은 API를 제공하므로,

웹 브라우저에서 실행되는 다양한 웹 애플리케이션을 개발할 수 있다.

● JS 환경 구축

- Node.js 설치

- Visual Code 설치

● Visual Code 한글 설정

- 좌측 하단 마켓 플레이스(확장) 아이콘 클릭 > korean 검색

- Korean(사용법) Language Pack for Visual Studio Code 설치

● Visual Code 언어 설정 변경

- F1 또는 Ctrl + Shift + p >

- Configure Display Language 입력 > 언어 선택(en, ko) > 재시작

● Visual Code 테마 변경

- F1 또는 Ctrl + Shift + p >

- 한국어로 설정 시 : 테마 검색 > 색 테마 클릭 > 원하는 테마로 변경

- 영어로 설정 시 : theme 검색 > color theme 클릭 > 원하는 테마로 변경

● 기본 단축키

- Ctrl + b : 전체 화면

- Alt + 방향키 : 한 줄 이동

- Alt + Shift + 방향키 : 한 줄 복사

- Ctrl + x : 한 줄 잘라내기(삭제할 때 자주 사용)

- Ctrl + Alt + 방향키 : 그리드 모드, 종료 시 esc

- F2 : 전체 이름 변경

● HTML 기본 단축키

1. 태그명(요소명) 작성 후 Tab

- div -> Tab -> <div></div> 완성

2. 태그명(요소명).클래스명 작성 후 Tab

- div.wrap -> Tab -> <div class="wrap"></div> 완성

3. 태그명(요소명)#아이디명 작성 후 Tab

- div#container -> Tab -> <div id="container"></div> 완성

4. 태그명(요소명)*n 작성 후 Tab

- div*4 -> Tab -> <div></div><div></div><div></div><div></div>

- div.wrap*3 -> Tab ->

- <div class="wrap"></div>

● Visual Code에서 html파일 실행하는 방법

1. 해당 경로로 직접 들어가서 크롬브라우저로 실행한다(불편해서 못함).

2. 마켓 플레이스에서 open in browser 설치, Alt + b로 실행

- 만약 크롬브라우저로 실행되지 않는다면 해당 html파일 우클릭 > 연결 프로그램 > 다른 앱 선택

> 항상 .html을 이 앱으로 실행 체크 > Chrome 선택

3. 마켓 플레이스에서 live server 설치, Alt + l 그리고 Alt + o로 실행

- 문서가 저장되면 바로 화면에 반영됨.

● 자바스크립트 코드의 위치

1. HTML 태그의 이벤트 리스너 속성에 작성

- HTML 태그에는 마우스 클릭 또는 키보드의 키 입력 등의 이벤트가 발생할 때 처리하는 코드를 등록하는 리스너 속성이 있다.

- 이 속성에 자바스크립트 코드를 작성할 수 있다.

2. <script></script> 내에 작성

- <head></head>, <body></body>, body태그 밖 등 어디든 들어갈 수 있다.

- 웹 페이지 내에서 여러 번 작성할 수 있다.

3. 자바스크립트 파일에 작성

- 자바스크립트 코드를 확장자가 .js인 별도의 파일로 저장하고,

- <script src=".js 경로"></script>를 통해 불러서 사용한다.

4. URL 부분에 작성

- <a> 태그의 href 속성 등에도 자바스크립트 코드를 작성할 수 있다.

● 자바스크립트로 HTML 요소 출력

- 자바스크립트 코드로 HTML 요소를 웹 페이지에 직접 삽입하여 브라우저 윈도우에 출력되게 할 수 있다.

- 이 때 document.write() 혹은 document.writeln()을 사용한다.

실습(vscode-img 출력)

1. img 태그에 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 리스너 속성에 자바스크립트 코드 작성</title>
</head>
<body>
    <h3>마우스를 올려보세요.</h3>
    <hr>
    <img src="img/normal.png" onmouseover="this.src='img/crazy.png'" onmouseout="this.src='img/normal.png'">
</body>
</html>

2. javascript로 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>script 태그에 자바스크립트 코드 작성</title>
</head>
<body>
    <h3>마우스를 올려보세요.</h3>
    <hr>
    <img src="img/normal.png" onmouseover="over(this)" onmouseout="out(this)">
</body>
<script>
    function over(img){
        img.src = "img/crazy.png";
    }

    function out(img){
        img.src = "img/normal.png"
    }
</script>
</html>

3. js 파일을 생성하여 작성하기

- script.js 작성

/*
    author: hong
    contents: mouse event
*/ 

function over(img){
    img.src = "img/crazy.png";
}

function out(img){
    img.src = "img/normal.png"
}

- scriptFile.html 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>외부 파일에 자바스크립트 코드 작성</title>
</head>
<body>
    <h3>마우스를 올려보세요.</h3>
    <hr>
    <img src="img/normal.png" onmouseover="over(this)" onmouseout="out(this)">
</body>
<script src="script.js"></script>
</html>

실습(vscode-text 출력)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>첫번째 HTML 문서</title>
</head>
<body>
    <h1>안녕하세요.</h1>
</body>
</html>

실습(url)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL에 자바스크립트 코드 작성</title>
</head>
<body>
    <h3>링크의 href에 자바스크립트 코드 작성</h3>
    <hr>
    <a href="javascript:alert('안녕')">클릭해보세요~~</a>
</body>
</html>

실습(script)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>docuemnt.write() 사용</title>
</head>
<body>
</body>
<script>
    with(document){
        write("<h1>Welcome</h1>");
        write("<p>");
        write("<pre>");
        writeln("hello");
        write("hi");
        write("</pre>");  // <pre> 태그 : 영역 안의 내용 그대로 출력(띄어쓰기 및 줄바꿈 포함)
        write("</p>");
    }
    // document.write("<h1>Welcome</h1>");
    // document.write("<p>");
    // document.write("<pre>");
    // document.writeln("hello");
    // document.write("hi");
    // document.write("</pre>");
    // document.write("</p>");
</script>
</html>

저작자표시 비영리 변경금지

'웹 개발 > JavaScript' 카테고리의 다른 글

[Web_JavaScript] 06 (0)	2022.05.02
[Web_JavaScript] 05 (0)	2022.05.01
[Web_JavaScript] 04 (0)	2022.04.30
[Web_JavaScript] 03 (0)	2022.04.29
[Web_JavaScript] 02 (0)	2022.04.28

끄적끄적_〆(ﾟ▽ﾟ*)

[Web_JavaScript] 01

실습(vscode-img 출력)

실습(vscode-text 출력)

실습(url)

실습(script)

'웹 개발 > JavaScript' 카테고리의 다른 글

티스토리툴바

[Web_JavaScript] 01

실습(vscode-img 출력)

실습(vscode-text 출력)

실습(url)

실습(script)

'웹 개발 > JavaScript' 카테고리의 다른 글

'웹 개발/JavaScript' Related Articles

티스토리툴바