생활코딩-Javascript 강의를 참고하여 정리
https://www.youtube.com/playlist?list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf
WEB2-JavaScript
www.youtube.com
javascript
사용자와 상호작용이 가능하다
웹 브라우저는 한번 화면에 출력되면 바꿀 수 없다 = js를 사용 =웹 페이지가 동적으로 작동한다
js는 사용자와 상호작용하기 위해 고안된 컴퓨터 언어이기에 시간의 순서가 필요하다.
만들기능 : 버튼을 눌러 웹 페이지를 야간모드와 주간모드로 바꿀 수 있는 기능
버튼 추가 input type =“button” value=“night”(글씨쓰기) onclick(js코드)
*<script> 태그 안쪽에 javascript의 코드가 들어옴
document.write('hello world');
alert() : 웹 상에서 이미지 박스 띄우기
<script>
alert('hi');
</script>
onclick : 속성 값으로 js가 와야 한다
->입력한 속성값은 웹 브라우저가 기억하고 있다가 클릭 했을 때 js워드가 실행된다
이런 사건을 event라고 한다
<input type=“text” onchange=“alert(‘changed’)”>
키를 눌렀을 때 이벤트 발생시키기
onkeydown=“alert(‘key down!’)”
<input type=“button” value=“day” onclick=“
document.querySelector(‘body’).style.backgroundColor=’white’”> //버튼을 눌렀을때 주간모드가 된다
콘솔을 이용하여 코드작성
우클릭 -> 검사 -> console
파일없이도 js코드를 작성할 수 있다
-alert(‘ ’.length) 문자의 개수를 알려준다
-elements에서 esc를 누르면 콘솔이 생긴다
문자와 숫자 number & String
str.length(‘’) : 문자열 길이
str.toUpperCase(); : 대문자로 변경
indexOf(‘’) : 찾고자 하는 답
변수와 대입연산자
변수 var name=’leezche’;
alert(“ “+name+” “+name+”)
강의에서 사용하는 것 이외의 색을 쓰고 싶을때
javascript color code -> color values에서 원하는 색을 찾아사용한다
- javascript select tag by css selector()
->element = document.querySelector(selectors);
- javascript element style
->var x = document().style
css코드 –> background-color:black;
js코드 –> backgroundColor=’black’;
toggle = 토글. 누르면 이름이 바뀐다
자바스크립트 조건문
if(document.querySelector('#night_day').value === 'night') {
document.querySelector('body').style.backgroundColor='DarkCyan';
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';
}
리팩토링
비효율적인 코드 고치기 -> 가독성 높이고 중복 낮추고 유지보수를 용이하게 만든다
자기 자신을 가리키는 코드 : this
인덱스 태그 참조를 this로 하기 때문에 id 선언을 제거해준다
document.querySelector('#night_day').value === 'night'
-> this.value === ‘night’
var target = document.querySelector(‘body’);
target변수는 input태그 안에서만 유효한 변수이다
javascript 배열
<script>
var coworkers = [“egoing”, “leezche”];
</script>
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>
add(추가)
coworkers.push(‘duru’);
coworkers.push(‘taeho’);
count
document.write(coworkers.length);
javascript 반복문 : loop
document.write(‘<li>1</li>’);을 일일이 만들면 효율성이 떨어진다
var I=0;
while(true) {
document.write(‘<li>1</li>’);
i = i+1;
}
->순서를 제어하기 때문에 반복문과 조건문은 제어문이라고도 함
decument.querySelecorAll(); //태그들의 목록을 담음
console.log(); //출력
함수 function
function two() { }
sum(2,3);
2,3 = 인자 = argument 값을 받아 함수안으로 매개해주는 변수 = 매개변수(parameter)
함수와 변수를 묶은 iv의 묶음 = 객체
객체에 속해있는 함수 = 메서드
객체 property & method
coworkers.showAll = function() {
for(var key in this) {
document.write(key+’+this[key]+’<br>’); }
**property가 2개일 때는 ‘,‘를 찍어서 구분한다
파일로 쪼개기(CSS에서 중복 코드를 없앨 때 사용한 방식)
script 태그를 제외한 안의 내용 color.js 파일로 복사
태그 속 코드들을 지우고,
<style src=“color.js”></script> 로 수정
수정하기 편해지고 복붙할 코드가 짧아진다. 가독성이 좋아지고 코드가 명확해진다
cash = 저장하다
라이브러리와 프레임워크
라이브러리 사용하고자하는 재사용하기 쉽게 되어있는 소프트웨어
-> 사용할 부품을 가져온다
만들고자 하는 것이 무엇이냐에 따라 언제나 필요한 공통적인 것을 프레임워크가 만들어 준다(반제품)
-> 기초뼈대가 있는 구조속에 들어간다
UI : user interface
API : application programming interface
UI : 사용자가 시스템을 제어하기 위해서 사용하는 조작장치이다 //사용자와 컴퓨터와의 상호작용 형식
API : 애플리케이션을 만들기 위해서 프로그래밍을 할 때 사용하는 조작장치들을 의미한다
인터페이스 : 두 시스템간의 상호작용 형식이다
강의 이후의 조언
공부보다는 실습. 실습보다는 프로젝트를 시작할 때이다
필수불가결한 최소한의 도구를 사용하여 문제를 해결할 것
검색키워드
프론트-> document dom 객체를 잘 살펴볼 것
웹페이지를 알고싶다면 -> window을 검색
리로드 하지 않고 정보를 변경하고 싶다면 -> ajax를 사용할 것
리로드 되어도 현재 상태를 유지하고 싶다면 -> cookie (사용자를 위한 개인화된 서비스 제공가능)
인터넷이 끊겨도 동작하는 웹페이지를 만들고 싶다면
-> offline web application
화상통신 -> webRTC
음성인식 -> speech로 시작하는 api 찾기