funfunweb

location 객체는 현재 브라우저의 URL에 대한 정보를 제공하며, 브라우저의 주소를 읽고 수정하는 데 사용됩니다. 이 객체는 window 객체의 일부로, 현재 문서의 URL을 다루는 여러 프로퍼티와 메서드를 포함하고 있습니다.주요 프로퍼티href: 전체 URL을 반환하거나 설정합니다.예: location.href는 현재 문서의 URL을 반환합니다.protocol: URL의 프로토콜 부분을 반환합니다. (예: http:, https:)예: location.protocol은 현재 페이지의 프로토콜을 반환합니다.host: 호스트 이름과 포트 번호를 반환합니다. (예: www.example.com:80)예: location.hosthostname: 호스트 이름만 반환합니다. (예: www.example.c..

window.open() 메서드는 새 브라우저 창이나 탭을 열 때 다양한 옵션을 설정할 수 있습니다. 이 옵션들은 새로 열리는 창이나 탭의 크기, 위치, 모양, 툴바 등의 속성을 지정합니다. 옵션은 specs 매개변수로 문자열 형태로 전달됩니다.window.open('문서주소','윈도우이름','옵션=값,옵션=값,...');주요 옵션width: 새 창의 너비(픽셀 단위).예: width=800height: 새 창의 높이(픽셀 단위).예: height=600left: 새 창의 화면 왼쪽에서부터의 거리(픽셀 단위).예: left=100top: 새 창의 화면 위쪽에서부터의 거리(픽셀 단위).예: top=100resizable: 새 창의 크기를 조절할 수 있는지 여부. yes 또는 no로 설정.예: resizab..

버블링(Bubbling)은 자바스크립트 이벤트 전파의 한 방식으로, 이벤트가 발생한 요소에서 시작하여 그 요소의 부모 요소들로 차례로 전파되는 과정을 의미합니다. 기본적으로 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 방식입니다.버블링의 동작 원리이벤트 발생: 특정 요소에서 이벤트가 발생합니다. (예: 버튼 클릭)버블링 시작: 이벤트는 가장 깊은 요소(이벤트가 발생한 요소)에서 시작하여 그 요소의 부모로 전파됩니다.부모 요소로 전파: 각 부모 요소에서 해당 이벤트를 처리할 수 있는 기회를 가지며, 최상위 요소인 document까지 전파됩니다.예제다음은 버블링을 설명하기 위한 간단한 예제입니다: 조부모 부모 자식 버튼 설명HTML 구조..

이벤트 처리 제어 메서드 preventDefault()기능: 이벤트의 기본 동작을 방지합니다. 예를 들어, 링크를 클릭했을 때 페이지 이동을 막거나, 폼 제출을 방지하는 데 사용됩니다.사용 예: 주로 태그나 태그와 같은 요소의 기본 동작을 막을 때 사용합니다.이벤트 전파: preventDefault()는 이벤트가 상위 요소로 전파되는 것에는 영향을 주지 않습니다. 이벤트는 계속해서 부모 요소로 버블링됩니다.stopPropagation()기능: 이벤트가 상위 요소로 전파되는 것을 막습니다. 즉, 이벤트가 부모 요소에 전달되지 않도록 차단합니다.장점: 특정 이벤트만 처리하고 싶을 때, 다른 이벤트 리스너가 실행되지 않도록 제어할 수 있습니다.return false기능: 이벤트의 기본 동작을 방지하는 것과..

자바스크립트에서 이벤트 객체는 이벤트가 발생할 때 생성되는 객체로, 다양한 프로퍼티를 포함하고 있습니다. 주요 프로퍼티type: 이벤트의 종류 (예: 'click', 'keydown' 등).target: 이벤트가 발생한 요소.currentTarget: 이벤트 리스너가 부착된 요소.bubbles: 이벤트가 버블링되는지 여부.cancelable: 이벤트가 기본 동작을 취소할 수 있는지 여부.clientX, clientY: 마우스 이벤트의 경우, 클라이언트 영역 내의 좌표.예제 코드 클릭하세요 설명HTML: 버튼을 만들고, 버튼에 클릭 이벤트 리스너를 추가했습니다.JavaScript: 버튼 클릭 시 이벤트 객체의 주요 프로퍼티를 콘솔에 출력합니다.이 코드를 브라우저에서 실행하면 버튼을 클릭할 때마다..

자바스크립트에서 객체는 키-값 쌍의 집합으로, 복잡한 데이터를 구조화하는 데 사용됩니다. 객체는 다양한 형태의 데이터(숫자, 문자열, 배열, 다른 객체 등)를 포함할 수 있습니다. 객체는 중괄호 {}로 정의하며, 각 키는 문자열 또는 심볼이며, 값은 다양한 데이터 타입이 될 수 있습니다. 객체 생성 예제 // 객체 생성const person = { name: "Alice", age: 30, isStudent: false, hobbies: ["reading", "travelling"], greet: function() { console.log(`Hello, my name is ${this.name}`); }};// 객체 속성 접근console.log(person..

자바스크립트에서 클래스를 만드는 방법은 다음과 같습니다. 기본적인 구조와 요소를 설명할게요.1. 클래스 정의클래스를 정의할 때 class 키워드를 사용합니다. class ClassName { // 생성자 constructor(parameters) { // 초기화 코드 } // 메서드 methodName() { // 메서드 코드 }}  2. 생성자생성자는 클래스의 인스턴스가 생성될 때 호출되는 특수한 메서드입니다. 객체의 초기 상태를 설정하는 데 사용됩니다.3. 메서드클래스 내에 정의된 함수입니다. 객체가 수행할 수 있는 동작을 정의합니다.예제아래는 학생 객체를 표현하는 Student 클래스를 만드는 예제입니다. class Student { c..

JavaScript에서 스코프(scope)는 변수의 접근 가능 범위를 결정하는 개념입니다. 주로 전역 스코프와 지역 스코프가 있습니다. 전역 스코프는 전체 코드에서 접근 가능하고, 지역 스코프는 함수 내에서만 유효합니다.예를 들어: let globalVar = "I'm a global variable";function myFunction() { let localVar = "I'm a local variable"; console.log(globalVar); // 접근 가능 console.log(localVar); // 접근 가능}myFunction();console.log(globalVar); // 접근 가능// console.log(localVar); // 오류: local..

1. Strict ModeES5(ECMAScript 5)부터 도입된 모드로 명시적으로 "use strict";를 선언해 활성화합니다.코딩 실수를 잡아내고 안전한 코드를 작성하는 데 도움을 줍니다.예) 암묵적 전역 변수 생성 금지, this가 명확하지 않을 때 undefined 반환 등. 예제:"use strict";x = 10; // ReferenceError: x is not defined 위 코드에서는 x가 선언되지 않은 채 사용되기 때문에 에러가 발생합니다. 2. Sloppy Mode (기본 모드)모든 JavaScript 파일에서 기본적으로 적용됩니다.느슨한 검사로 인해 암묵적 오류를 무시하며 코드가 실행됩니다.예제:x = 10; // 암묵적으로 전역 변수를 생성해 에러 없이 실행됨console..

가변인자란? 가변 인자 함수는 전달받는 매개변수의 개수가 고정되지 않은 함수를 말합니다. 즉, 호출 시 다양한 개수의 인자를 받아 처리할 수 있습니다. 일반적으로 가변 인자는 arguments 객체나 스프레드 연산자(...)로 처리합니다  화살표 함수에서 가변 인자 사용 방법화살표 함수는 일반 함수와 달리 arguments 객체를 사용할 수 없으므로, 스프레드 연산자(...args)를 사용해야 합니다 const sum = (...args) => args.reduce((acc, val) => acc + val, 0);console.log(sum(1, 2, 3)); // 6console.log(sum(10, 20, 30, 40)); // 100  스프레드 연산자: args는 배열 형태로 모든 인자를 받으며,..