본문 바로가기

Javascript

 (40)
기본 스타일 선언 @charset "utf-8"; /* * default style definition */ body { margin: 0; padding: 0; font-size: 75%; line-height: 1.5em; font-family: "Malgun Gothic", "Lucida Grande", Tahoma, Verdana, AppleGothic, UnDotum, sans-serif; } form { margin: 0; padding: 0; } hr { display: none; } p, div, th, td, select, input { color: #333; } a:link, a:visited { color: #666; text-decoration: none; } a:active, a:hover { co..
어플리케이션과 웹의 장단점 어플리케이션 장점 - 시작 프로그램으로 등록 시 부팅과 함께 시작 가능하다 - 런칭해두면 종료 시까지 자신의 역할을 수행할 수 있다. - 사업자가 원하는 외형 UI 구현이 가능하다. - 어플리케이션 내 리치 UI 표현이 가능하다. - 하드웨어 및 그래픽 리소스를 최대까지 활용할 수 있다. -? - 하드웨어의 다양한 장비 사용이 가능하다. -? - 하드웨어에 대한 프로그래밍이 가능하다. -? - PC플랫폼이 지원하는 기능은 대부분 사용할 수 있다. - 백그라운드 수행 중에도 유저 노티가 가능하다. 어플리케이션 단점 - 유저가 직접 설치를 해야한다. - 특정 OS 및 기기에서만 실행해야만 한다. - 유저의 리소스를 많이 사용하게 한다. - 업데이트에 많은 난점이 있음 웹페이지 장점 - 다양한 OS 및 다양한..
JS 이벤트 전파 중단하는 방법 1. event.preventDefault( ) : 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소 2. event.stopPropagation( ) : 이벤트가 상위로 전파되지 않도록 중단(현재 이벤트 이후의 전파 중단시킴) HTML 상에서 사용자 이벤트는 상위로 전파된다 ex) ul>li>a 일때 a 클릭하면 클릭이벤트가 li, ul에도 전달됨 이걸 막는게 event.stopPropagation( ) 3. event.stopImmediatePropagation( ) : 현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단 4.return false :return false를 붙히면 기존에 있던 기능들이 사라짐. a태그를 클릭했을때 다른페이지로 넘..
JS 정규표현식 정규표현식: 문자열을 처리하는 방법 특정한 조건의 문자를 검색하거나 치환하는 과정을간편하게 처리 할 수 있도록 하는 수단 정규표현식에서 패턴을 만드는 두가지 방법 1. 정규표현식 리터럴 let pattern = /'a'/ a는 찾고자하는 문자 2. 정규표현식 객체 생성자 let pattern = new RegExp('a'); a는 찾고자하는 문자 ->두 방법 모두 찾고자하는 정보를 pattern이라는 변수에 저장 정규표현식을 통해서 할 수 있는 3가지 1. 패턴에 맞는 정보 추출 Ex) 문자열에서 URL 추출해내 RegExp.exec() let pattern = /'a'/; - console.log(pattern.exec('abcdef')); // ["a"] ->문자열 a를 값으로 하는 배열을 리턴 - ..
JS 비동기처리 callback 함수 자바스크립트는 기본적으로 동기적 setTimeout 은 비동기적 callback도 동기적, 비동기적 두가지의 경우가 있다. 동기적 callback ex) console.log('1'); setTimeout(() => console.log('2'), 1000); console.log('3); function printImmediately(print){ print(); } printImmediately(function(){ console.log('hello'); } ) 비동기적 callback ex) function printWithDelay(print, timeout){ setTimeout(print, timeout); } printWithDelay( ()=> console.log('동기적 callback..
JS class class 생성자 함수 함수가 특정기능을 하는 로직을 묶을 때 사용하는 문법이라면, 연관있는 변수와 함수를 하나로 묶을 때 사용하는 문법 -> 객체 단위로 코드를 그룹화 할 수 있으며 코드를 재사용하기 위해서 * class 사용방법 Class Person { //constructor constructor(name, age){ //fields this.name = name; this.age = age; } //method speak(){ console.log(`${this.name} : hello!`); } } +fields: 이름, 나이같은 속성 method: 행동 * class 사용해서 object 만들기 const soyeong = new Person('soyeong', 27); console.log..
JS 프로토타입과 클래스 - 객체 생성자 객체 생성자 객체란? 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인 것 자바스크립트는 prototype 기반의 언어 Java와 C++은 클래스 기반의 객체지향 언어이지만 JS는 prototype 기반의 객체지향 언어 Class 기반의 객체지향 언어는 class를 통해 객체 생성 But, prototype 기반의 객체지향 언어인 자바스크립트는 class 정의 없이도 객체를 생성할 수 있다 생성자함수가 class를 대신함 (+ES6부터 Class 추가) 캡슐화와 상속 지원 객체지향 프로그래밍에서 중요한 특징 중 하나는 캡슐화 & 상속 자바스크립트는 Class가 없어도 클로저를 통해 캡슐화가 가능하고, prototype을 통해 상속이 가능 프로퍼티와 값의 모임 객체 { } 안에서 프로퍼티와 값을 쌍으로 하..
JS 화살표함수 const add = function (a.b) { 실행코드 }; 를 화살표 함수로 나타내기 : 파라미터 const add = (a,b) => { return a+b; }; const sum = add(1,2); console.log(sum); -> 3 * 코드 더짧게도 가능 const add = (a,b) => a+b; const hello = (name) => { console.log(`Hello ${name}!`); } hello("soyeong"); ->Hello soyeong! 화살표함수는 항상 anonymous function

티스토리툴바