Javascript23

• 

  페이지에 스크립트 추가 및 테스트 My First Web Page My First Paragraph Try it 방법1 : html "demo" element의 innerHTML로 집어넣기 document.getElementById("demo").innerHTML = 1 + 2; 방법2 : html body에 쓰기 document.write(2 + 3); 방법3 : 브라우저 콘솔창에 쓰기 console.log(3 + 4); 방법4 : 브라우저 메시지박스로 띄우기 alert(5 + 6); Javascript 2023. 1. 24.

• 

  자료형 주석처리 대소문자 구별 및 카멜케이스(소문자로 시작) 사용한다. 주석 // 단일라인 주석 /* 멀티라인1 멀티라인2 */ let(변수) , const(상수) 선언 var가 function-scouped로 전역적으로 hoisting이 일어나서 변수 선언이전에도 해당 변수를 사용할 수 있었으며 여러 문제를 야기한다. var colorCode = "red"; let, const는 block-scoped단위로 hoisting이 일어난다. 앞으로 var대신에 let, const 문으로 변수를 선언한다. let colorCode = "red"; JavaScript의 타입 1. 원시 값 (일반적인 변수) 타입 값(범위) 예 Boolean true or false const const1 = true; let value.. Javascript 2023. 1. 24.

• 

  연산자 산술 연산자(예: +, -, *, /, %) 비교 연산자(예: ==, ===, !=, !==, >, =, y); // true console.log(x < y); // false // Logical operators(논리연산자) let p = true; let q = false; console.log(p && q); // false console.log(p || q); // true console.log(!p); // false // Assignment operators(할당연산자) let m = 5; m += 2; // m = m + 2 console.log(m); // 7 // Conditional (ternary) operator(3항 연산자) let age = 25; let canDrive = (.. Javascript 2023. 1. 24.

• 

  함수 자바스크립트 함수는 프로그램 전체에 걸쳐 정의되고 재사용될 수 있는 코드 블록이다. 함수는 0개 이상의 매개 변수를 입력으로 사용할 수 있으며 값을 반환하거나 반환하지 않을 수 있다. 다음은 자바스크립트에서 함수를 정의하기 위한 기본 구문이다. function functionName(parameter1, parameter2, ...) { // function body // statements to be executed } function sayHello(name) { console.log("Hello, " + name); } sayHello("John"); // Output: "Hello, John" ECMAscript 6에 소개된 함수 표현식의 약어인 화살표 함수 표현식을 사용할 수도 있다. let s.. Javascript 2023. 1. 24.

• 

  {} Object 자바스크립트에서 객체는 속성의 집합이며, 여기서 속성은 이름(또는 키)과 값 사이의 연관성이다. 객체는 여러 가지 방법으로 정의할 수 있지만 가장 일반적인 방법은 접미사 {} 집합인 객체리터럴 표기법을 사용하는 것이다. 다음은 객체 리터럴 표기법을 사용하여 객체를 정의하는 방법의 예이다. let person = { name: "John", age: 30, occupation: "Developer" }; 위의 예에서 person은 name, age, occ upattion의 세 가지 속성을 가진 개체이며, 각 속성은 해당 속성과 관련된 값을 가진다. 점 표기법 또는 대괄호 표기법을 사용하여 객체의 속성에 액세스할 수 있다: console.log(person.name); // Output: "John" co.. Javascript 2023. 1. 24.

• 

  문자열 함수 자바스크립트에서 문자열은 텍스트를 표현하는 데 사용되는 연속된 문자이다. 문자열은 작은따옴표 또는 큰따옴표로 묶는다. 다음은 자바스크립트에서 문자열을 만드는 방법의 예이다. let message = "Hello, World!"; 자바스크립트는 문자열을 조작하는 데 사용할 수 있는 다음과 같은 많은 내장 메서드를 제공한다: length: returns the number of characters in a string toUpperCase(): returns the string in uppercase toLowerCase(): returns the string in lowercase indexOf(substring): returns the index of the first occurrence of the s.. Javascript 2023. 1. 24.

• 

  백틱(`)과 템플릿 리터럴 JavaScript 템플릿 리터럴은 ECMA스크립트 6(ES6)에 도입된 새로운 기능으로 보다 강력하고 유연한 구문으로 문자열을 만들 수 있다. 템플릿 리터럴은 작은따옴표나 큰따옴표 대신 백틱(`)으로 묶는다. 템플릿 리터럴의 주요 이점 중 하나는 문자열에 식을 ${}(으)로 묶어서 포함할 수 있다는 것이다. let name = "John"; let age = 30; console.log(`My name is ${name} and I am ${age} years old.`); // Output: "My name is John and I am 30 years old." 템플릿 리터럴을 사용하면 이스케이프 문자()를 사용하지 않고 여러 줄의 문자열을 만들 수 있다. let text = `This is a m.. Javascript 2023. 1. 24.

• 

  Number Methods 자바스크립트는 숫자 작업을 위한 다양한 메서드를 제공한다. 다음 예제에서 살펴보자. let num = 0; // toString(): 문자열로 변환 num = 123; console.log(num.toString()); // Output: "123" //toFixed(n): 소수점 자리 수 고정 num = 3.14159; console.log(num.toFixed(2)); // Output: "3.14" //toExponential(n): 지수로 변환 num = 1000; console.log(num.toExponential(2)); // Output: "1.00e+3" //parseInt(string, radix): 문자열을 숫자로 변환 num = "123"; console.log(parseInt(nu.. Javascript 2023. 1. 24.

• 

  배열 javaScript 배열은 단일 변수에 여러 값을 저장하는 데 사용된다. 배열은 숫자, 문자열 및 개체와 같은 서로 다른 데이터 유형의 값을 저장할 수 있다. let numbers = [1, 2, 3, 4, 5]; 배열 생성자를 사용하여 배열을 생성할 수도 있다. 그러나 new Array()보다 [] 방식을 권장한다. let numbers = new Array(1, 2, 3, 4, 5); 배열은 인덱스를 사용하여 배열 요소에 액세스할 수 있다. console.log(numbers.length); // Output: 5 console.log(numbers[0]); // Output: 1 console.log(numbers[2]); // Output: 3 배열에서 사용되는 내장 메서드 push(element.. Javascript 2023. 1. 24.

• 

  Math , 난수 난수 Math.random(): 0과 1사이의 난수 발생 Math.floor(Math.random() * 100) + 1; - 1부터 100사이의 난수가 리턴됨 - 100대신에 원하는 범위의 최대값을 넣으면 난수를 구할 수 있음 Math 매서드 종류 및 설명 Math.abs(x): returns the absolute value of x console.log(Math.abs(-5)); // Output: 5 Math.sqrt(x): returns the square root of x console.log(Math.sqrt(16)); // Output: 4 Math.pow(x, y): returns x raised to the power of y console.log(Math.pow(2, 3)); // O.. Javascript 2023. 1. 24.

• 

  if else 조건문 자바스크립트는 특정 조건에 따라 다른 처리를 하기위해 조건문을 사용한다. let age = 19; if (age >= 21) { console.log("You are old enough to drink!"); } else if (age >= 19) { console.log("You are old enough to vote!"); } else { console.log("You are not old enough to drink or vote!"); } 이 예에서 다른 if 블록 내부의 코드는 가변 연령 값이 19보다 크거나 같으나 21보다 작은 경우에만 실행된다. 연령이 19세 미만이면 마지막 블록의 코드가 실행된다. 여러 개의 다른 if 문을 연결하여 하나의 if-else 블록에서 여러 조건을 확인할 수 .. Javascript 2023. 1. 24.

• 

  switch 조건문 switch 문은 식의 값을 여러 개의 경우와 비교하고 일치하는 경우 블록 내의 코드가 실행된다. 각 블록의 하단에는 break문을 사용해 다른 블록으로 실행을 막아야 한다. let day = 'Monday'; switch (day) { case 'Monday': console.log('Today is Monday'); break; case 'Tuesday': console.log('Today is Tuesday'); break; case 'Wednesday': console.log('Today is Wednesday'); break; default: console.log('Today is another day'); } let x = 3; switch(true){ case x > 0 && x < 5: c.. Javascript 2023. 1. 24.

• 

  for do while 반복문 for 반복문 for (let i = 1; i Javascript 2023. 1. 24.

• 

  Map set Iterating Map객체는 키값으로 구성되어 있으며 set(키, 값) 으로 집어 넣고 get(키)로 가져온다. delete(키)로 삭제한다. has(키)로 존재여부를 확인한다. 키를 정의해놓고 키를 알면 자유롭게 사용할 수 있어 매우 유용하다. forEach, for ~ of 를 사용해서 전체 데이터를 가져올 수 도 있다. // Create a Map const fruits = new Map(); // Set Map Values fruits.set("apples", 500); fruits.set("bananas", 300); fruits.set("oranges", 200); console.log(fruits.get("apples");) // Returns 500 console.log(fruits.size); fruit.. Javascript 2023. 1. 24.

• 

  날짜 객체 new Date() 날짜는 빈번하게 사용된다. 최신글 여부를 비교하는 등에도 사용하고, 날짜를 표시할 때 년도4자리-월2자리-일2자리 보여줄 것인지 아니면 년도만 보여줄 수 도 있다. let date = new Date(); let formattedDate = date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2) + " " + ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2) + ":" + ("0" + date.getSeconds()).slice(-2); console.log(formattedDat.. Javascript 2023. 1. 24.

• 

  form selector 유효성점검 submit Name: Email: Password: Submit let form = document.getElementById("myForm"); form.addEventListener("submit", function(event) { event.preventDefault(); // prevent the form from submitting let valid = true; let inputs = form.getElementsByTagName("input"); for (let i = 0; i < inputs.length; i++) { if (!inputs[i].checkValidity()) { valid = false; break; } } if (!valid) { alert("Please fill out all fi.. Javascript 2023. 1. 24.

• 

  연산자 우선순위 let result = 2 * 3 + 4; // the result is 10 (2 * 3 = 6, 6 + 4 = 10) let result2 = 2 + 4 / 2; // the result is 3 (4 / 2 = 2, 2 + 2 = 3) `*` , `/` 가 `+` 보다 우선 let result = (2 + 3) * 4; // the result is 20 (2 + 3 = 5, 5 * 4 = 20) ()괄호 안이 우선 let result = 2 * 3 / 2; // the result is 3 (2 * 3 = 6, 6 / 2 = 3) `*` `/` 는 우선순위가 동일하며 이때는 왼쪽에서 오른쪽으로 Javascript 2023. 1. 24.

• 

  에러 처리 & 디버깅 try { let x = y + 2; // m, n 변수를 선언하지 않아서 예외가 발생 let z = m / n; } catch (error) { if (error instanceof ReferenceError) { console.log("ReferenceError: " + error.message); } else if (error instanceof TypeError) { console.log("TypeError: " + error.message); } } try catch문을 사용하여 예외사항을 처리 try { // y변수를 선언하지 않아 예외가 발생 let x = y + 2; } catch (error) { console.log(error); } finally { // 오류가 발생하던 안하던 수행하.. Javascript 2023. 1. 24.

• 

  Arrow function 화살표함수 화살표함수로 불리우며, 최근 사용되는 함수 표기법이다. square 함수 작성 let square = (x) => x * x; console.log(square(5)); // 25 sum 함수 작성 let sum = (x, y) => x + y; console.log(sum(2, 3)); // 5 hello 함수 작성 let hello = () => "Hello"; console.log(hello()); // "Hello" 배열 전체를 순서대로 더하는 함수 let arr = [1, 2, 3, 4, 5]; let sumArray = arr.reduce((acc, cur) => acc + cur); console.log(sumArray) // 15 object의 값을 Object.values를 사용해서 배열.. Javascript 2023. 1. 24.

• 

  Class 클래스 class 클래스명 {}로 선언 class Person { constructor(name) { this.name = name; } greet() { console.log(`Hello, my name is ${this.name}.`); } } let person = new Person("John"); person.greet(); // Output: "Hello, my name is John." 생성자 생성 : `constructor`를 사용하여 생성 let person = new Person("John"); new문을 사용하여 Person클래스로 부터 person 객체를 생성한 뒤 person.greet(); 와 같이 person객체의 greet()메서드를 사용한다. class Person { static.. Javascript 2023. 1. 24.

• 

  JSON Object 현재 대부분 자료형을 JSON Object를 사용해서 핸들링하고 있으므로 명확하게 인지해야 한다. let jsonObject = {}; jsonObject.name = "John"; jsonObject.age = 30; jsonObject.address = { street: "123 Main St", city: "Anytown", state: "USA" }; console.log(jsonObject); // Output: { name: "John", age: 30, address: { street: "123 Main St", city: "Anytown", state: "USA" } } {}키워드로 jsonObject를 생성하고 프로퍼티 값을 넣는다. 자바스크립트에서 Object와 JSON Object는 .. Javascript 2023. 1. 24.

• 

  Cookie 쿠키는 웹서버측 요청에 의해 브라우저에 저장되는 정보로 생성된 쿠키정보는 생성한 도메인에서 읽어들일 수 있다. document.cookie = "username=John; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/" let cookies = document.cookie; console.log(cookies); // Output: "username=John; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/" 예제는 `document.cookie`를 사용하고 쿠키를 생성하고 읽어들이는 간단한 예제이다. 예제처럼 쿠키는 `;` 세미콜론으로 값을 구분하며 각 값은 `key=value` 형태로 저장된다. function getCookie(n.. Javascript 2023. 1. 24.

• 

  window 객체 window객체는 전역객체로 브라우저상에 일시적으로 공통함수나 값을 공유할 수도 있다. // window.open("https://www.naver.com", "_blank"); //새창으로 지정된 경로 열기 console.log(window.location.href); //현재 경로 출력 let width = window.innerWidth; let height = window.innerHeight; console.log(`Width: ${width}, Height: ${height}`); // 윈도의 창 폭과 넓이 브라우저 window객체를 사용하여 현재 창의 url경로를 가져오고 리로딩을 할 수 있다. iframe을 사용할 경우 iframe의 창 폭과 높이가 구해진다. let width_s = sc.. Javascript 2023. 1. 23.