JavaScript 기초

<script></script> : javascript 사용

 

이벤트 (사용자와 상호작용)

<input type="button" value="hi"> : 버튼 생성과 버튼 이름 hi

속성 onclick="자바스크립트 코드" : 클릭시 실행됨

 

<input type="button" value="night" onclick="

    document.querySelector('body').style.backgroundColor = 'black';

">

-> 동적으로 자바스크립트 코드 삽입 가능

 

document.querySelector("#night_day").value = "night";

-> id를 통해 value값 접근및 수정 가능

 

리팩토링

태그를 자신을 가리킬때는 this를 쓰면 편함 (this.value)

자주 쓰이는 부분은 변수로 지정

var target = document.querySelector("#night_day").value;

 

함수에서 this

함수에서 this를 쓸경우 전역변수로 쓰인다

-> 따라서 함수에서 this를 self로 고치고 매개변수로 현재 태그의 this를 받아야 한다

 

객체

var coworkers = {

    "programmer" : "egoing",

    "designer" : "leezche"

};

-> 키, 밸류(coworker.programmer 이렇게 접근 가능)

coworkers.bookkeeper = "duru";

-> 이렇게 추가 가능

coworkers["data scientist"] = "taeho"; (이것도 가능)

 

for(var key in coworkers){

     console.log(coworkers[key] + '<br>');

}

 

객체 프로퍼티와 메소드

객체의 key들을 프로퍼티라고 부름

메소드 정의

coworkers.showAll = function(){

    for(var key in this){

        document.write(key+ ' : ' + this[key] + '<br>');

    }

}

 

var Body = {

    setColor: function (color){

        document.querySelector('body').style.color = color;

    }

}

 

Body.setColor('white');

-> Body 객체의 프로퍼티 key로 접근하면 value인 함수가 나오게 되고 그 함수의 파라미터로 'white'가 전달되면서 함수 실행됨

 

파일로 관리(캐싱)

파일로 만들고

<script src="colors.js"></script>

 

라이브러리

jQuery

CDN로 사용가능 

-> <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

이렇게 태그만 추가해주면됨

 

사용법

$('a').css('color', color);

-> 모든 a태그에서 칼라 변경

 

UI vs API

UI는 사용자와 소프트웨어 간의 상호작용을 정의하고, API는 소프트웨어(앱)와 소프트웨어 간의 상호작용을 정의

 

검색 키워드

태그 관련 -> document 객체 -> DOM

웹브라우저 관련 -> window 객체

웹페이지 변경하지 않고 정보 변경 -> jQuery의 ajax 함수

웹페이지 리로드 되어도 상태 유지 -> cookie(사용자를 위한 개인화된 서비스)

인터넷이 끊겨도 동작 가능 -> offline web application