HTML, CSS, ECMA6/자바스크립트(Java Script) (7) 썸네일형 리스트형 [자바스크립트] jQuery 시작하기 jQuery 시작하기 실행 환경 { ‘IDE’ : ‘Eclipse’ ‘Java_Version’ : ‘JDK 1.8’ ‘Browser’ : ‘Chrome’ ‘JQuery_Version’ : 3.1.1 } JQuery CDN 또는 다운로드하여 JQuery Library version 확인 파일명 : jq-ex01.html jQuery Library Version 확인 Element를 선택하는 방법 파일명 : jq-ex02.html Element를 선택해야 하는 시점 JQuery 동작 jQuery에서 jQuery.fn = jQuery.prototype 등으로 플러그인을 만들면 jQuery로 뽑아낸 함수 모두에서 사용할 수 있다. 파일명 : jq-ex03.html Element를 선택해야 하는 시점 222222.. [자바스크립트] Event 처리 자바스크립트 실행 환경 { ‘IDE’ : ‘Eclipse’ ‘Java_Version’ : ‘JDK 1.8’ ‘Browser’ : ‘Chrome’ } Event 처리 파일명 : event-ex02.html Click-1 Click-2 버튼을 클릭하여 카운터를 늘리는 이벤트처리 DOM Level 0 : Basic Event model (고전적인 이벤트처리) 파일명 : event-ex03.html button1 button2 counter1: 0 counter2: 0 현재 버튼이 js에서 동일한 기능 2개를 각각 구현하게 되었다. 이를 해겨랗기 위한 data attribute를 써보자 button1 button2 counter1: 0 counter2: 0 DOM Level 2 : Standard Event m.. [자바스크립트] 심화4 - Escape 다루기 자바스크립트 실행 환경 { ‘IDE’ : ‘Eclipse’ ‘Java_Version’ : ‘JDK 1.8’ ‘Browser’ : ‘Chrome’ } URL Escape 문자테스트 var url = 'http://localhost:8080/mysite3?n=테"스"트&e=test@gmail.com'; // escape // Deprecated 되었으므로 사용하지 마세요. var url2 = escape(url); console.log(url2); // http://localhost:8080/mysite3?n=테"스"트&e=test@gmail.com // http%3A//localhost%3A8080/mysite3%3Fn%3D%uD14C%22%uC2A4%22%uD2B8%26e%3Dt.. [자바스크립트] 심화3 - String 다루기 자바스크립트 실행 환경 { ‘IDE’ : ‘Eclipse’ ‘Java_Version’ : ‘JDK 1.8’ ‘Browser’ : ‘Chrome’ } 자바스크립트 String 타입 알아보기 파일명 : ex08.html // 객체 함수 var str6 = "string1 string2 string3"; console.log(str6.length); //>> 23 var index = str6.indexOf('string2'); console.log(index); //>> 8 index = str6.indexOf('string4'); console.log(index); //>> -1 var str7 = str6.substr(index); console.log(str7);.. [자바스크립트] 심화2 - Array 다루기 자바스크립트 실행 환경 { ‘IDE’ : ‘Eclipse’ ‘Java_Version’ : ‘JDK 1.8’ ‘Browser’ : ‘Chrome’ } 자바스크립트 array 타입 알아보기 var a1= new Array(10) a1[0] = 0; a1[1] = 1; a1[20] = 20; console.log('Array a1:'+a1); console.log('Array a1 length:'+a1.length); console.log('Array a1[20]:'+a1[20]); //동적으로 크기가 변하는 배열(에러 안남) //new Array(size) : // size를 주는 것은 의미가 없다. 어차피 동적으로 늘어나기 때문. // 배열정의 // 2.. [자바스크립트] 심화1 - 객체 다루기 자바스크립트 실행 환경 { ‘IDE’ : ‘Eclipse’ ‘Java_Version’ : ‘JDK 1.8’ ‘Browser’ : ‘Chrome’ } 자바스크립트 심화-1 파일명 : ex05.html 객체를 만들어서 메소드 추가하기1 var o = { name: '마이콜', age:20, hasProperty:function(property){ return property in this; } } console.log(o.hasProperty('name')) console.log(o.hasProperty('age')) console.log(o.hasProperty('email')) // 위에서 만든 hasProperty는 최상위로 정의된 자.. [자바스크립트(JavaScript)] 시작하기 자바스크립트(JavaScript) 시작하기 실행 환경 { ‘IDE’ : ‘Eclipse’ ‘Java_Version’ : ‘JDK 1.8’ ‘Browser’ : ‘Chrome’ } 객체 기반으로 만들어진 스크립트 언어 브라우저에서 작동하므로 익명화된 함수를 사용함 (재사용되지 않는 함수에 대해서) 기본 기능 웹페이지에 alert , console.log 사용하기 파일명 : hello.html Hello World 데이터 타입 알아보기 파일명 : ex1.html >> 5numbervar 로 생성된 number1 데이터 타입은 number 타입으로 생성된 것을 알 수 있다. 그렇다면 number 타입이 존재한다는 것이므로 다음의 방식을 추가해보자 var number2 = new Number(10);.. 이전 1 다음