본문 바로가기

전체 글128

CODO Day7_Java Script_DOM Event 객체와 This 이벤트가 발생할 경우 이벤트 객체가 반환 이벤트가 발생한 당사자 요소인 this(이벤트를 당한 태그) 이 두 객체를 활용하면 복잡한 내용도 쉽게 해결할 수 있다. button 1 button 2 click 1 click 2 Event Listener 특정 요소에 특정 이벤트를 감시하는 기능을 추가 잘 사용하지 않음(주로 속성으로 사용하기 때문) 속성에 추가한 이벤트 에서 on만 빠진 형태 FOCUS NULL mouse position : Browser Object Model 브라우저(윈도우)를 모델로 봄 HTML과 Java Script는 Browser 안에서만 실행이 된다. BOM은 DOM보다 한 단계 더 큰 개념이다. Window Object Window는 브라우저 “창”을 .. 2023. 2. 9.
DOM_TEST 버튼을 누르면 글자 색상이 '빨->주->노->초->파->남->보' 순서로 변경되는 코드짜기 버튼을 누르면 글자 색상이 변경된다 빨->주->노->초->파->남->보 보라색에서 다시 클릭하면 빨강으로 되돌아 온다 글자 색상이 변경됩니다 색상변경 //색상을 차례대로 변경할 수 있도록 배열로 담아주었고 var colorList = ['red','orange','yellow','green','blue','navy','purple']; //버튼 클릭 수를 담을 수 있는 변수 i를 선언했습니다. var i = 0; //'btn'을 아이디로 가진 버튼태그를 가져와 addEventListener로 버튼을 클릭할 경우 다음 기능을 실행하도록 설정해줍니다. document.getElementById('btn').addEve.. 2023. 2. 9.
CODO Day6_Java Script_Dom(속성&이벤트) Document Object Model Java Script에서는 문서 내 객체를 가져와 속성을 다루는 역할을 함 *document 내 Tag를 가져와 opacity와 color 속성을 변경하는 과정 DOM으로 가져오기 객체(Object)의 속성(Attribute)을 다루기 위해서는 우선 객체를 가져와야 한다. HI TAG 1 HI TAG 2 HI TAG 3 HI TAG 4 HI TAG 5 H2 Tag 1 H2 Tag 2 H2 Tag 3 H2 Tag 4 H3 Tag Element 내의 속성 활용 하기 가져온 Element(요소)에서 Attribute(속성)을 다룰 수 있다. 다룰 수 있는 속성은 사용자 속성과 기본속성으로 나눌 수 있다. 링크 클릭 링크 클릭 링크 클릭 2023. 2. 8.
CODO DAY6_Java Script(배열&차원&객체) 배열 Shallow copy var a = [1,2,3,4,5]; var b = a; 두 개의 배열 관계는 복사라기 보다는 링크되어 연결된 상태임 (값이 한개가 아니라 여러개로 각각 저장하면 메모리를 많이 차지하여 따로 저장하지 않고 링크시킴) 각 배열의 값을 개별적으로 변경하여도 같은 배열을 사용하기 때문에 변경한 값이 모든 배열에 반영됨 var a = [1,2,3,4,5]; var b = a; console.log('a : ' + a.valueOf()); //a : 1,2,3,4,5 console.log('b : ' + b.valueOf()); //b : 1,2,3,4,5 a[0] = 50; b[4] = 100; console.log('a : ' + a.valueOf()); //a : 50,2,3,4.. 2023. 2. 8.
Java Script_TEST(메소드 만들기) 메소드 만들기 2023. 2. 7.
CODO DAY5_Java Script(Switch문&반복문&제어문&함수&배열) Switch(Case By Case) 특정 case마다 특정 내용을 실행 switch는 if처럼 복잡한 조건을 다루지 못하는 한계가 있음(단순한 조건) 중요한 내용을 다룰 경우 사용 속도가 빠르지만 메모리를 많이 차지함 var item = '콜라'; switch(item){ //코드는 코드블록에서 시작하면 끝까지 실행해야됨 case "콜라": console.log(item + '가 나왔습니다'); break; //break가 없다면 끝까지 내려가게 됨 case "생수": console.log(item + '가 나왔습니다'); break; //break는 진행중인 내용을 코드블록 밖으로 탈출시켜줌 case "오렌지주스": console.log(item + '가 나왔습니다'); break; default: .. 2023. 2. 7.
CODO DAY4_Java Script(연산&IF문) Java script : HTML에 동적 기능을 구현 Java Script의 특징 HTML 문서 내의 객체를 핸들링(삭제 변경 등)할 수 있다. HTML 문서 내의 css요소를 핸들링할 수 있다. 서버와 통신하여 얻은 respons를 동적으로 표현해준다.(Ajax) 자바스크립트 객체 형태의 데이터를 서버와 주고 받을 수 있다.(Json) 자바스크립트를 이용한 라이브러리들이 계속적으로 나타나고 있다.(node.js, jQuery, Electron...) Java Script 적용방법 1. html문서 내에 따로 설정(웹이 시작하자마자 필요한 요소가 아니면 body하위에서 실행해야 빠르게 돌아감) 2. js파일 외부에서 불러옴 변수란? 무언가를 담는 컵 변수 이름 : 컵을 구분하거나 가져올 수 있도록 붙이는.. 2023. 2. 6.
CSS_Test Notice 팝업하기 Opacity와 z-index를 활용해서 공지사항 띄워보기 HTML에서 배운 dialog를 활용 공지사항입니다. 공지사항 다음과 같은 사항을 공지합니다. 공지 내용1 공지 내용2 공지 내용3 닫기 Sprite image 여러장의 이미지를 하나의 이미지로 병합해 놓은 이미지 2D 도트게임에서 사용하는 개념으로 이제는 웹에서도 사용 여러 이미지를 적은 용량으로 효과적으로 사용할 수 있음 2023. 2. 6.
CODO Day3_CSS CSS(Cascading Style Sheets) : HTML을 보다 세련되게 표현 CSS 적용방법 : 해당 태그에 직접 설정 Style에서 자주 쓰는 태그 특정 영역을 지정하여 스타일을 줄 경우 사용 특정 문자열에 스타일을 줄 경우 사용 요약/상세보기 메뉴를 만들 때 사용(클릭하면 설명을 볼 수 있도록) 알림 팝업 효과를 주고 싶을 때 사용(open 속성 여부) DIV는 특정영역에 style을 주고 싶을 경우 사용한다 DIV는 특정영역에 style을 주고 싶을 경우 사용한다 DIV는 특정영역에 style을 주고 싶을 경우 사용한다 span은 특정문자에 style을 주고 싶을 경우 사용한다 details & summary details와 summarry태그 내용을 우선 보여주고 자세한 내용을 사용자가 직.. 2023. 2. 3.

티스토리툴바