수업의 목적
| onclick으로는 js가 온다. <style> 속성 값을 반드시 CSS가 온다. 웹 브라우저는 한 번 화면에 출력되면 자기 자신을 바꿀 수 없다. js는 사용자와 상호작용 하는 언어이다. js는 HTML을 제어하는 언어이다. |
html과 javascript의 만남: <script> 태그
<script> 태그 안에 있는 코드를 javascript로 해석한다.
<h1>JavaScript</h1>
<script>
document.write(1+1);
</script>
<h1>html</h1>
1+1
html과 js의 만남: 이벤트 event
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down!')">
</body>
</html>
| onclick: 버튼 누르면 실행 됨 onchange: 값 바꾸고 칸 바깥 클릭하면 실행 됨 onkeydown: 칸에서 아무 입력 키 누르면 실행 됨 |
이외에 많은 event 속성이 있을테니 찾아보기...
html과 js의 만남: 콘솔 console
파일을 만드는 대신 console로 파일 실행을 즉석으로 할 수 있다.
데이터 타입 : 문자열과 숫자
프로그래밍에서는 데이터를 잘 처리하는 것이 중요하다.
자바스크립트에서 어떤 형태의 데이터들이 있는지 살펴보고 그 중에서 대표적인 데이터인 '문자'와 '숫자'에 대해 깊이 이해해보자.
.length
.toUpperCase()
.indexOf('world') // 'world'가 몇 번째부터 시작하는지 알려줌
' hello '.trim // hello
1 + 1 = 2 vs "1" + "1" = 11
그 외 다른 데이터 타입들..
변수와 대입 연산자
변수
= 바뀔 수 있는 어떤 값
| x=1; y=1; x+y=2; x=1000 y=1000 x+y=2000 1=2 // 1에다가 2를 대입한다는 의미 // 2는 대입연산자 1은 상수 |
| name = 'egoing'; "asdfsadfsadf " + name + "123sadfasdfsaf " + name + " adsfasdfs" 변수를 설정할 때는 var를 붙인다. var name = 'leezhe'; alert("1231wfdskafd"+name) |
웹 브라우저 제어
<body style="background-color: white; color: black;">
CSS기초: style 속성
<h2> 태그를 디자인적으로 바꾸고 싶다면 style 속성을 쓴다.
onclick 안에 자바스크립트가 오는 것과 마찬가지로 style 속성 안에는 CSS가 온다고 약속되어 있다.
<body>
<h2 style="background-color:coral; color:powderblue">Javascript</h2>
</body>
CSS 기초: style 태그
선택자
<div> 태그
= css나 js를 통해서 어떤 정보를 제어하고 싶을 때 그것을 감싸주는 역할을 하는 무색 무취의 태그
= 줄바꿈 됨
<span> 태그
= <div> 태그와 비슷한데 줄바꿈이 되지 않음
|
<!DOCTYPE html>
<html>
<head>
<style>
.js{
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<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>
</body>
</html>
|
css가 웹 페이지가 포함되는 방법, html과 조우하는 방법
1. style 속성
2. <style> 태그
3. 선택자 class로 여러 개의 태그를 선택하는 방법
을 배웠다.
css 기초: 선택자
css를 이용해서 웹 페이지에 있는 여러 요소들을 제어하려고 할 때 선택자가 필요하다.
그래야지만 우리가 주고 싶은 효과를 효율적으로 줄 수 있다.
| id > class > tag |
제어할 태그 선택하기
js, css, html을 잘 조화시켜서 하고자 하는 목표를 완성시키자.
| 버튼을 클릭했을 때 <body> 태그의 style 속성을 동적으로, 프로그래밍적으로, 상호작용에 의해 넣으려고 한다. |
|
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - JS</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>JavaScript</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex similique facere repudiandae ad consequuntur neque numquam ea expedita. Voluptas alias soluta nesciunt nobis officiis ab inventore architecto ipsum reiciendis ex ipsa, ullam natus perferendis, rem expedita fugiat praesentium ipsam unde recusandae necessitatibus tenetur. Assumenda eaque quasi impedit ea consequuntur debitis qui dolore ex, obcaecati porro a nulla ratione aliquam vitae esse incidunt cupiditate repellat exercitationem. Quas magni iusto, nisi repudiandae quos amet, deleniti veniam nobis nesciunt cum id ut labore, quis suscipit unde aspernatur ea! Libero impedit sint consectetur accusamus minima inventore eos necessitatibus at! Officia officiis dicta perferendis maxime.
</p>
</body>
</html>
|
document.querySelector('body').style.backgroundColor='black';
프로그램, 프로그래밍, 프로그래머
자바스크립트 프로그래밍 언어란 무엇인가? 이론적으로 되돌아보자.
동시에 프로그래밍 언어라는 것에 대한 보편적인 의미를 음미해보자.
html과 js는 둘 다 컴퓨터 언어이지만 js는 컴퓨터 언어이면서 동시에 컴퓨터 프로그래밍 언어라고 한다.
html은 컴퓨터 프로그래밍 언어라고 하지 않음.
그 차이를 이해하기 위해서는 프로그램이라는 말이 어떤 의미인지 생각해봐야 한다.
프로그램의 말에는 '순서'라는 의미가 있다.
| 프로그래밍 = 이 순서를 만드는 행위 프로그래머 = 그 순서를 만드는 사람 프로그램 = 시간의 순서에 따라 실행되어야 할 기능을 프로그래밍 언어의 문법에 맞게 글로 적어두는 방식 |
html은 웹 페이지를 묘사하는 목적의 언어이기 때문에 시간의 순서에 따라 무엇을 할 필요가 없다.
하지만 js는 사용자와 상호작용하기 위해서 고안된 컴퓨터 언어이고 그러기 위해서는 시간의 순서에 따라 웹 브라우저의 여러 기능이 실행되어야하기 때문에 프로그래밍 형태를 띄고 있다.
조건문 예고
하나의 프로그램이 하나의 흐름으로 가는 것이 아니라 조건에 따라 다른 순서의 기능이 실행되도록 하는 것
조건문 활용
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
if(document.querySelector('#night_day').value === 'night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#night_day').value = 'day';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#night_day').value = 'night';
}
">
리팩토링 중복의 제거
유지보수 쉽도록 변수를 사용해서 코드를 경량화한다.
|
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
}
">
|
var target = document.querySelector('body');
this = document.querySelector('#night_day');
배열 Array
많은 데이터를 정리 정돈하는 수납 상자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Array</h1>
<h2>Syntax</h2>
<script>
var coworkers = ["egoing", "leezhe"];
</script>
<h2>get</h2>
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>
<h2>add</h2>
<script>
coworkers.push('duru');
coworkers.push('taeho');
</script>
<h2>count</h2>
<script>
document.write(coworkers.length);
</script>
</body>
</html>
반복문
2, 3 부분을 3번 반복한다.
|
<body>
<h1>Loop</h1>
<ul>
<script>
document.write('<li>1</li>');
var i = 0;
while(i < 3){
document.write('<li>2</li>');
document.write('<li>3</li>');
i = i + 1;
}
document.write('<li>4</li>');
</script>
</ul>
</body>
|
배열과 반복문
|
<body>
<h1>Loop & Array</h1>
<script>
var coworkers = ['egoing', 'leezche', 'duru', 'taeho']
</script>
<h2>Coworkers</h2>
<ul>
<script>
var i = 0;
while(i < coworkers.length){
document.write('<li><a href="http://a.com/' + coworkers[i] + '">' + coworkers[i] + '</a></li>');
i = i + 1;
}
</script>
</ul>
</body>
|
배열과 반복문의 활용
|
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
var alist = document.querySelectorAll('a');
i = 0;
while(i < alist.length){
console.log(alist[i]);
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
var alist = document.querySelectorAll('a');
i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
">
|
| document.querySelectorAll('a') : 모든 <a> 태그를 불러온다. |
함수
반복문을 사용할 수 없을 때 사용한다.
|
<h1>Function</h1>
<h2>Basic</h2>
<ul>
<script>
function two(){
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
}
document.write('<li>1</li>');
two();
document.write('<li>3</li>');
two();
</script>
</ul>
<h2>Parameter & Argument</h2>
<h2>Return</h2>
|
함수: 매개변수와 인자
함수는 입력과 출력으로 되어 있음
| 입력 매개변수 parameter 인자 argument |
|
<body>
<h2>Parameter & Argument</h2>
<script>
function onePlusOne(){
document.write(1+1+'<br>');
}
onePlusOne();
function sum(left, right){ ← 매개변수
document.write(left+right+'<br>');
}
sum(2,3); ← 인자 argument
sum(3,4);
</script>
</body>
|
| 함수로 전달하는 2, 3 값을 argument라 하고, 이 값을 받아서 함수 안으로 매개해주는 변수(left, right)들을 매개변수라 한다. 이 2가지는 함수로 들어오는 입력 값과 관련된 것이다. |
함수 (리턴)
|
<h2>Return</h2>
<script>
function sum2(left, right){
return left+right;
}
document.write(sum2(2,3)+'<br>')
document.write('<div style="color: red">' + sum2(2,3) + '</div>');
document.write('<div style="font-size: 3rem;">' + sum2(2,3) + '</div>');
</script>
|
함수의 활용
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
var alist = document.querySelectorAll('a');
i = 0;
while(i < alist.length){
console.log(alist[i]);
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night';
var alist = document.querySelectorAll('a');
i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
</script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
|
| this → self |
객체 예고
함수와 함수와 연관된 변수들이 많아지는 상황에서 그들을 같은 이름으로 묶어서 정리하는 도구
|
<head>
<meta charset="utf-8">
<title></title>
<script>
function LinksetColor(color){
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
console.log(alist[i]);
alist[i].style.color = 'color';
i = i + 1;
}
}
function BodysetColor(color){
document.querySelector('body').style.color = color;
}
function BodySetBackgroundColor(color){
document.querySelector('body').style.backgroundColor = color;
}
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
Body.setBackgroundColor('black');
Body.setColor('white');
self.value = 'day';
Links.setColor('powderblue');
} else {
Body.setBackgroundColor('white');
Body.setColor('black');
self.value = 'night';
Links.setColor('blue');
}
}
</script>
</head>
|
객체 쓰기와 읽기
| 배열은 정보를 담는 그릇이면서, 정보가 순서대로 저장되는 특징이 있다. 순서 없이 정보가 저장되는 건 뭘까? = 객체 |
|
<body>
<h1>Object</h1>
<h2>Create</h2>
<script>
var coworkers = {
"programmer": "egoing",
"designer": "leezhe"
};
document.write("programmer: " + coworkers.programmer + "<br>");
document.write("designer: " + coworkers.designer + "<br>");
coworkers.bookkeeper = "duru"; → 객체 추가
document.write("bookkeeper: " + coworkers.bookkeeper + "<br>");
coworkers["data scientist"] = "taeho" → 객체 띄어쓰기 필요시
document.write("data scientist: " + coworkers["data scientist"] + "<br>");
</script>
</body>
|
객체와 반복문
반복문을 이용해 생성된 객체에 어떤 데이터가 있는지 모조리 다 가져온다.
|
<h2>Iterate</h2>
<script>
for(var key in coworkers) {
document.write(key+ ' : ' + coworkers[key] + '<br>')
}
</script>
|
"programmer" : "egoing" 에서 key 값은 "programmer"
객체 프로퍼티와 메소드
객체는 모든 데이터를 다 담을 수 있고, 함수도 담을 수 있다.
|
<h2>Property & Method</h2>
<script>
coworkers.showAll = function(){
for(var key in this) {
document.write(key + ' : ' + this[key] + '<br>');
}
}
coworkers.showAll();
</script>
|
coworkers → this
= 객체 이름을 변경할 시 일일히 이름 변경을 해야하는 불편 감소
객체의 활용
|
<script>
var Links = {
setColor: function(color){
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'color';
i = i + 1;
}
}
}
var Body = {
setColor: function(color){
document.querySelector('body').style.color = color;
},
setBackgroundColor: function(color){
document.querySelector('body').style.backgroundColor = color;
}
}
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
Body.setBackgroundColor('black');
Body.setColor('white');
self.value = 'day';
Links.setColor('powderblue');
} else {
Body.setBackgroundColor('white');
Body.setColor('black');
self.value = 'night';
Links.setColor('blue');
}
}
</script>
|
함수 = 코드가 많아지면 정리정돈 하는 도구,
객체 = 함수와 변수가 많아지면 서로 연관된 것을 묶어서 정리정돈하는 도구
파일로 쪼개서 정리 정돈하기
함수와 객체보다 더 큰 정리 정돈 도구, 가장 큰 정리 정돈 도구인 기능
js 파일을 html <head> 태그 내에 적용
html
|
<!DOCTYPE html>
<html>
<head>
<title>WEB</title>
<meta charset="utf-8">
<script src="colors.js" ></script>
</head>
|
js
|
var Links = {
setColor: function(color){
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'color';
i = i + 1;
}
}
}
var Body = {
setColor: function(color){
document.querySelector('body').style.color = color;
},
setBackgroundColor: function(color){
document.querySelector('body').style.backgroundColor = color;
}
}
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
Body.setBackgroundColor('black');
Body.setColor('white');
self.value = 'day';
Links.setColor('powderblue');
} else {
Body.setBackgroundColor('white');
Body.setColor('black');
self.value = 'night';
Links.setColor('blue');
}
}
|
라이브러리와 프레임워크 Library vs. Framework
다른 사람의 도움을 받아 소프트웨어를 만든다는 점은 비슷하지만,
라이브러리
= 내가 만들고자 하는 프로그램에 필요한 부품이 되는 소프트웨어를 잘 정리정돈 해놓은, 재사용하기 쉽도록 되어 있는 소프트웨어
프레임워크
= 만들고자 하는 것이 무엇이냐에 따라 필요한 공통적인 것이 있고, 달라지는 부분이 있다. 공통적인 부분은 프레임워크가 만들어 놓고 달라지는 부분만 수정해 완성하는 반제품과 같은 소프트웨어
라이브러리는 소프트웨어를 만드는 내가 라이브러리를 당겨와서 쓰는 느낌이라면,
프레임워크는 우리가 프레임워크에 들어가서 작업하는 느낌이다.
라이브러리
제이쿼리 jQuery
= js 라이브러리 중 가장 유명, 가장 오래됨, 가장 안정적
CDN Content Delivery Network
= 많은 라이브러리들이 CDN을 통해 자기들의 서버에 파일을 보관하고 우리는 그것을 script src를 통해서 가져갈 수 있도록 한다.
처리해야 될 태그들이 여러가지가 있을 때 반복문을 통해 처리해야 하지만 제이쿼리를 이용하면 반복문을 사용하지 않아도 된다. 반복문을 대신 처리해준다.
|
var Links = {
setColor: function(color){
// var alist = document.querySelectorAll('a');
// var i = 0;
// while(i < alist.length){
// alist[i].style.color = 'color';
// i = i + 1;
// }
$('a').css('color', color);
}
}
|
|
var Body = {
setColor: function(color){
// document.querySelector('body').style.color = color;
$('body').css('color', color);
},
setBackgroundColor: function(color){
// document.querySelector('body').style.backgroundColor = color;
$('body').css('backgroundColor', color);
}
}
|
| $('a') = 웹 페이지의 모든 태그를 제이쿼리로 처리하겠다. $('a').css() = element, tag의 css를 바꾸려고 할 때 |
우리가 파일로 로직을 쪼갰을 때, 자기가 프로그램을 짤 때도 도움이 되지만, 다른 사람이 짠 코드를 내 프로젝트로 가져오는 데에도 중요한 역할을 하는 것이 이렇게 파일로 코드를 정리정돈 하는 것이다.
또, js에서 가장 중요한 라이브러리 중 하나인 제이쿼리를 사용하는 가장 중요한 방법도 살펴봤다.
UI vs API
이제까지 js의 핵심적인 문법과, 웹 어플리케이션이 개선되는 과정을 살펴봤다. 중요한 개념인 UI와 API를 살펴보자.
UI User Interface
= 사용자가 시스템을 제어하기 위해 사용하는 조작 장치
API Application Programming Interface
= 어플리케이션을 만들기 위해 사용하는 조작 장치
= 모든 어플리케이션은 API를 프로그래밍적으로, 즉 순서대로 실행하는 것을 통해 만들어진다.
(API와 순서는 단어와 문법처럼, 부품과 부품의 결합 방법처럼 서로 떼려야 뗄 수 없는 관계이다.)
js와 api를 결합하고 응용해 응용프로그램을 만들 수 있다.
수업을 마치며
자신의 프로젝트를 시작할 때 모든 개념을 총동원하려고 하지 말자. 필수적인 최소 도구만을 가지고 문제 해결을 시도하자.
최소 도구란 순서에 따라 실행되어야 하는 명령들이 실행되도록 하는 것이다. 이게 프로젝트를 시작할 때 필요한 유일한 도구이다.
| 앞으로 겪게 될 한계와, 한계를 극복하는데 도움될 검색어 |
웹 페이지에 있는 어떤 태그를 삭제하고 싶거나, 어떤 태그에 자식 태그를 추가하고 싶다면 document 객체를 자세히 살펴보자.
필요한 메서드가 포함되어 있을 것이다.
document 객체에서도 찾을 수 없다면 DOM으로 수색 범위를 넓혀보자.
DOM 객체, document 객체는 DOM의 일부이다.
웹 페이지가 아니라 웹브라우저 자체를 제어해야 한다면 window 객체를 조사하자.
현재 열려있는 웹페이지 주소가 뭔지 알아내야 할 수 있고, 새 창을 열어야 할 수 있고, 웹브라우저의 화면 크기를 js를 통해 알아내야 한다면 window 객체에 속해있는 property나 method가 도움이 될 것이다.
웹 페이지를 리로드하지 않고 정보를 변경하고 싶다면 ajax가 필요하다.
현대적인 웹앱을 만드는 데 필수적인 기술이다.
웹 페이지가 리로드 되어도 현재 상태를 유지하고 싶다면 cookie가 필요하다.
cookie는 사용자를 위한 개인화된 서비스를 제공한다.
인터넷이 끊겨도 동작하는 웹 페이지를 만들고 싶다면 offline web application이 필요하다.
화상통신 웹앱 = webRTC
사용자의 음성을 인식하고 음성으로 정보를 전달할 때 = speech로 시작하는 API
3차원 그래픽으로 게임 같은 것을 만들고 싶을 때= webGL
가상현실 = webVR