JS/JavaScript (21) 썸네일형 리스트형 5. 이벤트 이벤트(Event) 1. Event: 브라우저 상에서의 동작, 행위 ex) click, keyup~press, mouseover~leave.. 2. Event Listener: 이벤트가 발생하는 것을 대기하고 있다가 발생 시 연결된 기능(함수) 수행 ex) onclick, onkeyup, onchange, onsubmit... (on이벤트) 3. Event Handeler: 이벤트와 리스너에 연결된 기능(함수), 이벤트가 발생했을 때 수행하고자 하는 함수 인라인 이벤트 모델 요소 내부에 이벤트 리스너/핸들러를 작성 (형식) on이벤트명 = "함수명()" 인라인 이벤트 function eventTest1(btn){ btn.style.backgroundColor = "pink" } 고전 이벤트 모델 요소가 .. 4. 변수와 자료형 JavaScript의 변수 var num1 num2 = 200 -> 전역변수 function test() { var num3-> 지역변수 num4-> 전역변수 if(true) { var num5 = 500 -> 지역변수 num6-> 전역변수 } } 전역변수 : 특정 함수 안에 들어가 있지 않고 밖에 나와 있는 변수로 어디서든 사용이 가능함. 키워드(var,let,const)를 쓰지 않고 변수명으로만 선언한 것은 전역변수로 선언된다. 지역변수 : 함수 내에서 선언된 함수로 함수에서 벗어나면 사용하지 못한다. 변수 선언 방식 JavaScript는 변수 선언 시 자료형이 아닌 " var, let, const, 미작성 " 키워드를 사용하여 선언한다. 1. var(변수) : 변수명 중복 가능, 함수 레벨 scop.. 3. 요소 접근 방법 DOM(Document Object Model) 웹 문서(html)의 모든 요소를 객체 형식으로 표현하는 방법 - 문서 내 특정 요소에 접근하는 방법을 여러가지로 제공 Dom을 이용한 요소 접근 방법 1. id 속성값 document.getElementById("id 속성값") 2. class 속성값 document.getElementByClassName("class 속성값") 3. tag 이름 document.getElementByTagName("tag 이름") 4. name 속성값 document.getElementByName("name 속성값") 5. css 선택자 1) document.querySelector("css 선택자") * #id, .class .. : 단일 요소 선택, 선택자가 여러개인.. 2. 입출력 innerHTML JavaScript에서 요소 전체를 읽어들이거나 변경하는 속성 - 내용을 읽어올 때 태그 + 속성 + 내용 모두 포함 - 내용을 변경할 때 태그는 html 요소로 해석 innerHTML로 읽어오기 innerHTML로 변경하기 테스트1 입니다. 안녕하세요? function getInnerHTML1() { // HTML문서 내에 id속성값을 읽어오기 const t1 = document.getElementById("test1") //브라우저 콘솔에 출력 console.log(t1.innerHTML) } // innerHTML로 변경하기(태그, 속성이 해석: HTML converter) let setInnerHTML1 = ()=> { const t1 = document.getElementByI.. 1. 개요, 입출력, 요소접근방법 스크립트 언어 기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어로, 스크립트 언어는 컴파일이 아닌 인터프리터를 이용하여 소스코드를 한 줄씩 읽어 실행한다. (컴파일에 소요되는 시간은 없으나 대신 프로그램 실행 시간은 느리다.) JavaScript란? 웹 브라우저에서 많이 사용하는 인터프리터 방식의 OOP언어로 ECMA script 표준을 따르는 대표적 웹 기술. JavaScript 작성 방법 1. 브라우저 콘솔에 직접 작성 2. 태그에 직접 js코드 작성 3. html 내부에 script 태그를 이용하여 작성(internal) 4. html 외부에 파일(.js)를 이용하여 작성(external) 1. inline 방식 inline 방식 2. internal 방식 internal방.. 이전 1 2 3 다음
