HTML, CSS, ECMA6 (11) 썸네일형 리스트형 [자바스크립트] 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);.. [부트스트랩(Bootstrap)] 부트스트랩 Jquery 사용하기 부트스트랩 Jquery 사용하기 버튼 메소드 .button('toggle') 메소드 예제 버튼 .button('loading') 메소드 예제 버튼 .button('reset') 메소드 예제 버튼 .button(string) 메소드 예제 여기를 누르세요. collapse-event 컬랩스 이벤트 여기 클릭하면 펼쳐지고, 다시 클릭하면 접힙니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit velit sit amet tristique tincidunt. Fusce dapibus tortor ut est ornare porttitor. Aliquam auctor bibendum posu.. 이전 1 2 다음