게으른 나에게

웹사이트 동작 방식(웹서비스 만들고 싶을 때)사용자가 내 사이트를 접속 했을 때 html 파일을 만들어서 보내주면 이 html 파일을 크롬에서 열 수 있음server: html 파일 보내주는 프로그램 server에서 html 파일 보낼 때 방식1. server-side rendering서버에서 완성된 html 파일 보내주는 것 2. client-side rendering빈 html 파일 + 데이터 따로 보내주는 것 (html 완성은 JS가 함) 데이터바인딩: html에 데이터 넣는 것

Array 자료형[자료1, 자료2, 자료3 ... ] 자료 저장자료 출력자료 추가자료수정 sort : 자료간 정렬 (가나다 순) slice : 자르기 (1번부터 3번 전까지) Object 자료형{이름1: 자료1, 이름2: 자료2..}{key: value} 자료 저장자료 출력자료 수정 안에 아무거나 넣을 수 있음object, array 넣기도 가능값 출력  Array / Object 차이점Array : 순서대로 저장Object: key, value로 저장, 순서 X

function( e ) { }콜백함수에 e를 넣으면 -> 유저가 실제로 누른 이벤트 타겟 요소(이벤트 발생한 곳)e.target; 이벤트리스너 달려 있는 곳e.currentTarget; 이벤트 기본동작 막아주는 것 (클릭 안한 것 처럼 동작)e.preventDefault( ); 상위요소로 이벤트 버블링 막아주는 것e.stopPropagation( );

Scroll은 페이지 로드 완료시 실행해야 정확하다. 태그 끝나기 전에 넣는게 좋다. 현재 페이지 실제 높이document.querySelector('html').scrollHeightdocument.documentElement.scrollHeight 현재 페이지 보이는 부분 높이document.querySelector('html').clientHeight 현재 페이지 스크롤양document.querySelector('html').scrollTopwindow.scrollY

문자 검사 방법 (포함)'문자'.includes('찾을 단어") 문자 검사 방법 (테스트)'문자'.test('찾을 단어')

setTimeout(function( ) { 실행할 함수 }, ms) -> ms 후에 함수 실행 setInterval(function( ) { 실행할코드 }, ms)-> ms 마다 코드 실행   콜백함수 자리엔 만들어 둔 함수 넣을 수 있음 setTimeout( 함수 , ms)

변수 선언: 변수 만들기var = 계절;var = 꽃; 변수 할당: 변수에 값 넣기var = 계절;var = 꽃;계절 = '봄', '여름';꽃 = '해바라기; 변수 범위: 함수 안, 함수 밖함수 안 - 안에서만 사용 가능함수 밖 - 밖, 안에서 둘 다 사용 가능 변수 종류: let, var, const  varletconst재선언OXX재할당OOX범위function- scoped{Block-scoped}{Block-scoped}

[form]은 서버로 유저 정보를 전송하려고 쓰는 것 submit">전송제출 버튼타입은 무조건 submit / 나머지 버튼 타입은 button  [조건문]if (조건식) {조건, 참 : 실행할 코드} else {조건, 거짓 : 실행할 코드} if (조건식) {조건, 참 : 실행할 코드} else if (조건식) {조건, 참 : 실행할 코드} else {조건, 거짓 : 실행할 코드} else if 무한 사용 가능.else if 앞에 if문 이 참이면 실행 안 함. truthy 자료0제외 숫자, '문자', [ ], { }falsy0, ' ', null, undefined, NaN

html 파일 안에 내용을 조작하는 방법. 태그 안에 자바스크립트 코드 작성. [기본 문법] 셀렉터 : .getElementById() 메소드(함수): .innerHTML / .style / .color .. document.셀렉터(' ').메소드(함수) = ' '; 버튼 getElementsByClassName('클래스명')[순서] 순서 반드시 작성 필요. getElementsByTagName -> 태그명으로 찾아줌 getElementsByName -> name 속성으로 찾아줌 document.getElementsByClassName(' ')[0].style = ' '; [function 문법] 긴 코드를 축약하고 싶을 때 사용 funcion 작명( ) { 실행할 코드 } 버튼 [function 파라미..

jQuery: 자바스크립트의 생산성을 향상 시켜주는 js 라이브러리 jQuery cdn 검색 -> jQuery 3.x 버전  [기본 문법]$(제어대상).method1().method2(); querySelector / querySelectorAll = $addEventListener = on document.querySelector('.a').innerHTML = "하이";==> $('.a').html = "하이"; document.querySelector('.a').sytle = "하이";==> $('.a').css('color', 'red) document.querySelector('.').addEventListener('click', funtion() {});==> $('.').on('click',..