-
JavaScript (2)웹개발/JavaScript 2020. 12. 28. 22:12
· 함수
function sayHello(name, age){
console.log('Hello!', name, "you have", age, "years of age.");
}
sayHello("Nicolas", 15);
· 출력 형식
console.log('Hello!', name, "you have", age, "years of age."); //공백 자동 생성
console.log('Hello!'+ name + " you have" + age + " years of age."); //공백 자동 생성 x
console.log(`Hello! ${name} you have ${age} years of age.`); //변수가 있어야 함
- More Function Fun
const calculator = {
plus: function(a,b){
return a+b;
}
}
const plus=calculator.plus(5,5);
console.log(plus);
- JS DOM Functions
//DOM(Document Object Model)
const title=document.getElementById("title");
console.log(title); // This works!
title.innerHTML="Hi ! From JS"; //<h1 id="title">This works!</h1>에서 <h1 id="title">Hi ! From JS</h1>으로 바뀜
HTML을 DOM이 객체로 바꿀 수 있음
- Modifying the DOM with JS
· title.style.color="red"; //글자색 변경
· console.dir(document) //객체를 통해 쭉 돌아볼 수 있음
· document.title="I own you now" //타이틀 변경
-> 자바스크립트로 수정할 수 있고 HTML을 바꿀 수 있음
· document.querySelector: 노드의 첫 번째 자식을 반환
const title=document.querySelector("#title");
- Events and event handlers
function handleResize(){
console.log("I have been resized");
}
window.addEventListener("resize",handleResize);
handleResize: 필요한 시점에 호출하라는 의미
handleResize(): 지금 바로 호출
//Resize 이벤트
function handleResize(event){
console.log(event);
}
window.addEventListener("resize",handleResize);
//Click 이벤트
function handleClick(event) {
title.style.color = "blue";
}
title.addEventListener("click", handleClick);
· 사용자 입력받기
const age=prompt("How old are you");
console.log(age);
아주 오래된 자바스크립트, 사용하지 않는 것이 좋음
- DOM-If else-Function practice
· 색상 사이트
Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨
280 handpicked colors ready for COPY & PASTE
flatuicolors.com
· 클릭 이벤트 (누를 때 마다 색상 변경)
const title = document.querySelector("#title");
const BASE_COLOR="rgb(52, 73, 94)";
const OTHER_COLOR="#7f8c8d";
function handleClick() {
const currentColor=title.style.color;
if(currentColor===BASE_COLOR){
title.style.color=OTHER_COLOR;
}
else{
title.style.color=BASE_COLOR;
}
}
function init(){
title.style.color = BASE_COLOR;
title.addEventListener("click", handleClick);
}
init();
· 마우스가 들어갈 때 마다 색상 변경
title.addEventListener("mouseenter", handleClick);
· Event 검색
developer.mozilla.org/ko/docs/Web/Events
이벤트 참조 | MDN
DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가
developer.mozilla.org
· (활용) 와이파이 on/off event
function handleOffline(){
console.log("Bye Bye");
}
function handleOnline(){
console.log("Welcome back");
}
window.addEventListener("offline", handleOffline);
window.addEventListener("online", handleOnline);
· 클릭 이벤트 javascript
- .html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index(1).css" />
</head>
<body>
<h1 id="title">This works!</h1>
<script src="index(1).js"></script>
</body>
</html>
- .css
.clicked{
color:#7f8c8d;
}
- .js
const title = document.querySelector("#title");
const CLICKED_CLASS="clicked";
function handleClick() {
const currentClass=title.className;
if(currentClass!==CLICKED_CLASS){
title.className=CLICKED_CLASS;
}else{
title.className="";
}
}
function init(){
title.addEventListener("click", handleClick);
}
init();
· classList
: 메소드(Method)를 가짐
- .html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index(1).css" />
</head>
<body>
<h1 id="title" class="btn">This works!</h1>
<script src="index(1).js"></script>
</body>
</html>
- .css
body{
background-color:#ecf0f1;
}
.btn{
cursor:pointer;
}
h1{
color:#34495e;
transition: color 0.5s ease-in-out;
}
.clicked{
color:#7f8c8d;
}
-.js
const title = document.querySelector("#title");
const CLICKED_CLASS="clicked";
function handleClick() {
const hasClass=title.classList.contains(CLICKED_CLASS);
if(hasClass){
title.classList.remove(CLICKED_CLASS);
}else{
title.classList.add(CLICKED_CLASS);
}
}
function init(){
title.addEventListener("click", handleClick);
}
init();
· toggle()
위 함수와 아래 함수는 같은 역할 수행
function handleClick() {
const hasClass=title.classList.contains(CLICKED_CLASS);
if(hasClass){
title.classList.remove(CLICKED_CLASS);
}else{
title.classList.add(CLICKED_CLASS);
}
}
function handleClick() {
title.classList.toggle(CLICKED_CLASS);
}
'웹개발 > JavaScript' 카테고리의 다른 글
ReactJS (1) (0) 2020.12.31 JavaScript로 To Do List 만들기 (0) 2020.12.30 JavaScript (4) (0) 2020.12.30 JavaScript (3) (0) 2020.12.29 JavaScript (1) (0) 2020.12.28