오물오물 개발일기

* 드림코딩 강의 기반으로 정리된 글 입니다. * async & defer HTML 문서는 위에서부터 아래로 차례대로 parsing 한 후 css와 병합해서 DOM요소로 변환한다. 와 사이 어디에나 위치해도 작동은 하나 위치에 따라 웹페이지 로딩의 차이, 속도 등 차이가 있다. 태그 사이에 위치 할 경우 동작 순서는 아래와 같다. parsing 하던 html을 멈추고 JavaScript를 다운받고 다시 html을 parsing하게 된다. JavaScript가 사이즈가 크거나 인터넷이 느리면 사용자가 웹사이트를 보는데 시간이 많이 소요된다. 태그의 끝에 위치 할 경우 동작 순서는 아래와 같다. HTML를 먼저 parsing 한 후 JavaScript를 다운 받는다. 사용자가 기본적인 HTML content..

* 생활코딩 강의 기반으로 정리된 글 입니다. * JavaScript - 객체(Object) : 메소드(Method) 메소드 (Method) : 객체에 소속된 함수 프로퍼티 (Property) : 객체에 소속된 변수

* 생활코딩 강의를 기반으로 정리 된 글 입니다. * JavaScript - 객체 (Object) 정보의 양이 많아졌을때 연관된 정보를 순서대로 정리정돈 하기위한 방법 (배열) 이름을 정해주고 정리정돈을 하기 위한 방법 (객체) 메모리에 탑재될때 Reference 형식으로 탑재된다. 객체를 생성해주고 모든 객체의 key와 keyValue를 나열 할 수 있다.

* 생활코딩 강의 기반으로 정리된 글 입니다. * JavaScript - function(함수) : 리턴(return) return을 이용하여 값을 도출 할 수 있다.

* 생활코딩 강의 기반으로 정리된 글 입니다. * function(함수) : 매개변수(Parameter)와 인자(Argument) function (함수)와 매개변수, 인자를 사용하여 함수를 사용 할 수 있다.

* 생활코딩 강의 기반으로 정리된 글 입니다. * JavaScript - function (함수) Function (함수) 를 선언 후엔 function명(); 으로 호출 하여 결과값 도출이 가능하다.

* 생활코딩 강의 기반으로 정리된 글 입니다. * JavaScript - Boolean '===' 기호를 이용한 Boolean 연산을 통하여 true or false 결과 값을 도출할 수 있다.

* 생활 코딩 강의 토대로 정리된 글 입니다. * JavaScript - event 사용자가 특정 동작을 했을 경우 웹에서 반을을 해주기 위함 hi button을 클릭시 (onclick) alert 창으로 'hi !' 라는 문구를 띄어주었다. 이번에는 input 창에 텍스트를 입력하거나 수정하면 (onchange) alert 창으로 'change'라는 문구를 띄어주었다. 마지막으로 input창에서 방향키를 조작하니 키입력을 감지하였다며 (onkeydown) 'key down' 이라는 문구가 뜬다.

* 생활 코딩 강의 토대로 정리된 글 입니다. * JavaScript - 맛보기 JavaScript는 사용자와 상호 작용을 하여 웹페이지를 동적으로 바꿔준다. 버튼 두개를 생성하고 night 버튼 클릭시엔 배경색이 black으로 글자색은 white로 변경 되게 작성 하였다. day 버튼 클릭시엔 배경색이 다시 white로 변경되고 글자색은 black로 변경 되게 작성 하였다.

* classList 단순히 classname으로 바꾸면 단일 동작 밖에 못하기때문에 classlist를 사용 const title = document.querySelector("#title"); const CLICKED_CLASS = "clicked"; function handleclick() { const hasclass = title.classList.contains(CLICKED_CLASS); // contains value 값이 존재하는지 확인함. if (hasclass) { // contains 안의 CLCKED_CLASS (clicked) 가 title 클래스에 있는지 확인하고 title.classList.remove(CLICKED_CLASS); // 있으면 제거하고 } else { titl..