본문 바로가기

WEB

 (88)
[HTML/JavaScript] event 처리 / 효율적인 이벤트 처리 이벤트 처리하는 방법 비효율적 눌러보셈 이벤트를 처리할 때 이렇게 해도되지만 효율적인 방법은 아니다. 효율적 //id가 one인 요소에 "click" 이벤트가 일어나면 자동으로 호출되는 함수 등록 document.querySelector("#one").addEventListener("click",function(){ console.log("두번째 버튼을 눌렀네요?"); }); 이렇게 사용해야 효율적인 방법이다. 어떻게 나오는지 차근차근 알아보자. 이 방법을 쓴 예제보기 .... https://e-you.tistory.com/162 효율적이게 만드는 방법 document.querySelector("h1") type은 h1 object이다. (h1 참조값) 이 참조값만 있으면 h1오브젝트를 마음대로 조작할 ..
[JavaScript] function type / object + function / return function type 은, 특정 시점에 일괄 실행할 자바스크립트를 모아놓기 위해서 필요하다. 기본구조 let f1 = function(){}; 다른 type과 비교 // number type 데이터를 만들어서 num1이라는 변수에 대입 let num1 = 10; // string type 데이터를 만들어서 str이라는 변수에 대입 let str = "abcd"; // object type 데이터를 만들어서 obj라는 변수에 대입 let obj = {} // array type 데이터를 만들어서 arr 이라는 변수에 대입 let arr = []; // function type 데이터를 만들어서 f1 이라는 변수에 대입 let f1 = function(){ console.log("하나"); console..
[JavaScript] dataType 합치기 / array + object 배열에는 주로 한가지 type의 데이터만 담는게 일반적이다. 하지만 프로그래밍을 하다보면 여러 type을 담아야 할 때가 많다. 그때 array 와 object를 합쳐서 사용한다. 두개를 합쳐서 사용하지만 전체를 []이 감싸고 있기때문에 data type은 배열이다. let members = [{},{},{}]; 기본 구조는 이렇게 생겼다. array안에 object들을 넣으면 된다. //배열에 object type 담기 let members = [ {num:1,name:"김구라",isMan:true}, {num:2,name:"해골",isMan:false}, {num:3,name:"원숭이",isMan:true} ]; 안에 데이터를 채워넣으면 이렇게 완성된다. 접근은 이렇게한다. >> members >> ..
[JavaScript] dataType / arrayType / splice() / push() / length 순서가 중요하지 않은 데이터들은 object type , 순서가 중요한 데이터들은 array type 으로 관리한다. arrayType 어렵지 않음! 파이썬과 비슷함 예제를 보자. let foods = ["만두","고기","케이크","스시","떡볶이"]; >> foods >> (5) ['만두', '고기', '케이크', '스시', '떡볶이'] >> foods[1] >> '고기' object / function / array 구분 object . function ( ) array [index] , . object안에는 plain object와 array가 포함되있어 array도 .이 가능하다. arrayType 수정하기 let foods = ["만두","고기","케이크","스시","떡볶이"]; //배열의 특..
[JavaScript] 데이터 타입 / let / object / delete 자바스크립트 데이터 타입을 공부해보자. 어렵지 않음!! javascript 데이터 type 데이터를 선언할 때는 let을 사용한다. javascript 데이터 type 변수에는 숫자, 문자 말고도 boolean type도 넣을 수 있다. javascript 데이터 type 변수를 계속해서 생성할 수 없으니 묶어서 생성해야한다. 자바스크립트에서는 object라고 한다. object를 만들 때는 { key1 : value1 , key2 : value2,....} 형식으로 만든다. object에 참조하기 위해서는 .을 사용한다. 이미 선언한 오브젝트에 추가, 수정, 삭제를 할 수 있다. //빈 object 를 만들고 let mem4={}; //나중에 방을 추가 할수 있을까요? mem4.num=2; mem4.n..
[JavaScript] 함수 특정시점에 자바스크립트를 일괄수행하기 위해서는 함수가 필요하다. 자바 스크립트에서 함수 만들기! 어렵지 않다 코드를 보면서 이해해보자 눌러보셈 함수를 사용하는 부분만 예제에서 가져왔다. 버튼을 누르면 사진이 바뀌는 예제이다. 먼저 함수를 정의해준다. 함수는 자바스크립트에서 정의해주어야하므로 안에 정의한다. 함수를 선언할 때는 다른 언어와 비슷하다. function 함수이름 (파라미터) { // 함수 내용 } 함수를 정의해주었으면 함수를 호출해야한다! 버튼을 클릭할 때 함수를 호출하기 위해서는 onclicked를 사용해주면 된다. 예제는 document에서 img 쿼리를 찾아서 src속성을 kim2로 바꿔준다. 응용 버전으로 버튼 두개를 만들고 클릭하면 이미지가 변하게 만들어보자. 눌러보셈 눌러보셈2 어렵..
[HTML] a / anchor / 하이퍼링크 / 책갈피 / 전화, 메일 화면 이동 태그는 하이퍼링크를 걸어주는 태그다. a 속성 href - 클릭시 이동 할 링크 target - 링크를 여는 방법 _self : 현재 페이지 (기본값) _blank : 새 탭 _parent : 부모 페이지로, iframe 등이 사용된 환경에서 쓰인다. _top : 최상위 페이지로, iframe 등이 사용된 환경에서 쓰인다. 프레임 이름 : 직접 프레임을 명시해서 사용할 수도 있다. hello.html 로 이동 daum 으로 이동 naver 로 이동 책갈피 설정 a의 속성을 이용해서 책갈피를 만들 수 있다. one two three one Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae quibusdam eveniet tempore, nec..
[HTML] form 폼 / 폼 요소 작성하기 / form, label, input 폼 (form) 이란 , 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다. 사용자가 웹사이트에 데이터를 전송하기위해 폼을 사용한다. 폼 예제 Enter your name: Enter your email: action : 데이터를 보낼 URI 또는 HTML 링크 지정 name : form의 이름, 서버로 보내질 때 이름의 값으로 데이터 전송 method : 전송 방법 설정. get/post autocomplete : 자동 완성. on으로 하면 form 전체에 자동 완성 허용 폼 안에는 LABEL 요소와 다양한 타입의 INPUT 요소를 사용하여 사용자로부터 입력을 받을 수 있다. LABEL 요소 라벨 요소는 항목이나 파일을 식별하기 위해 사용되는 제목이나 이름을 표..

티스토리툴바