제어할 태그 선택하기

자바스크립트로 할 수 있는 중요한 일 사용자와 상호작용해서 HTML, CSS를 동적으로 변경해 보다 사용자와 대화하는 듯한 느낌의 애플리케이션을 만드는 핵심적 원리

프로그램, 프로그래밍, 프로그래머

컴퓨터 언어 (HTML, CSS)

컴퓨터 프로그래밍 언어(JavaScript)

프로그램 이란, 순서.

그 순서를 만드는 행위가 '프로그래밍'

그 순서를 만드는 사람이 '프로그래머'

HTML은 웹 페이지를 묘사, 자바스크립트는 사용자와 상호작용하기 위해 개발된 언어

반복적으로, 조건에 따라 다른 기능을 실행

조건문 예고

비교 연산자와 Boolean 데이터타입

조건문

조건문의 활용

리팩토리(refactoring)

중복을 끝까지 찾아서 없애라!

반복문 예고

배열, 반복적인 작업 처리를 위한 반복문

배열(Array)

배열은 데이터 중 연관 된 데이터를 잘 정리정돈 해 담아 놓는 수납상자, array

반복문(Loop)

반복해야 할 2줄의 코드가 1억개라면 copy&paste가 불가능합니다. 만약 했더라고 오류가 발생한다면 다시 수정해야 하는 어려움이 발생, 이때 반복문을 사용합니다.

배열과 반복문

스크립트에 신경 쓸 필요 없이 데이터 자체에 집중하는 효과를 얻을 수 있습니다.

배열은 연관된 데이터를 정렬, 순서대로 자동화된 처리하는 것이 반복문

배열과 반복문의 활용

WEB

 

    
HTML
    
CSS
    
JavaScript
 

WEB

 

    
HTML
    
CSS
    
JavaScript
 

출처 : 생활코딩 강의

수업의 목적

자바스크립트는 야간모드와 주간모드를 버튼을 통해 만들 수 있습니다. 즉 사용자와 상호작용 한다는 의미

1. 자바스크립트는 사용자와 상호작용하는 언어

2. 웹 브라우저는 한번 출력하면 바뀔 수 없지만 바디 태그 내 디자인을 바꿀 수 있습니다.

자바스크립트는 HTML을 제어하는 언어(동적으로 만들어주는 특성을 가짐)

HTML과 JavaScript의 만남 (script 태그)

HTML은 정적 JavaScript는 동적

<h1>JavaScript</h1>

<script>

  document.write(1+1); // 2

</script>

<h1>html</h1>

1+1 <!-- 1+1의 문자열을 출력 -->

HTML과 JavaScript의 만남 (이벤트)

웹 브라우저에서 일어나는 일(사건)을 이벤트라고 합니다.

웹 브라우저에서 일어나는 이벤트의 예

<input type="button" value="hi" onclick="alert('hi')">

<input type="text" onchange="alert('changed')">

<input type="text" onkeydown="alert('key down!')">

HTML과 JavaScript의 만남(콘솔)

콘솔을 통해 웹 페이지를 대상으로 자바스크립트가 실행됩니다.

데이터 타입 – 문자열과 숫자

데이터 타입은 자료형

‘hello world’.indexOf(‘o’) //4

‘hello world’.toUpperCase() // HELLO WORLD

변수와 대입 연산자

좌항과 우항을 결합해 우항의 결과를 만든다

name의 개수가 1억 개일 경우 변경하기 쉽지 않습니다. 변수를 지정해 값을 쉽게 변경할 수 있습니다.

웹 브라우저 제어

자바스크립트를 이용해 제어하고자 하는 태그를 선택하는 방법

CSS기초(style 속성·태그, 선택자)

<h1 style=”backgroudcolor:red;color:blue”>JavaScript</h1>

<div>JavaScript</div> <span style=”font-weight:bold;”>JavaScirpt</span> 전체를 쓰는지 안 쓰는지의 차이

반은 클래스 학생들을 그룹핑, id는 학번의 개념 중복될 수 없습니다.

<h1><a href="index.html">WEB</a></h1>

  <h2 style="background-color:coral;color:powderblue;">JavaScript</h2>

  <p>

    <span id="first" class="js">JavaScript</span> (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside <span>HTML</span> and <span>CSS</span>, <span class="js">JavaScript</span> is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in <span class="js">JavaScript</span> engine. Each of the many <span class="js">JavaScript</span> engines represent a different implementation of <span class="js">JavaScript</span>, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.

</p>

출처 : 생활코딩 강의

HTML CSS JavaScript(웹 페이지를 제어하는 역할)

HTML에서 JavaScript로드하기

Inline 방식은 태그에 직접 자바스크립트를 직접 기술하는 방식입니다.

장점은 연관된 스크립트가 분명하게 드러난다는 점입니다. 하지만 정보와 제어가 같이 있기 때문에 정보로서 가치가 떨어집니다.

<input type="button" onclick="alert('Hello world')" value="Hello world" />

<script>태그 이용

<input type="button" id="hw" value="Hello world" />

<script type="text/javascript">

    var hw = document.getElementById('hw');

    hw.addEventListener('click', function(){

        alert('Hello world');

    })

</script>

html코드 안에 자바스크립트가 존재하지 않습니다. 또한, 자바스크립트 유지보수하기에 바람직합니다.

외부 파일로 분리

정보와 제어의 결합도를 낯추며 유지보수의 편의성이 높아집니다.

<script src="./script2.js"></script>

script2.js  파일 내 코드

var hw = document.getElementById('hw');

hw.addEventListener('click', function(){

    alert('Hello world');

})

Script파일의 위치

head 태그에 위치시킬 수 있지만 이 경우는 오류가 발생할 수 있습니다.

Id가 hw의 존재를 해석하기 전의 상태에서 조회를 하고 있기 때문에 null의 상태가 됩니다. 존재하지 않는 객체를 호출한 상태이기 때문에 오류가 발생합니다.

window.onload = function(){

    var hw = document.getElementById('hw');

    hw.addEventListener('click', function(){

        alert('Hello world');

    })

} //윈도우 객체 onload를 호출하도록 약속, 태그가 화면이 등장한 이후 스크립트 //코드가 실행되기 때문에 오류를 없앨 수 있습니다.

script 파일은 head 태그 보다 페이지의 하단에 위치시키는 것이 더 좋은 방법입니다.

Object Model

객체화란 무엇인가?

테두리와 같은 역할을 합니다.

각각의 태그마다 객체를 만들어 준비를 해놓은 상태, 태그에 해당하는 객체를 찾아 메소드를 호출하거나 프로퍼티를 가져오는 것

객체화 = 객체 제어 방법

var imgs = document.getElementsByTagName(‘img’);

imgs[0].style.width=’300px’;

JavaScript Core, BOM DOM(윈도우 객체의 프로퍼티)

window : 전역객체

JavaScript Core : JavaScript 언어 자체에 정의되어 있는 객체들

BOM(Browser Object Model) : 웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨 것

DOM(Document Object Model) : 웹페이지의 내용을 제어

출처 : 생활코딩 강의