728x90
반응형
javascript prototype
(심층)자바스크립트2024. 9. 4. 03:43javascript prototype

let user = { name: "John", age : 45}console.log(user.name);// Johnconsole.log(user.hasOwnProperty("email"));// false - hasOwnProperty는 어디서 왔나요? 현재 user 객체 변수에는 두 개의 속성(name, age)만 있는데hasOwnProperty는 어디서 나온 것일까?(객체 내부에는 메소드가 없다.) user 객체 변수를 콘솔로 찍어보면, [[Prototype]] : Object라는 것을 확인할 수 있다.아래를 내리다보면, hasOwnProperty라는 메소드를 찾을 수 있다.그리고 우리는 이것을 가져다 사용할 수 있다.=> 모든 객체는 global Object prototype을 가지며, 이것..

DOM Event
(심층)자바스크립트2024. 9. 3. 11:47DOM Event

Q. 어떤 버튼을 클릭했을 때 어떤 액션이 일어나게 하려면 어떻게 해야 할까?  - Event Listener :마우스를 이용해서 버튼을 클릭할 때는 클릭 "이벤트"가 발생한다.이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데, 그 함수가 바로 이벤트 리스너이다.  - addEventListener() :위에서 말한 것처럼 어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는이벤트 리스너를 해당 객체나 요소에 등록해줘야 한다.이벤트 리스너 등록 방법을 살펴보도록 하자. 1. 자바스크립트 코드에서 프로퍼티로 등록.window.onload = function () { // 문서가 load 될 때 이 함수를 실행 let text = document.getElementById("te..

Document Object 이용해보기
(심층)자바스크립트2024. 9. 3. 01:46Document Object 이용해보기

- Window Object window 객체는 브라우저에 의해 자동으로 생성되며 웹 브라우저의 창(window)을 나타낸다.또한 window는 브라우저의 객체이지 자바스크립트의 객체가 아니다. 이 window 객체를 이용해서1. 브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어하고 할 수 있다.2. 또한 var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 된다.   - Document Object Window 객체가 브라우저 창이라고 하면document 객체는 브라우저 내에서 콘텐츠를 보여주는 웹 페이지 자체라고 할 수 있다.  이제부터 DOM 객체를 자바스크립트를 사용하여 삭제하거나 업데이트 해보도록 하겠다.아래의 코드를 사용할 것이다.  M..

정규표현식 : regexp
(심층)자바스크립트2024. 1. 18. 01:10정규표현식 : regexp

지금까지 자바스크립트를 꽤나 공부해왔다고 생각했지만, 정규표현식에 관하여 제대로 접하게 된 건 이번이 처음이었다. 검색, 유효성 검사 기능을 만들 때는 chat gpt의 도움을 많이 받았다...ㅠㅠㅠㅠ 그리하여, 고심하다 시작된 정규표현식 파헤치기! 그렇게 깊게 파헤친 것은 아니다. (너무 깊게 파고들면 시간이 엄청 소요된다고 들었기 때문에 기본적인 개념과 실습 정도만 해보도록 하겠다.) - 정규표현식의 역할 1. 문자 검색(search) 2. 문자 대체(replace) 3. 문자 추출(extract) - 테스트 사이트 https://regexr.com/ RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test ..

[2023-12-06] JAVASCRIPT - 생성자 함수 내에서 일반 함수와 화살표 함수의 차이점
(심층)자바스크립트2023. 12. 6. 18:32[2023-12-06] JAVASCRIPT - 생성자 함수 내에서 일반 함수와 화살표 함수의 차이점

오늘은 자바스크립트 생성자 함수 내에서 일반 함수와 화살표 함수의 차이점에 관하여 알아보겠다. 이 두 가지 함수의 가장 큰 차이점은 'this'의 바인딩 방식이다. 일반 함수에서 'this'는 호출 시점에 결정되는데, 생성자 함수에서 일반 함수를 선언하면 'this'는 그 생성자 함수의 인스턴스를 가리킨다. function Car() { this.speed = 0; this.speedUp = function() { this.speed++; }; } const car = new Car(); car.speedUp(); console.log(car.speed); // 1 위 예시에서 speedUp 메소드는 일반 함수로 선언되었고, 이 메소드를 호출하면 this는 car 인스턴스를 가리킨다. 그러나 화살표 함수..

논리연산자&& (AND)
(심층)자바스크립트2023. 7. 13. 18:58논리연산자&& (AND)

요즘 다시 자바스크립트의 개념을 공부하고 있는데, 그동안 많이 헷갈렸던 부분에 대하여 이번에 배우게 되어 정리를 해보고자 한다. 나는 논리연산자 &&, 즉 AND가 둘 다 true일 때 true를, 하나라도 false이면 false를 출력하는 용도로만 사용되는 줄 알았다. 근데 이 방식은 전통적인 프로그래밍 방식이라고 한다. alert(true&&true); // true alert(false&&true); // false alert(true&&false); // false alert(false && false); // false if(1 && 0) { // 피연산자가 숫자형이지만 논리형으로 바뀌어 true && false가 됩니다. alert("if 문 안에 falsy가 들어가 있으므로 alert창은 ..

728x90
반응형
image