본문 바로가기

Web/JavaScript12

12. 원시값, 객체값 1. JavaScript에서 데이터를 나타내는 2가지 방법 JavaScript에서 데이터를 나타내는 두 가지 주요 유형이 있습니다.바로 '기본 타입'과 '객체'입니다.  각각의 특징과 차이를 살펴보겠습니다.  기본 타입(Primitive Types):문자열(string), 숫자(number), 부울(boolean), 심볼(symbol), undefined, null이 있습니다.이러한 값들은 메모리 상에 고정된 크기로 저장되며, 불변(immutable)합니다. 즉, 한 번 생성되면 변경할 수 없습니다.프로퍼티나 메서드를 가질 수 없습니다. 즉, 메서드를 호출하거나 프로퍼티에 접근할 수 없습니다.객체(Object):객체는 여러 속성(property)을 가질 수 있으며, 이러한 속성은 키와 값의 쌍으로 이루어.. 2024. 4. 18.
11. 이벤트(Event) 1. 이벤트(Event)웹브라우저가 알려주는 HTML 요소에 대한 사건이 발생웹페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행자바스크립트는 비동기식 이벤트 중심의 프로그래밍 모델이벤트가 순차적으로 발생하지 않음(파이썬과 다름)                          input type ="button"   onclick   =  "sendit()"   value="확인">                                             --------        --------         --------                                   이벤트 타겟   이벤트 타입    이벤트 리스너               button typ.. 2024. 4. 18.
10. 정규표현식(Regular Expression: Regex) 1. 정규표현식(Regular Expression: Regex)문자열에서 특정 문자 조합을 찾기 위한 패턴 정규표현식 기본표기         script>         / ^ 정규 표현식 패턴 $ /         script>다양한 패턴이 존재함 (참고사이트)https://namu.wiki/w/%EC%A0%95%EA%B7%9C%20%ED%91%9C%ED%98%84%EC%8B%9D HTML _ id칸생성              ID:  input type="text" id="userid" name="userid">            ID_정규표현식              / ^ [ A - Z a - z ] { 4 , 2 0 } $ /   ID 조건예시- 길이는 4자~20자 - 특수문자 X- 한글 X정.. 2024. 4. 16.
09. 문서객체모델, 노드(Node) 1. Document 객체Dom(Document Object Model)HTML문서 혹은 XML문서 등을 접근하기 위한 일종의 인터페이스 역할* XML 문서 : Extensible Markup Language_ 데이터를 저장하고 전송하기 위한 마크업 언어 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공웹 페이지 자체(Body)를 의미하는 객체웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로부터 시작 getElementById(): 해당 아이디의 요소를 선택 (단수객체 저장)getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택 (복수객체저장) ex)p, ankor.... --->배열로 저장getElementsByClassNam.. 2024. 4. 16.
08. 내장객체 1. Math 객체 수학에서 자주 사용하는 상수와 함수들을 미리 구현한 자바스크립트 표준 내장 객체 min(): 가장 작은 수를 반환. 매개변수가 전달되지 않으면 Infinity를 반환max(): 가장 큰은 수를 반환. 매개변수가 전달되지 않으면 -Infinity를 반환round(): 소수점 첫번째 자리에서 반올림하여 그 결과를 반환floor(): 소수점을 버림ceil(): 소수점을 올림random(): 0보다 크거나 같고, 1보다 작은 무작위 소수를 반환             body>             script>                       //min(): 최솟값/ 없을시 Infinity                  console.log(Math.min()); //-infinity.. 2024. 4. 16.
07. 객체(Object) 1. 객체(Object)하나의 주제를 가지고 관련있는 프로퍼티(property)를 가지고 있는 집합 프로퍼티(property)- 이름과 값으로 구성된 정렬되지 않은 집합- 프로프티는 함수도 저장할 수 있음 -> 프로퍼티 메서드 2. 객체 생성하는 방법  리터럴 표기법             const 객체명 = {            프로퍼티명1: 값1,            프로퍼티명2: 값2,            .... ,            프로퍼티명n: function(){                            }        }               body>                 h2>  리터럴 표기법 /h2>                  script>           .. 2024. 4. 16.
06. 함수(Function) 1. 사용자 정의 함수 (function)하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록필요할 때마나 호출하여 해당 작업을 반복하여 수행할 수 있음코드를 재활용  1. 함수 선언식- 함수를 직접 만드는 형식- 함수를 메모리에 먼저 올림- 위치가 중요하지 않음- 어디에 선언되어도 사용할 수 있음   * 호이스팅: 먼저 메모리에 올리고 다시 처음부터 실행                                    body>                 h2> 함수선언식 /h2>                  script>                     function func1() {                      console.log(`fun1(): 호출!`);         .. 2024. 4. 16.
05. 배열(Array) 1. 배열(Array)이름과 인덱스로 참조되는 정렬된 값의 집합(자료 구조)배열을 구성하는 각각의 값을 배열요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 함 배열선언             배열 초기화배열명 = [요소1, 요소2, 요소3, 요소4 ...]                       배열의 접근            리스트와 동일   자바스크립트 배열의 특징1. 배열 요소의 타입이 고정되어 있지 않음                                2. 배열 요소의 인덱스가 연속적이지 않아도 됨                        body>                 h2> 배열1 /h2>                  script>                    .. 2024. 4. 16.
04. 연산자, 제어문, 반복문 1. 연산자 (Operator)   산술 연산자+, -, *, /, %, **비교 연산자>, =, === : 두식의 값이 같고, 타입까지 같아야 함!== : 두식의 값이 다르고, 타입까지 달라야 함 대입 연산자=, +, -=, *=, /=, %=, **=증감 연산자++변수, --변수, 변수++, 변수--1. num 나중에 대입2. num  먼저 대입논리 연산자and, or, not&&,  || ,  !비트 연산자&, |, !, ^, >and, or, not, xor, left shift, right shift(파이썬과 동일)삼항 연산자   2. 제어문  1. 조건문 if문                           if문 사용하기             body>                 h2>if.. 2024. 4. 16.

티스토리툴바