➕ Language14 7. 이벤트 이벤트인라인방식🔶개념 : 태그에 직접 정의한뒤, 이벤트 속성값으로 초기화프로퍼티 방식🔶개념 : 별도의 함수로 정의한뒤, 이벤트 속성값으로 초기화인라인 VS 프로퍼티🔶공통점동일한 요소에 동일한 이벤트 타입 등록 불가능 ---> 마지막으로 사용한 코드가 처리된다🔶차이점함수대입시 순서상 함수를 먼저 처리하므로 프로퍼티 대입시 함수 소괄호 제거하여 실행실습버튼 클릭시 alert 띄우기과정◻ 1. 자바스크립트 html 태그및 id 에 이벤트 연결 클릭(인라인방식1) 클릭(프로퍼티방식1) 클릭(프로퍼티방식2 addEventListener) ![[Screenshot_441.png]]◻ 2. 인라인방식//.. 2025. 5. 29. 6. DOM DOM🔶 렌더링◻ ParsingHTML과 CSS파일을 파싱하여 각각 DOM Tree를 만드는 작업◻ Style두 Tree를 결합하여 Rendering Tree를 만드는 작업◻ LayoutRendering Tree 에서 각 노드의 이치와 크기를 계산하는 작업◻ PaintLayout에서 계산된 정보를 바탕으로 각 노드를 픽셀로 그리는 작업◻ Composite그려진 여러 레이어를 합쳐 최종 화면을 구성하는 작업🔶 DOM (Document Object Model)◻ 개념객체 형태로 쪼개는것웹페이지의 콘텐츠 구조 스타일 요소를 구조화 하여 요소애 접근및 조작을 할수있도록 제공하는 Web API◻ 구조![[Screenshot_380.png]]🔶 요소 접근 방법◻ Document◽개념 : 웹페이지 자체를 가리키.. 2025. 5. 23. 5. 객체 객체🔶개념 : 여러 데이터를 하나의 변수에 저장하는 데이터 타입🔶 구조{key1 : value1, key2 : value2, key3 : value3 ....}key : 객체의 속성(Property)values : 속성의값 / 기본자료형,참조자료형(배열,객체,함수)🔶특징◻ 많은값을 포함할수 있는 자료형이다◻ {key:val}형식으로 정보를 저장한다◻ {key:val}에 값을 추가할 경우 쉼표로 구분◻ 객체에서 정의한 값을 속성(property) 라고한다🔶종류◻ 내장 객체 (Built-in Object)자바스크립트 엔진이 구동되는 시점에서 바로제공◻ 브라우저 객체(Native Object)자바스크립트 엔진이 구동되는 시점에서 브라우저에서 바로제공◻ 사용자정의 객체(Host Object)프로그램에 필.. 2025. 5. 22. 4. 함수 🔶1. 일반함수◻ 예시◽ 선언부 function greet(){ console.log('Hello');};◽ 호출부 function greet(){ console.log('Hello');};🔶2. 일반함수 변수설정◻ 예시◽ 선언부const msg = function(){ console.log('함수표현식');}◽ 호출부msg();🔶3. 화살함수◻ 예시◽ 선언부const sqrt = n =>{ console.log(`제곱값 : ${n**2}`)}◽ 호출부sqrt(16) 2025. 5. 22. 3. 반복문 반복문🔶while문◻ 형태while(조건식){반복코드 작성}◻ 예시var cnt = 1do{ console.log(cnt,"javascript") cnt++ }while(cnt◻ 출력결과![[Screenshot_370.png]]🔶do while문◻ 형태do{반드시 실행할 코드}while(조건식)◻ 예시let num1 = 1;do{console.log(num1);num++;}while(num1◻ 출력결과![[Screenshot_371.png]]🔶for문◻ 형태for(초기화;조건식;증감식){ 반복할코드}◻ 예시for(let i=1;i◻ 출력![[Screenshot_372.png]]◻ 실습◽ 1~20 까지 숫자중 홀수,짝수의 합과 숫자들이 각각 출력되도록 하는 코드를 작성하세.. 2025. 5. 21. 이전 1 2 3 다음
