[JavaScript] 자바스크립트 정규 표현식, Regular Expression
·
FrontEnd/JavaScript
정규 표현식, Regular Expression 정규 표현식 테스트 사이트 특정 규칙을 가진 문자열이나 문자열 집합을 표현하는 데 사용하는 형식 언어(Formal Language) 문자열에서 특정 패턴의 문자열을 검색하거나 치환할 때 사용한다 형식에 맞는 데이터를 입력했는지 검증할 때 사용한다(검증, Validation) 정규식 이라고도 불린다. 정규 표현식 생성 방법 정규식 리터럴 상수 정규식을 '/'(슬래쉬)로 감싸는 방법으로 표현한다. ex) var regEx = /abc/ RegExp 객체를 생성 RegExp 객체의 생성자 함수를 호출하는 방법으로 표현한다. ex) var regObj = new RegExp("abc") 정규 표현식 사용 패턴 단순 패턴 완전히 일치하는 문자열을 대응..
[jQuery] 제이쿼리 노드 스타일 다루는 방법
·
FrontEnd/jQuery
노드 스타일 다루기 $("객체").css("스타일속성") 스타일 속성의 값을 가져온다 $("객체").css("스타일속성", "스타일값") 스타일 속성의 값을 지정한다. $("객체").css(["속성1번", "속성2번", "속성3번", ... ]); 여러개의 스타일 속성의 값을 한번에 가져와서 출력한다. (배열) 배열(Array) 타입으로 입력한다. 객체(Object) 타입으로 반환한다. $("객체").css({"속성1":"1번의 속성값", "속성2":"2번의 속성값", ... }) 여러개의 스타일 속성의 값을 지정하여 설정한다. (객체) 객체(Object) 타입으로 입력한다. 속성 다루기 $("객체").attr("속성이름") 객체의 속성값 얻어오기 $("객체").attr("속성이름", "속성값") 객체의..
[jQuery] jQuery Event, 제이쿼리 이벤트
·
FrontEnd/jQuery
jQuery Event 전부 쌍으로 이루어져 있고, Deprecated 되어있다. bind unbind live die delegate undelegate load unload 지금 사용하고 있는 이벤트 리스너 등록/해제 함수는 on / one(등록) $("객체").on("이벤트이름", function() { // 이벤트 처리코드 작성 }); $("객체").on("이벤트이름", "Selector", function() { // 동적으로 추가되는 객체의 부모요소에 사용한다. // 셀렉터 부분을 알맞게 수정해준다. }); $("객체").on({ "이벤트명1": function() {}, "이벤트명2": function() {} // 이런식으로 여러 개의 이벤트 리스너를 한번에 등록할 수 있다. }); off..
[jQuery] 제이쿼리의 여러가지 노드 사용 명령어
·
FrontEnd/jQuery
노드의 여러가지 명령어 $("노드텍스트"); $("div") // div태그 객체가 생성된다. // $("div") - div태그 객체가 생성된다. // $(div) - div태그 객체를 선택한다. // 구분 잘 해야한다. $("객체").clone() - 객체를 복사하여 반환한다 var $div2 = $("#myDiv").clone(); // 깊은 복사(Deep Copy)로 새로운 사본이 만들어진다. // 자식노드까지 함께 묶음으로 복사된다. 노드 이동/추가 $부모노드.append($추가노드) $추가노드.appendTo($부모노드) 부모노드의 마지막 자식으로 추가노드를 삽입한다, 이미 다른 위치에 존재하던 노드라면 이동이 된다 $부모노드.prepend($추가노드) $부모노드.prependTo($추가노드)..
[jQuery] 제이쿼리의 다양한 노드접근 방식
·
FrontEnd/jQuery
다양한 노드접근 방식 $("객체").eq(index) - index(숫자)번째 노드를 jQuery DOM 객체로 변환한다. $("객체").get(index) - index번째 노드를 JS DOM 객체로 반환한다. jQuery DOM 객체에 [index]를 적용하면 get(idx)와 같은 동작을 한다. $("p")[2] == $("p").get(2) 순차적으로 노드에 접근하기(반복문) $(객체).each(function(index, element) { // 요소마다 각각 반복 될 코드 }) // index : 객체의 인덱스 // element : 해당 반복의 JS DOM 객체 $("p").each(function(i, e) { console.log("-- " + i + " --") console.log(e..
[jQuery] jQuery API, 제이쿼리 API
·
FrontEnd/jQuery
jQuery API jQuery Core jQuery 문법이 적용되었음을 알리는 키워드 jQuery $ ex) document.getElementById("idname") 와 같은코드를 jQuery("#idname"), $("#idname") 으로 사용할 수 있다. jQuery Core 키워드는 변수에 저장하여 사용할 수 있다. var J = jQuery; --> J("#idname") jQuery 스타일의 DOM 객체 이용 코드 $(document).ready(function() { } ) == window.onload = function() { } jQuery 노드객체 찾기 -> jQuery에서 가장 중요한 파트 $("CSS셀렉터") $(jsDOM객체) 순수 JS API를 적용할 수 있는 객체를 js..
[JavaScript] 자바스크립트에서 제공하는 기본 대화상자
·
FrontEnd/JavaScript
자바스크립트에서 제공하는 기본 대화상자 alert 확인버튼과 메세지를 출력하는 Alert 창, 주로 확인용으로 사용된다. 확인 버튼과 메세지를 출력하는 Alert 창 confirm 확인버튼, 취소버튼, 메세지가 들어가는 Confirm 창 반환값이 Boolean 타입이다 확인, 취소 두가지와 메세지가 들어가는 Confirm 창 (반환값이 Boolean 타입이다. True(확인) Or False(취소)) prompt 확인버튼, 취소버튼, 메세지, 텍스트필드가 들어가는 Prompt 창 확인, 취소 두가지와 텍스트필드, 메세지가 들어가는 Prompt 창
[jQuery] jQuery, 제이쿼리란?
·
FrontEnd/jQuery
jQuery 자바스크립트의 DOM을 쉽게 사용하기위해 만들어진 라이브러리 순수 자바스크립트 코드보다 효율적이고, 코드 생산성이 향상된다. HTML 노드, 스타일, 속성, 이벤트 등을 다룰 수 있다. CSS 선택자(Selector)를 이용하여 DOM 객체를 관리한다. jQuery 홈페이지 jQuery 다운로드 다운로드 경로 클릭 후, compressed Ver, uncompressed Ver 둘 중 마음에 드는 것으로 클릭하고 우클릭 - 다른 이름으로 저장을 이용하여 저장하면 된다. 적용하기(head에 아래의 코드 추가하기)
[JavaScript] 자바스크립트 이벤트 처리 코드 작성하는 방법
·
FrontEnd/JavaScript
JS Event 처리코드 작성(등록)하는 방법 이벤트(Event)가 발생하면 해당 이벤트에 알맞은 동작을 수행할 수 있도록 코드를 작성해둬야한다. 이벤트 처리코드 == 이벤트 핸들러(handler) == 이벤트 리스너(Event Listener) 이벤트가 발생했을 때 그 상황에 맞춰 동작할 코드 HTML 태그의 이벤트 속성을 이용한 인라인 방식으로 등록하기 button onclick="alert('clicked')"> div onmousemove="console.log('moved')"> DOM을 이용한 이벤트 리스너 바인딩 - 1 (Event Attribute 사용) button id="btnOk"> 라고 하면, script 태그를 이용하여 btnOk.onclick = fu..
[JavaScript] 자바스크립트의 Event ! 자바스크립트 이벤트
·
FrontEnd/JavaScript
JS 이벤트, JS Event 사용자의 모든 입력(행위)들을 프로그램에서 미리 정의해놓은 객체 사용자의 입력(동작) 뿐만 아니라 특정 사건도 포함한다. 컴퓨터(운영체제)에서 발생한 이벤트를 감지하고 해당 이벤트를 이벤트가 발생한 응용프로그램에게 전달한다. 전달된 이벤트는 해당 응용프로그램에서 적절한 처리를 수행한다 이벤트 기반 처리(Event Driven) 기본 이벤트 태그 요소에 별도로 이벤트 처리코드를 연결하지 않아도 기본적으로 실행되는 이벤트들 a 태그 요소를 클릭 -> 지정된 경로로 페이지 이동(location.href = "지정경로") 브라우저 화면에 마우스 우클릭 -> 메뉴 보여주기 form 태그 요소에서 submit 버튼 클릭 -> 액션에 지정된 경로로 데이터를 전달하며 페이지 이동 발생(f..
[JavaScript] 자바스크립트의 DOM 객체 함수, DOM API
·
FrontEnd/JavaScript
DOM 객체 함수, DOM API Node 생성 document.createElement("tagName") 요소노드 만들기 ** HTML 표준태그가 아니어도 생성됨 document.createTextNode("text") 텍스트노드 만들기 Node 추가 DOM객체.appendChild(대상객체) DOM객체에 대상객체를 연결한다(자식으로 추가한다) ex) var pTag = document.createElement("p") //p태그요소 생성 document.body.appendChild(pTag) //에 p요소 추가 ** document.body == ex) var div = document.createElement("div") //div요소 생성 var t = document.createTextNod..
[JavaScript] 자바스크립트를 사용하기위해 꼭 알아야하는 DOM
·
FrontEnd/JavaScript
DOM, Document Object Model 문서 객체 모델 document 객체를 통해 관리된다. document 객체는 window 객체의 내장 객체 중 하나 HTML 문서의 body 태그의 내용 요소들을 다룰 수 있다. 자바스크립트 코드로 HTML 문서의 요소(태그)들에 접근하고 관리할 수 있게 해주는 객체 모델 DOM 관련 용어 요소 (Element) HTML 문서 내의 태그 문서 객체(Document Object) 자바스크립트 코드를 이용하여 요소에 접근할 수 있도록 객체화한 것 HTML요소와 자바 스크립트코드의 연결 지점(인터페이스) DOM 트리(tree) 모든 문서 객체들을 트리구조로 표현한 것 모든 요소들을 계층적 구조인 트리 구조로 저장해둔 것 노드(Node) DOM 트리의 구성 요소..
[JavaScript] 자바스크립트 핵심 요소 4가지
·
FrontEnd/JavaScript
자바스크립트 핵심 요소 4가지 자바스크립트 Core 문법 기본 문법 데이터타입, 변수, 제어문, 함수 등 클래스, 객체, 프로토타입 내장 객체(Built-in Object) String, Number, Object, Math, Date 등 BOM (Browser Object Model, 브라우저 객체 모델) 웹브라우저 창(윈도우)과 자바스크립트가 상호작용하기 위한 수단으로 제공되는 객체들 Window 객체 BOM 객체들의 최상위 객체 브라우저의 전반적인 기능을 관리하는 객체 자바스크립트로 정의한 모든 전역 변수, 함수, 객체들을 프로퍼티(Property (속성, 멤버필드))로 가지고 있다. window. 을 생략할 수 있다. Navigator 객체 브라우저의 정보, 운영체제의 정보를 제공하는 객체 Loc..
[JavaScript] 자바스크립트의 재미있는 타이머에 대해서
·
FrontEnd/JavaScript
타이머 (Timer) 함수 setInterval(function, millis) : timerid 지정된 밀리초(millis)마다 function 함수를 반복적으로 실행한다. 타이머 객체의 id를 반환한다. setTimeout(function, millis) : timerid 지정된 시간(밀리초) 이후 function 함수를 한 번 실행한다. 타이머 객체의 id를 반복한다. clearInteraval(timerid) : undefined 지정된 타이머객체를 즉시 종료시킨다. setInterval, setTimeout 모두 종료 가능
[JavaScript] 자바스크립트의 클로저란?
·
FrontEnd/JavaScript
클로저, Closure Free Variable(자유변수) 와 함께 손꼽히는 중요한 개념이니 꼭! 기억 해야 한다. 함수 스코프의 외부로 반환된 내부함수가 자신이 선언(정의)되었을 때의 스코프(환경, 상태)를 기억하는 것 - Lexical Scope 함수 스코프가 종료되었더라도 클로저함수를 호출하면 클로저 함수가 선언되었을 때 만들어진 스코프에 접근할 수 있다. 클로저 함수에 의해 접근할 수 있는 변수를 자유변수(Free Variable)이라고 한다. 자유변수는 새롭게 만들어진 것이 아니라 최초의 변수공간을 계속 사용하는 것이므로 값의 변화가 적용되고, 최신값으로 유지된다.
헌일
오늘 할 일은 내일로 미루고 내일 할 일은 생각하지 말자
상단으로

티스토리툴바