JavaScript 강의 및 실습 정리!

• JavaScript : 기본적으로 html에 덮어씌어짐

<input type="button" value="hi" onclick="alert('hi')"> 
 : hi 라는 버튼 만들고 , 클릭시 hi 라는 경고문 출력

<input type="text" onchange="alert('changed')">
 : 입력이 가능한 text 상자를 만들고, text의 값이 변경되면 changed 라는 경고문 출력

<input type="text" onkeydown="alert('key down!')">
 : 입력이 가능한 text 상자를 만들고, key가 눌리면 key down! 이라는 경고문 출력

type 종류(text, button ...)
event 종류(onclick, onchanged, onkeydown ...)
onclick 속성 뒤에는 js 문법이 와야함

-> 콘솔로도 JS 구현 가능, inspect 검사 도구에서 console 클릭!(웹페이지를 대상으로 JS 실행)

JS data types

1. String
2. Number
3. Bigint
4. Boolean
5. Undefined
6. Null
7. Symbol
8. Object

string type 길이 찾기 : str.length
특정 문자열 찾기 : str.indexOf('string') - 찾을 수 있으면 해당 문자의 시작 위치 리턴 , 없으면 -1 리턴
공백 지우기 : str.trim()

변수 선언 : var name = 'leezche';

js로 css 선택자를 통해 tag 선택하기 - document.querySelector('tag')

• sytle tag 수정하기 - document.querySelector('tag').style.backgroundColor = 'black';

togle 버튼 (feat. 조건문 활용)

js로 tag value를 가져오기 : document.querySelector('tag').value;

** js의 등호 연산자 "==="

this keyword : 자기 자신을 참조하는 변수

또 다시 강조하는 코딩의 핵심 -> 중복의 제거!!!

특정 tag에 해당하는 모든 요소 찾기 : document.querySelectorAll('tag'); - list형태로 저장

콘솔창에서 출력 : console.log( ~ );

각 list를 배열의 요소처럼 다루며 각 속성을 변경!

    var alist = document.querySelectorAll('a');
    var i = 0;
    while(i<alist.length){
        alist[i].style.color = 'blue';
        i+=1;
    }

Code Refactoring
함수 -> 유지, 보수 능률 급격히 상승! (구성 요소 : 인자 & 본문 & 리턴 값)

기존의 본문에서 this가 원하는 요소를 가리켰을지라도 함수로 정의되면
this는 해당 함수가 정의된 곳에 따라 다르게 해석될 수 있음!
따라서 self라는 새로운 인자를 도입하여 적용시키면 올바르게 적용이 가능함

객체

객체 생성(프로퍼티 포함) :
var coworkers = {
"programmer":"egoing",
"designer":"leezche"
};
coworkers.bookkeeper = "duru";
coworkers["data scientist"] = "taeho";

프로퍼티에 공백이 있을 땐, 대괄호를 활용하여 배열처럼 저장하기/불러오기!

• coworkers 객체 : 프로퍼티 정보 (programmer , designer, bookkeeper, data scientist)

객체 반복문
: for(var key in coworkers){
document.write(key+'
');
}

• coworkers가 지닌 모든 key값 출력

객체에 소속된 함수(메소드) 저장
: coworkers.showAll = function(){
for(var key in this){
document.write(key+' : ' +this[key]+'
');
}
}

파일 -> 중복된 코드 제거 & 유지보수 간편

파일 > 객체 > 함수 : 모두 중복된 코드를 제거하기 위한 장치

위 요소들이 효율적으로 작동하는 이유 : cash 메모리 때문 (한번 다운 받은 파일을 저장해둠)
-> 서버 입장에서 비용절감, 사용자 입장에서도 시간 절약 가능!

library vs framework

JQuery library 활용

UI(user interface) vs API(application programming interface)

<검색어 정리>

웹 페이지의 tag를 삭제하고 싶거나 자식 tag를 추가하고 싶으면 document 객체 & DOM 객체 조사
웹 브라우저 자체를 제어하고 싶으면 window 객체 조사
웹 페이지를 reload 하지 않고 수정하고 싶다면 ajax 조사
웹 페이지가 reload 되도 현재 상태를 유지하고 싶다면 cookie 조사
인터넷이 끊겨도 동작하는 웹 페이지를 만들고 싶다면 offline web application 조사
화상 통신 웹 앱을 만들고 싶다면 webRTC 조사
사용자의 음성 인식 & 음성 정보를 전달하고 싶다면 speech로 시작하는 API 조사
3차원의 게임과 같은 것을 만들고 싶다면 webGL 조사
가상현실에 대해 관심이 있다면 webVR 조사