-
생활코딩 web2 - JavaScript카테고리 없음 2022. 1. 12. 08:15
22.1.12
1강. 수업소개
동적으로 사용자와 상호작용하기 위해 탄생한 javascript
2강. 수업의 목적
3강. HTML과 JS의 만남: script 태그
<script>
document.write('hello world');
</script>
document.write(1+1); =>2
4강. HTML과 JS의 만남: 이벤트
구글 검색: javascript alert경고창<input type="button" value="hi" onclick="alert('hi')">onclick의 속성값으로는 반드시 javascript가 와야 한다.어떤 이벤트가 일어났을 때 어떠한 JS가 실행되도록 하는 것
내용이 변했을 때 onchange<input type="text" onchange="alert('changed')">
구글검색: javascript keydown event attribute
=> onkeydown
5강. HTML과 JS의 만남 (콘솔)
브라우저-f12(개발자도구)-console탭-alert('ㅇ라롱'.length)
f12-elements탭에서 esc누르면 console창도 같이 뜬다.
6강. 데이터타입 - 문자열과 숫자
데이터타입=자료형
구글검색: javascript data type
number숫자 alert(1);
+: 이항 연산자, 산술 연산자(-, *, /)
string문자 "Hello world" or 'Hello world'
'Hello world'.length
구글검색: javascript string
7강. 변수와 대입 연산자
변수: 바뀔 수 있는 어떤 값.=variable
= : 대입 연산자. 오른쪽 항의 값을 왼쪽의 변수에 대입한다. 좌항과 우항의 값을 결합해서, 우항의 값을 만들어 낸다.
상수 constant : ex) 1, 2 <-> 변수
f12에서 enter치면 실행됨. 실행을 유보하고 싶으면 shift+enter
var name = 'leezche';
8강. 웹브라우저 제어
22.1.13
9강. CSS 기초: style 속성
<h2 style="color: powderblue">
구글 검색: css background color property
10강. CSS 기초: style 태그
<head>
<style>
</style>
</head>
11강. CSS 기초: 선택자
.class , #id
id는 페이지 내 한번만 사용
12강. 제어할 태그 선택하기
구글 검색: javascript select tag by css selector
document.querySelector('body')
구글 검색: javascript element style
document.querySelector('body').style
구글 검색: javascript style background-color
document.querySelector('body').style.backgroundColor = 'black';
22.1.14
13강. 프로그램, 프로그래밍, 프로그래머
둘다 컴퓨터 언어이지만,
Javascript는 컴퓨터 프로그래밍 언어이지만 HTML은 아니다.
프로그램: 순서
프로그래밍: 순서를 만드는 행위
프로그래머: 순서를 만드는 사람
14강. 조건문 예고
토글(toggle)
15강. 비교 연산자와 블리언
불리언(boolean) 데이터 타입
<h2>===</h2> 동등비교연산자
<script>
document.write(1===1); => trueboolean: true, false
데이터 타입: number, String, boolean
<h3>1<2</h3> < = <
<script>
document.write(1<2);16강. 조건문
document.write("1<br>");
document.write("2<br>");
document.write("3<br>");
document.write("4<br>");1
2
3
4
document.write("1<br>");
if(true){
document.write("2<br>");
} else {
document.write("3<br>");
}
document.write("4<br>");1
2
4
17강. 조건문의 활용
구글검색: javascript element get value
if(document.querySelector('#night_day').value === 'night'){
22.1.15
18강. 리팩토링 중복의 제거
리팩토링=코드개선
if(this.value === 'night')
var target = document.querySelector('body');
22.1.16
19강. 반복문 예고
20강. 배열
배열 array
<script>
var coworkers = ["egoing", "leezche"];
</script>
<h2>get</h2>
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>구글검색: javascript array count
<script>
document.write(coworkers.length);
</script>구글검색: javascript array add data
<script>
coworkers.push('duru');
coworkers.push('taeho');
</script>21강. 반복문 loop
var i = 0;
while(i < 3){
document.write('<li>2</li>');
document.write('<li>3</li>');
i = i + 1;
}22강. 배열과 반복문
var coworkers = ['egoing', 'leezche', 'duru', 'taeho'];
</script>
<h2>Co workers</h2>
<ul>
<script>
var i = 0;
while(i < coworkers.length){
document.write('<li>'+coworkers[i]+'</li>');
i = i + 1;
}23강. 배열과 반복문의 활용
구글검색: javascript get element by css selector multiple
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}22.1.17
24강. 함수예고
함수 function
function nightDayHandler(self){
}25강. 함수
파라미터parameter, 아규먼트argument, 리턴return
function two(){
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
}
two();26강. 함수: 매개변수와 인자
함수는 입력과 출력으로 이루어짐.
입력에 해당하는 것이 parameter,=매개변수, argument,=인자
출력에 해당하는 것이 return
function sum(left, right){
document.write();
}left, right가 매개변수(parameter)
sum(2,3);
2,3이 인자(argument)
27강. 함수(리턴)
표현식expression: 2에대한 표현식(1+1), 1에 대한 표현식(2-1)
function sum2(left, right){
return left+right;
}28강. 함수의 활용
22.1.18
29강. 객체 예고
객체 object
document.querySelectorAll('a');
document가 객체
객체에 속해 있는 함수는 함수라고 하지 않고 메소드method라고 부른다.
30강. 객체 쓰기와 읽기
배열은 정보를 담는 그릇이면서, 순서에 따라서 정보를 정리정돈한다.
객체는 정보를 순서없이 저장한다. 객체는 이름이 있는 정리정돈 상자.
var coworkers = {
"programmer": "egoing",
"designer": "leezche"
};
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>");22.1.19
31강. 객체와 반복문
구글검색: javascript object iterate
for(var key in coworkers) {
document.write(key+'<br>');
}for(var key in coworkers) {
document.write(key+' : '+coworkers[key]+'<br>');
}32강. 객체프로퍼티와 메소드
coworkers.showAll = function(){
for(var key in coworkers) {
document.write(key+' : '+coworkers[key]+'<br>');
}
}
coworkers.showAll(0;)coworkers.showAll = function(){
for(var key in this) {
document.write(key+' : '+this[key]+'<br>');
}
}메소드: 객체에 소속된 함수
프로퍼티: 객체에 소속된 변수 programmer, designer
33강. 객체의 활용
var Body = {
setColor: function(color){
document.querySelector('body').style.color = color;
},
setBackgroundColor: function(color){
document.querySelector('body').style.backgroundColor = color;
}
}22.1.24
34강. 파일로 쪼개서 정리 정돈하기
<script src="color.js"></script>
22.1.25
35강. 라이브러리와 프레임워크
다른 사람이 만든 소프트웨어를 부품으로 해서, 그 소프트웨어를 소비해서 내가 만드는 소프트웨어의 생산자가 되는 방법
library vs framework
라이브러리: 내가 만들고자하는 프로그램에 필요한 부품이 되는 소프트웨어를 잘 정리정돈해놓은, 재사용하기 쉽도록 되어 있는 소프트웨어.
ex) jQuery(cdn으로 script src코드복붙 구글검색: jquery css
$('a').css('color', color);)
프레임워크: 만들고자 하는 것이 무엇이냐에 따라서, 그것을 만들려고 할 때 언제나 필요한 공통적인 것이 있고, 그 공통적인 부분은 프레임워크.
36강. UI vs API
UI: User Interface 사용자가 시스템을 제어하기 위해서 사용하는 조작 장치 ex) 버튼
API: Application Programming Interface 애플리케이션을 만들기 위해서 프로그래밍을 할 때 사용하는 조작장치 ex) alert함수
37강. 수업을 마치며
웹페이지에 있는 어떤 태그를 삭제하고 싶거나, 어떤 태그에 자식 태그를 추가하고 싶다면 document객체를 좀더 자세히 살펴 보세요.
document에서 찾을 수 없다면 DOm(Document Object Model)으로 수색 범위를 넓혀 보세요.웹페이지가 아니라 웹브라우저 자체를 제어해야 한다면, window객체를 조사해 보세요. 현재 열려 있는 웹페이지 주소가 뭔지 알아내야 될 수도 있고, 새 창을 열어야 될 수도 있고, 웹브라우저의 화면 크기를 javaScript를 통해 알아야 한다면 window객체.웹페이지를 리로드하지 않고 정보를 변경하고 싶다면 ajax 가 필요.웹페이지가 리로드되어도 현재 상태를 유지하고 싶다면 cookie를 배우세요. cookie와 함께 라면 사용자를 위한 개인화된 서비스를 제공할 수 있습니다.인터넷이 끊겨도 동작하는 웹 페이지를 만들고 싶다면 offline web application을 찾아보세요.화상 통신 웹 앱을 만들고 싶다면 webRTC사용자의 음성을 인식하고 음성으로 정보를 전달하고 싶다면 speech로 시작하는 API들을 살펴 보세요.3차원 그래픽으로 게임과 같은 것을 만들고 싶다면 webGL을 살펴보세요.가상현실 webVR