🏠국비지원학원/📖JavaScript 수업

[JS] 학원 230328(화) each함수, attr, prop, plugin, smart editor

* each함수 (반복시키는 대상과 반복문을 합쳐 작성할 수 있다.) : jQueryObject에서 제공하는 반복 함수. - selector로 찾아낸 태그를 바로 반복할 수 있다. - 외부에 선언된 배열을 받아서 반복. 사용법) var arr=[값,,,,,]; $.each( 배열명,function( 인덱스, 배열방의 값 저장할 변수 ){ //변수 사용하면 배열 방의 값을 얻을 수 있다. }); -selector 사용 : 선택자로 찾아낸 같은 이름의 Tag(Form Control)를 반복. $(“selector”).each( function( 인덱스, 태그를 저장할 변수){ }); -radio나 checkbox에 선택된 것들만 얻어와서 반복 – 반복횟수를 최소화 할 수 있다. $(“selector:chec..

[JS] 학원 230303(금) jQuery (css설정, addClass, removeClass, events, effect, hide, show, toggle, 값얻기, 값설정, 커서요청)

* jQueryObject 함수 - CSS함수 : selector로 선택된 대상에 StyleSheet를 설정하거나 CSS속성의 값을 얻거나. * css -선택된 대상에 속성 값을 얻을 때 var value=$("selector").css("CSS속성명"); - 선택된 대상에 속성 값 하나를 설정할 때. $("selector").css("추가할 속성명", "속성값"); * addClass - style에 정의된 class를 선택된 대상에 적용시킬 때. $("selector").addClass("사용할 class명"); //class명은 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 * events 문법) $("selector").이벤트함수(function(){ //이벤트가..

[JS] 학원 230302(목) JSONArray, closure, jQuery

* JSONArray - JSONObject을 배열에 넣고 사용. 문법) [ {이름:값,,,}, {이름:값,,,}, {이름:값,,,} ,,,] * closure - 접근제한을 변경할 때 사용 (함수 안에서 선언된 변수나 함수를 함수 외부에서 사용하기 위해) - ()사용, {} 사용 두 가지 형태로 사용할 수 있다. -()를 이용한 closure //-()를 이용한 closure //선언) var 변수명=( {이름:값,,, 이름 :function(){ 코드,,,,} ,,,} ); //사용) //변수명.이름 //변수명.함수명(); * jQuery - 2006년 John Resig가 제작하여 발표. - write less, do more – 적게 쓰고 많은 일을 하기 위해 개발된 JavaScript Libra..

[JS] 학원 230228(화) 비공개, history객체, sessionStorage, localStorage, JSONObject

* 부모창에서 자식창으로 값 전달 (web browser에 따라 전달되는 브라우저도 있다. - IE) 사용법) 1. popup창을 변수에 저장 var subWin=window.open(“URL”,”id”,”attributes”); 2. 변수를 사용하여 값 전달. 변수명.window.document.자식창폼이름.control명.value=값; *JSP를 사용하여 web parameter로 값을 전달하면 브라우저에 상관없이 값 전달이 가능하다. * history 객체 - 웹 브라우저에 저장된 방문한 페이지를 사용하는 객체. - 웹 브라우저가 동작하는 경우에만 작동한다.( 웹 브라우저가 종료되면 사라진다.) - 속도향상. (웹 브라우저는 사용자가 방문한 웹사이트의 HTML를 저장한다. 뒤로가기나 앞으로 가기 ..

[JS] 학원 230227(월) 익명함수, 기명함수, location, 팝업창(popup)

* JavaScript 이벤트처리 - inline방식으로 onXxx속성을 사용하여 이벤트를 발생시키고 처리한다. - HTML Form Control을 이벤트에 등록하여 처리할 수 있는 방식. - HTML코드와 이벤트처리코드를 분리할 수 있다. 익명함수 (anonymous function) 익명함수(anonymous function) 사용. document.getElementById("아이디").onclick=function(){ 이벤트처리코드,,, } 기명함수 (named function) 기명함수(named function)사용- 이벤트를 등록하는 방식. document.getElementById("아이디").addEventListener("이벤트종류", 함수명 또는 무기명함수) 이벤트 종류는 on을 ..

[JS] 학원 230223(목) 날짜(Date), setTimeout, HTML Form Control의 값얻기, confirm, location, replace

* 날짜 - Date클래스를 사용. - 접속자 컴퓨터의 날짜 정보가 얻어진다.( 모든 접속자가 동일한 날짜정보가 아닌 다른 날짜정보가 얻어 질 수 있다.) 사용법) 1. 객체생성) – 접속자 컴퓨터의 설정된 날짜정보가 얻어진다. var date=new Date(); 2. 함수 호출) - 년도 구하기 date.getFullYear(); - 월 얻기 (컴퓨터의 월은 0월부터 시작) (date.getMonth()+1); - 일 얻기 date.getDate(); - 요일 얻기 date.getDay(); - 시간 date.getHours(); date.getMinutes(); date.getSeconds(); HTML 삽입 미리보기할 수 없는 소스 * 지정한 시간에 지정한 함수를 호출하는 함수 setTimeout..

[JS] 학원 230222(수) array, function, 사용자의 동작에 따른 함수 호출onXxx

* array - 일괄처리에 사용한다. - 일차원 배열만 지원. - 가변길이형. - 배열 방의 수를 얻기 위해서 “length “를 사용한다. ( 배열명.length ) 1.생성) – 방의 개수를 설정하지 않는다. var 배열명=new Array(); 2. 값 추가 –방의 개수가 증가 배열명[인덱스]=값; 3. 값 얻기 배열명[인덱스] 일괄 처리 for( var i=0; i < 배열명.length ; i++ ){ 배열명[ i ]; } - 배열의 초기화( 기본형 형식의 사용 ) var 배열명=[값,,,, ]; * 배열의 기능 - 검색 (indexOf) 배열명.indexOf(찾을값) //0번째 방부터 검색 수행 찾을 값에 대한 인덱스, 값이 없다면 -1이 나온다. 배열명.indexOf(찾을값, 시작인덱스) ..

[JS] 학원 230220(월) 경고창 출력(alert), HTML Body출력(document.write), console출력(console.log), const, let, prompt, 조건문, 반복문

* JavaScript - brendan Eich가 C언어로 개발한 언어, (최초 Mocha라는 이름으로 발표). (Mocha -> LiveScript -> JavaScript(1996년)) - ECMAScript의 표준사양을 가장 잘 구현한 언어. - 대부분의 웹 브라우저는 ES5를 지원한다. - 최신 버전은 ES6고, 트랜스파일러(transpiler)를 사용하여 소스변환을 수행하고 웹 브라우저에서 실행한다. ( 웹 브라우저 간의 호환성) - Vanilla JavaScript( Vanilla JS ) : 플러그 인이나 라이브러리를 사용하지 않는 순수 자바스크립트. ( 아무것도 설치하지 않아도 동작가능 ) - 사용법: inline, embed, external file 3가지 방식으로 사용할 수 있다. ..