JavaScript
-
JavaScript DOM (Document Object Model) 개요, Method, 활용JavaScript/JavaScript 2019. 12. 25. 01:55
191224 수업 내용 정리 DOM (Document Object Model) ▶ html 문서나 xml문서를 읽어들여 그 문서의 구조(tree)대로 메모리(Ram)에 태그정보를 만들어서 관리해주는 API ※ 동적인 화면디자인에 사용 DOM Method 메서드 설명 getElementById("id명") 해당 id값의 요소를 가져옴 getElementsByTagName("태그명") 해당 태그명에 해당하는 모든 요소를 가져옴 createElement("태그명") 해당 태그명의 요소를 생성 createTextNode("출력할 문자열") 요소 내부에 포함될 문자열 생성 innerHTML속성과 동일 태그명.setAttribute("속성명", "속성값") 이미 생성된 태그에 속성을 부여 부모태그.appendChi..
-
JavaScript 이벤트(Event) 개요 및 간단한 활용, 게시글 보호팁JavaScript/JavaScript 2019. 12. 25. 01:40
191224 수업 내용 정리 이벤트(Event) 운영체제가 인식가능한 사용자들의 모든 행동 (키보드, 마우스) + 스크린터치 이벤트 발생 대상자 종류 이벤트핸들러(EventHandler) on + 이벤트종류명 = "함수" click 마우스 클릭 onclick="" load 문서(html)를 읽어들일때 onload="" unload 현재 사이트 → 다른 사이트 이동 onunload="" (IE O, chrome X) change 콤보박스에서 특정한 항목을 선택하면 발생되는 이벤트 onchange="" mouseover 마우스를 대상 위에 올리면 발생 onmouseover="" mouseout 특정위치에서 마우스포인터가 벗어날때 onmouseout="" Blur input type="text"에서 커서가 밖..
-
JavaScript 배열(Array) 개요 및 작성법, Method 몇 가지JavaScript/JavaScript 2019. 12. 25. 01:22
191224 수업 내용 정리 배열(array) 같은 자료형의 변수들을 모아둔 집합체 (문자열은 문자열끼리, 숫자형은 숫자형끼리 묶어야함) ※ 자바스크립트는 서로 다른 자료형의 값을 묶어줄 수 있음 ※ 배열의 요소는 서로 연속적임 순서는 0번부터 시작 많은 양의 값(데이터)을 다룰 때 유용 비슷한 변수를 여러가지 선언하는 것 보다 효율적 여러 변수 선언시 : 여러 변수를 메모리에 무작위로 저장 → 불러오는 속도가 느려짐 배열 사용시 : 변수의 갯수가 1개로 통합 → 메모리에 연속적으로 저장 → 속도 향상 형식 배열이름(변수의 대표이름) = new Array(요소1, 요소2,,,); var 배열이름 = [요소1, 요소2,,,]; 예제 a = new Array("배열", "인덱스", "길이", "추가"); v..
-
JavaScript 중첩 if문JavaScript/JavaScript 2019. 12. 25. 01:17
191224 수업 내용 정리 중첩 if문 if문 내부에 또 다른 if문이 들어간 제어문 형식 if(조건식1){ if(조건식2){ 자바스크립트 코드; } } 예제 JavaScript function test() { var sel = ""; //선택한 그림을 알려주는 문자열 변수 if( (document.myform.a1.checked==false)&& (document.myform.a2.checked==false)&& (document.myform.a3.checked==false) ){//체크가 안 된 경우 alert("최소 한 가지의 그림은 선택해 주세요"); } else { //최소 한 개라도 체크된 경우 if(document.myform.a1.checked) { //그 자체로 true/false 값을..
-
JavaScript 선택문(Switch~case문)JavaScript/JavaScript 2019. 12. 23. 23:24
191223 수업 내용 정리 선택문 switch~case 문 몇 가지 값이 정해져 있는 경우에 함수를 제어하기 용이함, else if문보다 속도가 빠름 형식 switch(변수){ case 값1: 코드1; //값1에 해당하는 변수가 들어오면 코드1을 실행 break; // ※탈출문, 케이스1의 경우에 함수에서 빠져나감(종료) case 값2: 코드2; break; case 값3: 코드3; break; default: 코드4; //설정한 값 중에 일치하는 값이 없다면 default에 해당하는 코드4가 실행됨 } 예제 : div 박스 색깔 변경 버튼 만들기 //JavaScript function setColor(n) { var box = document.getElementById("box"); /* getEle..
-
JavaScript Else If 문JavaScript/JavaScript 2019. 12. 23. 23:14
191223 수업 내용 정리 else if 문 조건식에 따라서 처리할 문장이 하나 이상인 경우에 사용, 실행속도가 느려짐 형식 if(조건식1){ 자바스크립트 코드; // 조건식1이 참인 경우 실행 } else if(조건식2){ 자바스크립트 코드2; // 조건식1이 거짓이고, 조건식2는 참인 경우 실행 } else if(조건식3){ 자바스크립트 코드3; } else { 자바스크립트 코드4; // 모든 조건식이 거짓인 경우 실행 } 순서도 예제 : 입력 값에 따라 페이지에 출력되는 내용 제어하기 var qs = prompt("당신이 좋아하는 언어는? 1.자바 2.자바스크립트 3.C언어", ""); if((qs == "자바") || (qs=="1")) //조건식 : 변수, 수식, 연산자 document.wri..
-
JavaScript 제어문 개요 및 If 문JavaScript/JavaScript 2019. 12. 23. 22:54
191223 수업 내용 정리 제어문 제어문 : 특정한 조건에 따라서 실행될 수도 되지 않을 수도 있는 문장 ▶ 조건문, 선택문, 반복문 ↔ 순차문 : 코딩 순서대로 실행이 되는 구문 조건문 조건식의 값이 true인지 false인지에 따라 자바스크립트 코드를 제어함 if 문 조건식의 값이 true일 때 함수를 실행 형식 if(조건식){ //변수, 수식(계산식 -> 논리, 관계) 자바스크립트 코드; } // Block {} : 실행 범위 지정, 코드가 한 문장이라면 생략 가능, 1:1 대응 관계 예제 var num = 5; if(num < 10){ document.write("안녕"); } else 문 if문의 조건식이 false일때 함수를 실행 형식 if(조건식){ 수행1; // 조건식이 true일 때 }..
-
JavaScript 내장함수 삼총사(alert, prompt, confirm)JavaScript/JavaScript 2019. 12. 23. 22:38
191223 수업 내용 정리 내장함수(alert, prompt, confirm) 자바스크립트 내부에 기본적으로 존재하는 함수 alert() 경고성 문장을 출력할 때 사용하는 함수 alert("이름은 \n필수입력입니다."); //브라우저에 경고창 팝업, \n : 줄바꿈 prompt() 사용자로부터 값을 입력 받아 출력시킬 때 사용하는 내장함수 ※ prompt(" ", " ")처럼 두번째 매개변수로 기본값을 설정할 수 있음 prompt("당신의 이름을 입력하세요"); //브라우저에 값을 입력 할 수 있는 알림창 팝업 var name = promt(""); /* prompt()는 매개변수와 반환값이 있는 함수이기 때문에 반환값을 저장할 변수를 선언해야함 */ document.write("당신의 이름은 "+na..