front-end/javascript (28) 썸네일형 리스트형 Javascript DOM - CSS선택자로 가져오기 DOCTYPE html> CSS 선택자로 선택 CSS 선택자로 선택 갖고 싶은 위시 리스트 맥북 헤드셋 기계식 키보드 아파트 레인지 로버 아이맥 // ul 안의 자식 가지고 오기 const items = document.querySelectorAll("ul li"); console.log(items); // 내용에 "맥"이 포함되어 있으면, 글자 색상을 pink로 변경 items.forEach((item)=>{ if(item.innerText.includes("맥")){ item.style.color = "pink" } }); DOCTYPE html> CSS 선택자로 선택 실습 CSS 선택자로 선택 실습 명함 짱구 훈이 유리 맹구 철수 // 짱구와 맹구만 이름 뒤에 "님"을 붙여준다. // 나머지 인원은.. Javascript DOM - id로 가져오기 DOCTYPE html> 아이디 속성 선택 아이디 속성 선택 첫 번째 DIV입니다. 두 번째 DIV입니다. 세 번째 TEXTAREA입니다. const first = document.getElementById("first"); const second = document.getElementById("second"); const third = document.getElementById("third"); // value는 항상 입력된 값을 답아준다. // 미리 작성한 값ㄷ은 value가 알 수 없다. console.log(first.value); //undefined console.log(second.value); //undefined // innerText는 [ 미리 작성한 값 ]을 담아준다. // 접근한 객.. Javascript DOM - name으로 가져오기 DOCTYPE html> name 속성 선택 C언어 JAVA Python // form태그의 name에 작성한 이름으로 객체가 자동 생성된다. // document.${form태그의 name값}으로 form객체를 가져온다. console.log(document.join); console.log(document.join['user-id']) // form은 forEach 존재한다. // form 태그 안에 있는 name도 form객체의 property(속성)명이다. // form 태그 안에 있는 input태그 중 name이 'user-id'인 객체를 가져올 때 아래와 같이 작성한다. document.join['user-id'] // DOM객체를 통해 getElementsByName()을 사용할 수 있으나,.. Javascript DOM - class로 가져오기 DOM(Document Object Model) HTML 태그들을 하나씩 객체화 한 것. HTML 페이지의 내용과 모양을 제어하기 위해서 사용되는 객체이다. HTML 태그 당 DOM 객체가 하나씩 생성된다. HTML 태그의 포함 관계에 따라서 부모, 자식, 형제자매 관계로 구성된다. 모든 HTMLCollection 객체에 쓸 것임. [ 중요 ] 모든 객체가 공유하는 문법 prototype prototype은 모든 HTMLCollection 객체들이 사용할 수 있는 공용 HTMLCollection에는 원래 forEach가 없었는데 그래서 새롭게 선언한다. 없었던 것을 (forEach)새롭게 추가하고 프로퍼티에 property에 Array에 있는 forEach function을 넣는다. 내가 만들 필요 없이.. Javascript 모듈화 + 비동기 처리 3 task03.html DOCTYPE html> TASK03 TO-DO LIST todoService.listAll(layoutService.listLayout); todoService.getOneToDo(3, layoutService.todoLayout); service03.js const todoService = (() => { const listAll = async (callback) => { const response = await fetch( "https://jsonplaceholder.typicode.com/todos" ); const todos = await response.json(); if (callback) { callback(todos); } }; const getOneToDo = as.. Javascript 모듈화+비동기 처리 2 task02.html DOCTYPE html> TASK02 게시글 전부 가져오기! postService.getAll(postsLayout.showPostList); service02.js // 통신의 역할만 수행! const postService = (() => { const getAll = async (callback) => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); if (callback) { callback(posts); } }; const getPostById = async (id, callback) => { const respons.. Javascript 모듈화+비동기 처리 1 service 에서 // findAll이 동기일 때 // Promise 기반의 비동기 코드를 동기 코드처럼 보이게, 읽기 쉽게 const userService = ((callback) => { const findAll = () => { fetch("https://jsonplaceholder.typicode.com/users") .then((response) => response.json()) .then((users) => { if (callback) { callback(users); } }); }; const findById = () => {}; })(); // 둘 다 같은 비동기 함수 async function test() {} const test = async () => {}; async와 await.. Javascript Date // Date객체의 주요 메소드 getFullYear(): 4자리 년도 getMonth(): 0~11사이의 정수(0: 1월, 1: 2월, ..., 11: 12월) getDate(): 한 달 내의 날짜(28~31) getDay(): 한 주 내 요일(0: 일요일, 1: 월요일, ..., 6: 토요일) getHours(): 0~23사이의 정수 getMinutes(): 0~59사이의 정수 getSeconds(): 0~59사이의 정수 getMilliseconds(): 0~999사이의 정수 getTime(): 1970년 1월 1일 0시 0분 0초 기준 현재까지의 밀리초 setFullYear(year): 년도 저장 setMonth(month): 월 저장 setDate(date): 한 달 내의 날짜 값 지정 setHo.. 이전 1 2 3 4 다음
