수업의 목적

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

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>

출처 : 생활코딩 강의