본문 바로가기

JavaScript13

[정규표현식] 문자열 패턴화 / Regular Expression 정규표현식 Regular Expression정규식은 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식언어이다.많은 프로그래밍 언어, 텍스트 처리 프로그램 등에서 정규표현식 기능을 제공한다.자바스크립트는 문법에 내장되어 있는 형태로 정규식을 지원한다.정규표현식Regular Expression(REGEX / REGEXP)특정 패턴을 가진 문자열을 찾거나 / 찾아서 변경(치환) 할때 사용하는 형식언어정규표현식을 이용하면 문자열에 대한 특정패턴 조건검사시 복잡한 조건을 제시할 필요없이 간단해진다.객체생성 방법 ↓ //방법1) 자바스크립트에서 제공하는 RegExp 객체로 정규식 객체 만들기 const regExp = new RegExp(" 패턴입력 "); //방법2) 정규표현식 리터럴 / /를 이용해서.. 2022. 12. 25.
[브라우저API] Event 객체 기본 이벤트 Event자바스크립트에서의 이벤트의 특성과 활용법을 알아보자.이벤트 모델 종류고전 이벤트 모델 (기본)- 요소객체를 가져와 해당요소의 이벤트 속성(on키워드)에 접근 한 후 이벤트 핸들러를 연결- 이벤트 속성에 null을 대입함으로써 이벤트 속성을 없앨 수 있다.- 요소 내부에 직접적을 기술하지 않는다.고전방법1고전방법2 인라인 이벤트 모델- 요소 내부에 직접적으로 이벤트 속성을 제시하고 실행내용을 정의- 내용이 길어지면 함수호출의 방식을 사용한다.인라인방법1인라인방법2 표준 이벤트 모델- W3C에서 공식적으로 지정한 방식- [표현법] 요소객체.addEventListener("이벤트명", 이벤트핸들러);- 이벤트 속성에서 on을 빼면 이벤트명이 된다.- 요소 내부에 직접적으로 기술하지 않는다.- .. 2022. 12. 22.
[브라우저API] Window 객체 / DOM, BOM Window 객체자바스크립트에서의 최상위 객체이며, 크게 BOM과 DOM으로 나뉜다. Window 객체란?1) 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 '전역객체'라고도 부른다.- 작성하는 코드 대부분은 window 객체의 프로퍼티가 된다.- let과 const 키워드는 블록스코프로 window 객체 내부의 블록에서 선언된 것으로 간주되어 전역객체의 프로퍼티로 활용되기 어렵다.2) JSC(JavaScript core), BOM(Browser Object Model), DOM(Document Object Model)가 소속되어있는 객체이다.   DOM 객체DOM(Document Object Model)텍스트 파일로 만들어져 있는 웹 문서를 브라우저에.. 2022. 12. 21.
[내장객체] Date 객체 내장 객체 Date날짜를 저장할 수 있고, 날짜와 관련된 메서드를 제공해주는 JavaScript의 내장객체 Date에 대해 알아보자.객체 생성하기new Date()  : - 현재 날짜와 시간이 저장된 Date 객체 반환- 출력 형태 : Sun Dec 25 2022 08:44:05 GMT+0900 (Korean Standard Time)new Date(연, 월-1, 일)  : - 월은 인덱스 개념이기 때문에 원하는 월에서 -1 해야 원하는 월이 나온다.- 시 분 초 는 모두 00 으로 출력된다.new Date(연, 월-1, 일, 시, 분, 초)  :- 시, 분, 초 까지 지정한다.new Date(연, 월-1, 일, 시, 분, 초, ms)  :- 밀리세컨즈 단위를 추가하여 생성한다.(1s = 1000ms)-.. 2022. 12. 21.
[내장객체] Object를 사용하여 키-값 자료형 구현 객체자바스크립트에서의 객체의 개념을 정리하고,자료형으로써의 객체(Object)를 톺아본다 중의적 의미의 객체(object 또는 Object)보편적 의미의 객체, object- 데이터와 해당 데이터를 조작하는 동작을 함께 포함하는 데이터 구조- JS는 객체기반의 언어로 원시값을 제외한 거의 모든것은 객체이다.   ex) Array, 함수, Object, Date, Math, 정규표현식, new키워드로 정의된 String, Number, Boolean  cf. 원시값 : 어떤 특성 또는 메소드가 없는 값.       (string, number, boolean, null, undefined 등)키-값 자료형의 내장객체, Object- Key / Value Pair를 저장할 수 있는 구조- 자바의 HashMa.. 2022. 12. 21.
[함수] 기본 사용법 : 선언법, 매개변수 함수자바스크립트에서의 함수의 특성과 활용법을 알아보자포스팅 순서선언 방식에 따른 분류- 함수선언- 함수 표현식- 화살표 함수- 즉시실행 함수명명에 따른 차이- 기명함수- 익명함수매개변수 사용법사용예 : 랜던값 함수사용예 : 함수를 리턴하는 경우 선언 방식에 따른 분류함수 선언 (Function Declaration)- function 키워드를 사용하여 정의한 경우- 명명에 따라 기명함수와 익명함수로 나뉜다(특성 후술)function greet(name) { return `Hello, ${name}!`;}  함수 표현식 (Fuction Expression)- 함수가 변수에 할당되는 경우- 익명함수와 기명함수 모두 할당 가능const greet = function(name) { return `He.. 2022. 12. 20.
[내장객체] Array를 사용하여 배열 자료형 구현 배열자바스크립트에서의 배열의 특성과 활용법을 알아보자 자바스크립트의 배열, Array내장객체 Array를 사용하여 순서가 있는 요소들의 집합, 배열을 표현할 수 있다특징1. 다양한 데이터 유형을 포함할 수 있다2. 크기를 지정하여 생성할 수 있으나 언제든지 동적으로 조정할 수 있다3. 객체(Object)의 일종으로 점 접근법으로 유용한 속성들(메소드 포함)에 접근할 수 있다  생성하기배열리터럴 사용- 대괄호 [ ] 를 이용하여 생성하고, 쉼표(,)로 구분하여 요소들을 지정한다let arr1 = [];let arr2 = ['java', 'oracle'];생성자함수 사용- new 키워드를 사용해서 Array의 생성자 함수를 호출한다- 매개변수로 숫자를 보내면 해당 크기의 배열이 생성되고, 요소들을 보내면 해.. 2022. 12. 20.
[자료형] string 문자열 활용하기 / 문자 숫자 형변환 문자열 관련 메소드문자열 처리 메소드문자열 . toUpperCase()  :  - 영문자를 대문자로 전환문자열 . toLowerCase()  :  - 영문자를 소문자로 전환문자열 . charAt( i )  : - 문자열의 i번째 글자 반환문자열 . indexOf("A", i )  :  -  i번째 인덱스에서부터 첫 A의 위치 인덱스 반환- 두번째 매개변수 생략가능- A가 존재하지 않을 경우 -1을 반환한다.문자열 . lastIndexOf("A")  :  - 뒤에서부터 첫 A의 위치 인덱스 반환문자열 . substring( i , j )  : - i번째 인덱스에서부터 j번째 인덱스 전까지의 문자열 반환- 두번째 매개변수 생략 가능 문자열 . split( " 기호 " )  :  - 기호를 기준으로 문자열을 .. 2022. 12. 18.
[브라우저API] HTML 요소를 JavaScript 객체화하기 HTML 요소를 JavaScript 객체로 전환하기요소를 객체로 전환한 후 ' . 속성명 ' 의 방식으로 접근해서 값을 얻거나 대입할 수 있다.속성명은 자바스크립트에서 사용하는 명칭을 써야 한다(console.dir () 메소드로 알아낼 수 있음.).   document . getElementById("아이디값");아이디로 요소를 가져오는 방법 (Element 단수형 메소드명)단 1개만을 가져온다. document . getElementsByTagName("태그값");해당 HTML 태그를 갖고있는 요소들을 반환한다. (Element's' 복수형 메소드명)다수가 반환 될 수 있어 배열로 리턴한다. document . getElementsByName("name값");HTML의 name 속성값을 갖고있는 요소.. 2022. 12. 18.
[데이터 입출력] window 객체 / document 객체 데이터 입출력을 위한 객체자바스크립트 내장객체window- 브라우저 그 자체를 의미하며, 브라우저 안의 모든 요소들이 소속된다.- 브라우저 창이 열릴 때 마다 하나씩 만들어진다.- 브라우저 창을 제어하는 다양한 메서드를 제공하며,  window.  으로 접근한다(생략가능).- 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 전역객체라고도 부른다.- Window객체 더 알아보기document- 웹페이지 그 자체를 의미- 웹페이지에 존재하는 HTML요소에 접근하고자 할때는 .document로 시작해야한다. - HTML요소와 관련된 작업을 도와주는 다양한 메소드를 제공- document(DOM) 객체 더 알아보기 데이터 출력 방법화면에 데이터를 보여주고자 할 때 alert ( ... );풀명칭 windo.. 2022. 12. 17.
[문법] 제어문 / 자주 쓰이는 함수 문법 특성의도한 대로 적용되지 않을 때는 브라우저의 콘솔창에서 오류를 확인해 볼 수 있다.복합연산자 +=, ++, -- 등 사용 가능하다동등비교연산자 == 는 자료형과 무관하게 실제 값만 일치해도 true를 반환한다.실제 값과 자료형까지 일치한지 비교하려면 일치연산자 === 를 사용한다.문자열도 ASCII 값을 이용하여 대소비교가 가능하다.0번인덱스 부터 비교를 시작해서 1번, 2번으로 넘어가며, 길이가 짧아서 같은 인덱스에 문자가 없다면 더 작은 문자열로 계산된다.요소를 콘솔 혹은 화면에 출력할때 변수명만 입력해도 자동으로 .toString() 가 붙는다.해당 요소에 toString() 메소드가 정의되지 않았을 경우 자료형에 관한 내용이 출력된다.  자주쓰이는 함수console.log( 매개변수 )lo.. 2022. 12. 17.
[변수] 스코프와 호이스팅 / var, let, const 변수JavaScript에서 변수가 갖는 특성에 대해 톺아본다 변수 특징변수에 대입되는 값(리터럴)에 따라서 자동으로 자료형이 결정되며, 재할당 시 다른 타입의 자료형을 담을 수 있다.자료형 종류* typeof 키워드를 사용했을 때 출력되는 값을 기준으로 알아본다1. 원시타입   - string : " " 또는 ' '로 입력한다   - number : 따옴표로 감싸지 않고 바로 입력한다    - boolean : true/ false로 입력한다   - undefined : 선언만 하고 초기화를 하지 않은 상태이다   - symbol : 내장함수 Symbol('값')을 사용해서 만든다(ES6) 2. 객체타입   - object : 객체, 배열, HTML 객체등이 해당된다          배열은 [ 값, .... 2022. 12. 16.
[개요] 스크립트 언어이자 인터프리터 Java Script 개요웹은 크게 3가지 요소로 이루어진다. 1. HTML : 웹 문서의 큰 틀 (뼈대) 2. CSS : 스타일 부여 (색상, 디자인, 간격, 배치 등등) 3. JavaScript : 마우스, 키보드를 통한 이벤트가 발생했을 때 실행해야되는 동적인 효과  JavaScript탄생넷스케이프사가 정적인 HTML을 동적으로 표현하기 위해 만든 경량의 프로그래밍 언어. 단기간에 개발되었으며, 자유도는 높으나 완성도는 낮다자바와는 연관성이 없으며 자바스크립트라는 명칭은 대세에 편승하려는 마케팅적 전략 스크립트 언어로써의 JavaScript스크립트 언어 : 연극용어에서 따온 말로, script는 배우의 대사를 중점으로 배우의 표정, 등장과 퇴장, 무대장치를 중심으로 지시해놓은 내용을 말한다. 프로그.. 2022. 12. 15.

티스토리툴바