<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
'웹 프로그래밍 > 프론트 엔드' 카테고리의 다른 글
타임리프(스프링 통합과 폼) (0) | 2023.04.13 |
---|---|
Thymeleaf(타임리프) 기본 (0) | 2023.04.11 |
Thymeleaf(타임리프) 기초 (0) | 2023.04.11 |
CSS 기초 (0) | 2023.04.02 |
HTML 기초 (0) | 2023.04.01 |