본문 바로가기
반응형

WINK-(Web & App)/HTML & CSS & JS 스터디

 (120)
[2024 신입부원 기초 스터디] 이종윤 #6주차 (웹 기초 스터디 마무리~) 이번 시간에는 마무리로 지금까지 배운 js를 활용하여 마지막 실습을 했다.실습 내용은 'stop watch' 만들기!!!이 실습을 하기 전에 선행 되어야 할 개념 부터 배우자.  1. Date 객체란?저번 시간에도 배웠지만 Date 객체는 날짜를 저장할 수 있고, 날짜와 관련된 메서드도 제공해주는 내장 객체이다. new Date()를 호출하면 새로운 Date 객체가 만들어지는데, new Date()는 다음과 같은 형태로 호출할 수 있다. 2. innerText와 innerHTML란? innerText 는 태그 안의 텍스트를 가져오거나 바꾸는 기능을 한다.(바뀌는 범위 : 텍스트 => 텍스트만 바뀜) innerHTML는 태그 자체를 가져오거나 바꾸는 기능을 한다.(바뀌는 범위 : 텍스트 => 전체 다 바뀜..
[2024 신입부원 기초 스터디] 백채린 #5주차 (Clock_실습) window.onload()- 해당 요소가 완전히 로드되었을 때, 자동으로 호출되는 함수를 지정하는 속성- 웹 페이지에 여러번 사용해도 window.onload() 함수는 하나만 적용 window.onload = () => { console.log("wink");}  Data 객체 - 날짜와 시간을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수• 시간 메소드: getHours(), getMinutes(), getSeconds() ...• 날짜 메소드: getFullYear(), getMonth(), getDate() ... let date = new Date();console.log(date); //현재 날짜 및 시간 출력  innerText: Element의 속성, 해당 Element 내에서 사용..
[2024 신입부원 기초 스터디] 박건민 #6주차 웹 기초 스터디 마무리~ Date 객체날짜와시간(년,월,일,시,분,초,밀리초)을위한메소드를제공하는빌트인 객체, 생성자 함수시간메소드:getHours(),getMinutes(),getSeconds()...날짜메소드:getFullYear().getMonth(),getDate()...  innerText와 innerHTMLinnerText: Element의 속성으로, 해당 Element 내에서 사용자에게보여지는 텍스트 값을 가져오거나 설정 가능innerHTML: Element의 속성으로, 해당 Element의 HTML, XML을 가져오거나 설정 가능// innerText 사용// 스타일 적용되지 않은 기본 폰트로 innerText 출력const innerT = document.getElementById('innerT');innerT...
[2024 신입부원 기초 스터디] 이종윤 #5주차 (JS_실습: Clock만들기) window.onload()란?javaScript는 html 내의 요소들을 움직일 수 있는 dom 객체를 조작하는 방식으로 주로 사용한다.위부터 차례차례 읽어 들이는 프로그래밍 본연의 작동 방식과, 실행 이전에 에러 체크를 하지 않고 실행을 하는 인터프리터 언어적 특성으로 인해 자바스크립트는 작성 위치에 따라 오작동을 일으키기도 한다.  예를들어 위와 같이 사용을 하면, 원칙상으로 자바스크립트의 document.getElementById( 'hi' ); 가 html 내부 id가 hi이란 태그가 생성되기도 전에 실행됨으로 문제가 일어난다.그러므로 자바스크립트 문서를 뒤로 옮겨야만 한다. 하지만 자바스크립트가 아래쪽에 놓여 있고 길게 늘어지게 된다면 가독성이 떨어져 보기에도 안 좋아진다.이러한 불편을 해결하..
[2024 신입부원 기초 스터디] 김지나 #5주차 01. window.onload(): 해당 요소가 완전히 로드되었을 때, 자동으로 호출되는 함수를 지정하는 속성- 웹 페이지에서 여러번 사용해도 하나만 적용됨window.onload = () => { console.log("");} 02. Date 객체: 날짜와 시간을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수- 시간 메소드: getHours(), getMinutes(), getSeconds() ...- 날짜 메소드: getFullYear(), getMonth(), getDate() ...let date = new Date();console.log(date); //현재 날짜, 시간 출력 03. innerText와 innerHTML- innerText: Element의 속성. 해당 Element 내..
[2024 신입부원 기초 스터디] 김민서 #5주차 window.onload()해당 요소가 완전히 로드되었을 때, 자동으로 호출되는 함수를 지정하는 속성이다.웹 페이지에서 여러번 사용해도 하나만 적용한다!window.onload = () => { console.log("wink");} Date 객체날짜와 시간을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수이다시간 메소드 : getHours(), getMinutes(), getSeconds() ...날짜 메소드 : getFullYear(), getMonth(), getDate() ...let date = new Date();let hours = date.getHours();console.log(hours); //현재 시간 출력 innerText, innerHTMLinnerText : 해당 Elemen..
[2024 신입부원 기초 스터디] 김태일 #5주차 01. window.onload() 속성- 해당 요소가 완전히 로드되었을 때, 자동으로 호출되는 함수를 지정하는 속성- 웹 페이지에서 여러 번 사용해도 window.onload() 함수는 하나만 적용  02. Date 객체- 날짜와 시간(년, 월, 일, 시, 분, 초, 밀리초)을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수시간 메소드 : getHours(), getMinutes(), getSeconds()날짜 메소드 : getFullYear(), getMonth(), getDate()//현재 날짜 및 시간이 출력let date = new Date();console.log(date);  03. innerText와 innerHTML- innerText : Element의 속성으로, 해당 Element ..
[2024 신입부원 기초 스터디] 이종윤 #4주차 (JS_dom) JavaScript란?  자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용되며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다.     DOM이란?DOM은 문서 객체 모델(The Document Object Model)의 약자로  HTML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다...
반응형

티스토리툴바