클라이언트사이드 이벤트(event) -> 이벤트가 발생하면 원하는 JavaScript 코드를 실행되도록 할 수 있음. [자바 스크립트는 Jquery를 위해서 배웠다 ] 이벤트? 사용자가 웹브라우저에서 하는 모든 행위를 상세하게 구분하여 이벤트로 규정 (마우스클릭) onmousedown onmouseup onclick ondblclick (마우스이동) onmouseover onmouseout등등 (키보드누르기) onkeydown onkeyup onkeypress 폼(form) 입력(input) onblur onfocus onfocusin onfocusout onsubmit onchange 윈도우 조작 onresize onscroll onload onunload 등등 이벤트 속성은 전부 소문자로 처리한다. ..

클라이언트사이드 문서 객체 선택 여러 가지 방법으로 HTML 요소를 선택 가능 id : document.getElementByld("id") - 이것은 배열에 담기지않음 문서 내의 요소들 중에서 속성 id가 'id'와 일치하는 요소 하나 선택 tag name document.getElementsByTagName("h1") - 반드시 복수로 해야함(상황에 따라서 다름) 문서 내의 모든 "h1"요소들을 선택 - 배열에 담아옴 (여러개를 하기에 배열이 필요 class name document.getElementsByClassName("cls") HTML class 속성은 클래스 이름이 동일한 스타일을 정의하는 데 사용됨 동일한 class 속성을 가진 모든 HTML요소는 동일한 스타일 갖습니다. css sele..

클라이언트사이드 브라우저객체모델 (Browser Object model) (window, location, navigator, history, screen,document) 위에 잇는 것은 변수선언 ㄴ 브라우저 기능들을 제공하는 객체틀 window - 브라우저 객체 구조에서 최상위 브라우저의 기본 토대를 제공하는 중요한 객체 생성, 삭제, 수정등을 포함하는 모든 동작의 출발점 var로 선언한 변수들은 모두 windows객체의 속성이 됨 공개된 표준이 적용되는 객체가 아니지만 브라우저마다 모두 제공함 메소드 ->alert(msg) 경고창으로 메시지 출력 ->prompt(msg, ) msg를 출력하고 입력 문자열 받기 입력 저장 : let name = prompt("안내드립니다 문자열 입력해주세요"); ("..

클라이언트사이드 프로토타입(prototype) - 생성자함수명.prototype 생성자 함수로 생성한 많은 객체들의 상황 Product(..) - product.prototype -> print function() { console.log (............) } function() { //다른 메소드의 처리내용 } -> 생성자 함수가 생성한 객체들이 공유할 정보를 저장 - 주로 객체들이 공유할 메소드 저장 속성과 메소드를 분리하여 정의 생성자 함수는 속성 중심으로 객체 생성 메소드는 prototype에 정의 객체 생성 및 활용

클라이언트사이드 객체 생성 방법 리터럴 (literal) 객체 [문자 그대로,직역의,상상력이 부족한] [1. 프로그래밍 언어 직접 값을 나타내는 자구 단위] [2. 원시 프로그램 중에 있는 기호 또는 양] [3. 문자들 자체에 의해서 값이 주어지는 문자열] 이해 : 보이는 것 그 자체가 바로 값을 나타내는 것 [ex. let name="홍길동";유사한 객체를 만들려면 반복 코딩 [재사용성이 떨어짐] 그래서 생성자 함수의 필요성 생성자 함수 [ 자바의 클래스와 비슷 ] let 객체명 = new 생성자함수(); -> 생성자 함수를 호출하여 객체를 생성 생성자 함수를 통해 생성된 객체(instance)들은 모두 같은 유형의 객체들로 분류 객체 코드 재사용 [ 리터럴보단 효율적임 ] 생성자 함수 정의와 호출 방..

클라이언트사이드 객체(object) 개념 이해 (객체가 끝나면, HTML CSS JS간의 연동~) 속성- 메소드 (항상 떠올리자) 1. 객체(object)

클라이언트사이드 화살표 함수 (익명 함수를 조금 더 간단하게 만든 것 ) let 변수명 = ()==>{} let doubleX = (n) == > {return 2*n} [??].toString < 안에 머가 있는지 알 수 있음. 매개변수초기화 function doubleX(n) {return 2 * n;} doubleX(5) 10 정상적인 호출의 결과 doubleX() 호출은 가능함 NaN( Not a Number) 매개 변수 생략한 호출에 대비하는 방법 함수 본문에서 점검하고 처리할수있따. function doubleX(n) { //매개 변수 초기화 if(!n) { n=0; } return 2*n; } 디폴트(default)매개 변수 가능 ECMAScript6 function doubleX(n=0){..

클라이언트사이드 2반 함수 를 사용하지 않으면? main()이 너무 길고 복잡해져 소스코드를 이해하기 힘듬 같은 기능의 코드도 필요할 때마다 매번 반복 입력해야 함 기존 코드의 일부를 재활용하려면 방대한 양의 main에서 찾아내야함 소스 코드의 양에 비례하여 변수도 늘어나 중복을 피해 변수명 정하는것도 번거로움 생성 방법 선언적 함수 function 함수명() {필요한 식} [전통적(일반적)인 함수] function doubleX(n) {return 2*n) 함수명 : doubleX 함수명(식별자)작성 규칙 관례 참조 매개변수 (n) 식별자 이름만 결정 함수본문{} 실행 후결과를 반환 function 함수.toString() - > `내용 익명 함수 let 변수명 = function() {}

클라이언트사이드 for in, for of 반복문 - 배열(또는 객체) 처리에 적합한 형태의 변형된 for 반복문 for in - 배열의 인덱스를 간편하게 처리할 수 있게 함 for (let 인덱스 in 배열) { //반복 처리할 내용 } for of - 배열의 요소를 간편하게 처리할 수 있게 함 for (let 요소 of 배열) { // 반복 처리할 내용 } while 반복문 -반복 조건 표현식이 참인동안 블록의 내용을 계속 반복 실행함 while while() 숫자 let a= [24,34,55,65,71]; 합계 ㄴㄴ 일단 while문은 그대로 값도 출력하고 변수를 두개를 만들자 [] odd 홀수 even 짝수 다 끝나면 아무것도 안남아있게하기 let a = [1,2,3,4] console.log(..

클라이언트사이드 https://www.w3schools.com/ 하다가모르는거있으면 참고 splice 기억하자 c.(splice(startIndex, 제거할 개수, [추가할 항목들]) 배열 중간에 추가 삭제하는 것 c = [1, 2, 3, 4, 5] c.splice(1, 1) 제거 [2]ㅂㅂ c.splice(1,0,2) 추가하는 방법 [1.2.3] 중간고사 ㄱ c.splice(2,1,"ULSAN") 변환 c.splice(c.length-1,1) 제일 마지막꺼 ㅂㅂㅂ c.pop()이랑 똑같음 Client Side programming - 초보 > for 반복문 원하는 횟수만큼 반복 처리를 하고 싶을 때 사용 for 기본문법 for(초기문,조건문;종결문) { //반복처리내용 } 스코프 변수를 사용할 수 있는..