RoseDevlog

Language/JS

🌻 배포 링크 https://vanilajs-todolist.vercel.app/ 과제1. VanillaJS TODO Things to be done SAVE CLOSE vanilajs-todolist.vercel.app 🌻 Key Question [ DOM은 무엇인가요? ] 파싱 프로그램이 런타임 환경에서 실제로 실행될 수 있는 포맷으로 분석하고 변환하는 것 브라우저 내부의 자바스크립트 엔진이 이에 해당하는데 브라우저는 HTML을 DOM tree로 파싱합니다. HTML 파싱은 Tokenization과 DOM Tree를 포함합니다. DOM HTML에 접근하기 위한 일종의 인터페이스 단순한 텍스트 파일을 브라우저에 렌더링하기 위해 브라우저가 이해할 수 있는 구조로 메모리에 올려야 합니다. DOM API ..

2024. 3. 17.

Language/JS

1. .js 파일 생성 태그를 제외하고 공통된 코드를 js 파일에 분리 src : source의 약자 js 파일 불러오기 2. jQuery 라이브러리 CDN에 보관된 라이브러리를 사용자가 를 통해 가져올 수 있음 https://developers.google.com/speed/libraries?hl=ko#jquery 호스팅된 라이브러리 | Hosted Libraries | Google Developers 가장 많이 사용되는 오픈소스 자바스크립트 라이브러리를 위한 안정적이고, 안정적이며, 속도가 빠른, 전 세계적으로 제공되는 콘텐츠 배포 네트워크입니다. developers.google.com

2023. 3. 19.

Language/JS

method : 객체에 속해 있는 함수 1. 객체에서 데이터 불러오기 배열은 [] 객체는 {} 객체 이름 : programmer, designer coworkers 변수에 객체 담기 2. 객체의 데이터 순회하기 for loop coworkers에 있는 key값 출력 3. 객체에 메소드 추가하기 객체에 소속된 변수에 메소드 추가 4. 메소드 객체화 Body 변수에 객체 담기 객체의 property(setColor , setBackgroundColor)로 메소드 생성

2023. 3. 17.

Language/JS

JS Document() https://developer.mozilla.org/en-US/docs/Web/API/Document/Document Document() - Web APIs | MDN The Document constructor creates a new Document object that is a web page loaded in the browser and serving as an entry point into the page's content. developer.mozilla.org JS Element() https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event Element: click event - Web APIs | ..

2023. 3. 14.

Language/JS

1. 함수구조 에 주로 정의 됨 function 함수이름() { ~~~~~~~~ .................. } 2. 매개변수와 인자 3. 리턴

2023. 3. 12.

Language/JS

1. 배열 [ ]안에 ""로 값을 구분 Syntax get //배열의 요소 추가하기 add //배열의 요소 개수 확인하기 count 2. 배열과 반복문 https://a.com/coworkers이름 링크를 배열의 요소 개수만큼 생성 Loop & Array Coworkers 3. 변수 활용 document.querySelector('a') : 첫번째 a 태그 document.querySelectorAll('a') : 스크립트의 모든 a 태그 //a 태그들의 등장순서대로 배열 생성 var alist = document.querySelectorAll('a'); var i =0; while(i < alist.length){ alist[i].style.color ='pink'; i = i+1; } ** conso..

2023. 3. 11.

Language/JS

if else === : 비교 연산자 (true/false) document.querySelector('#ID').value : ID값의 value 가져오기 또는 id대신 this를 사용해서 리팩토링 중복 제거 중복된 부분은 var target 처리

2023. 3. 9.

Language/JS

JavaScript select tag by CSS Selector querySelector element = document.querySelector(selectors); style.backgroundColor = "black" javascript element style

2023. 3. 9.