728x90 자바스크립트13 인터랙티브 자바스크립트 : 이벤트 이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들 ex) 버튼 클릭, 스크롤, 키보드 입력, ...이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다. 이벤트가 발생했을 때 어떤 특별한 동작을 하도록 이벤트를 다루는 것을 이벤트 핸들링이라고 부른다구체적인 동작들을 코드로 표현한 함수 부분을 이벤트 핸들러라고 부른다 * 이벤트 핸들링은 js 코드 뿐만아니라 html 코드에도 작성할 수 있긴 하지만 코드의 유지보수를 위해서 js에 작성하는 편 이벤트 핸들러 등록하기 onclick 프로퍼티를 사용하.. 2024. 6. 8. 인터랙티브 자바스크립트 : 브라우저와 자바스크립트 자바스크립트는 원래 브라우저를 다루기 위해 등장한 언어 윈도우 객체는 브라우저의 창을 대변한다//window 객체 출력 console.log(window);console.log(window.innerWidth); // 탭 내부의 너비 console.log(window.innerHeigth);// 탭 내부의 높이 window.open() → 새로운 창이 열림window.close() → 새로운 창을 닫음 윈도우 객체는 자바스크립트의 다른 모든 객체를 포함하고 있다→ 따라서 윈도우 객체를 전역 개체라고도 부른다 DOM 문서 객체 모델 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록.. 2024. 6. 8. 인터랙티브 자바스크립트 : 태그 선택하기 웹 서비스와 JavaScript JavaScript웹 페이지를 다양하게 동작하도록 만들어준다 id로 태그 선택하기 document 객체의 getElementById 라는 메소드를 사용해서 id로 태그를 선택한다 // id 태그 선택하기const myTag= document.getElementById('myNumber');//접근하고자하는 id 값을 문자열로 전달한다console.log(myTag); → id 속성을 택해서 어떤 요소를 가져오겠다는 의미 ☑️실행결과myNumber를 id로 가진 태그가 출력된다 💡존재하지 않은 id를 파라미터에 넣으면 undefined가 아니리 null 값이 리턴된다 class로 태그 선택하기 document 객체의 getElementsByC.. 2024. 6. 8. 5주차 스터디 자바스크립트 웹 개발 기본기 (3) 비동기 실행과 Promise 객체 [코드잇 부스트 백엔드 스터디 ] 3. 비동기 실행과 Promise 객체 fetch 함수와 비동기 실행 비동기 실행한번 시작된 작업이 완료되기 전에 바로 다음코드로 실행이 넘어가고 나중에 콜백이 실행됨으로써 작업이 마무리 된다 console.log('Start!');fetch('https://jsonplaceholder.typicode.com/users') .then((response)=>response.text()) .then((result)=>{console.log(result);});console.log('End'); fetch 함수에 비동기 실행이 되는 부분이 있다 fecth 함수는 리퀘스트를 보내고 어떤 객체를 리턴한다그 객체의 then 메소드로 콜백을 등록한다→ 콜백은 서버로부터 리스폰스를 받았을 때 실행된다 .. 2024. 6. 4. 5주차 스터디 자바스크립트 객체 지향 기본기 (2) [코드잇 부스트 백엔드 스터디 ] 2. 객체 지향 프로그래밍의 4개의 기둥 📌 객체 지향 프로그래밍의 핵심 개념 4가지추상화 캡슐화 상속 다형성 추상화 어떤 구체적인 존재를 원하는 방향으로 간략화해서 나타내는 것→ 따라서 클래스를 설계하는 것도 모두 추상화 과정에 해당! 💡클래스의 이름, 프로퍼티와 메소드의 이름을 잘 짓는 것 중요 추상화 직접 해보기 실습각 프로퍼티와 메소드 이름 위에 그 의미를 나타내는 간단한 주석을 직접 작성 class BankAccount { constructor(name, money) { // 소유주 this.holder = name; // 잔액 this.balance = money; } // 입금하기 deposit(money) { this.balance += m.. 2024. 6. 4. 5주차 스터디 자바스크립트 객체 지향 기본기 (1) [코드잇 부스트 백엔드 스터디 ] 1. 객체와 클래스 객체 지향 프로그래밍이란? 객체 간의 상호작용을 중심으로 하는 프로그래밍 객체• 객체의 상태를 나타내는 변수• 객체의 행동을 나타내는 함수 ex) 유저 - 변수: 유저의 아이디, 유저의 생일 / 함수: 좋아요, 상품 구매 💡객체 지향 프로그래밍→ 프로퍼티와 메소드로 이루어진 각 객체들의 상호 작용을 중심으로 코드를 작성하는 것 절차 지향 프로그래밍→ 변수와 함수를 가지고 작업의 순서에 맞게 코드를 작성하는 것 객체 만들기 1-1 : Object-Literal Object Literal• 객체를 나타내는 문자열 const user= { email : 'chris123@google.com', //프로퍼티 birthdate: '1992-03-21', buy(i.. 2024. 6. 4. 이전 1 2 3 다음 728x90
