[JavaScript] 팝업 창 열기, 닫기, 이동하기, 모니터 해상도, 웹 브라우저 크기, 스크롤 이동

[JavaScript] 팝업 창 열기, 닫기, 이동하기, 모니터 해상도, 웹 브라우저 크기, 스크롤 이동

window open html DOCTYPE html> 새창(새탭) 열기/닫기, 새창/새탭 금지(웹브라우저 설정) #container { width: 300px; margin: 20px auto; } button { border: 1px solid #222; padding: 15px; font-size: 0.8em; margin-right: 20px; } 팝업 창 열기 팝업 창 닫기 notice html DOCTYPE html> 공지사항 #content { border: 2px double skyblue; border-radius: 10px; padding: 10px; } ul { margin-left: 15px; list-style-type: none; } ul li { margin: 10px 5px;..

  • format_list_bulleted HTML/JavaScript
  • · 2023. 8. 26.
  • textsms
[JavaScript] children, parent, siblings, before after, remove, classList, forbidden, char num, date

[JavaScript] children, parent, siblings, before after, remove, classList, forbidden, char num, date

dom children html DOCTYPE html> Document HTML CSS Vanila js React js // TODO: 자식 요소(태그) 접근 // 선택함수 : querySelector(css선택자) let ulTag = document.querySelector("ul"); // ul 태그 // TODO: 사용법 : 태그.children[1] : 2nd li // 태그.children[2] ; 3rd li let two = ulTag.children[1].innerHTML; // 2nd li의 텍스트 let three = ulTag.children[2].innerHTML; // 3rd li의 텍스트 // 출력 console.log("two", two); console.log("thre..

  • format_list_bulleted HTML/JavaScript
  • · 2023. 8. 23.
  • textsms
[JavaScript] DOM querySelector, onclick, mouseover, setInterval, addEventListener

[JavaScript] DOM querySelector, onclick, mouseover, setInterval, addEventListener

Dom query Selector html DOCTYPE html> Document Process - 1 Process - 1 js // DOM : Document Object Model == html 태그들 말함 // document : 웹브라우저 html 문서 // querySelector("태그") : DOM(html태그) 접근하는(선택하는) 함수 // vs css 선택자와 비슷 // 사용법 : document.querySelector("태그") : html 태그 선택 // 태그 : 속성(style:css속성) , 상세속성(backgroundColor) // 예) document.querySelector("태그").style.backgroundColor = "값"; document.querySele..

  • format_list_bulleted HTML/JavaScript
  • · 2023. 8. 22.
  • textsms

[JavaScript] 함수, 객체

exam7 html DOCTYPE html> Document js // 문제 // 연습문제 1) // 현재 날짜를 아래와 같이 주어진다. // 12시 이전이면 "오전입니다." 라고 출력하고, // 12시 이후이면 "오후입니다." 라고 출력하는 // 프로그램을 코딩하세요. // let date = new Date(); // let hour = date.getHours(); // if(hour Document js // 객체 : 실생활에서 보이는 모든 것을 객체라고 함 // 예) 사람, 사물 등 // 객체의 요소 : 1) 속성(특징나타냄, 90%), 2) 함수(행동, 동작) // 비교) css 사용법 // 선택자 { // 속성: 값; // 속성2: 값2; // ... // } // TODO): 객체 사용법(..

  • format_list_bulleted HTML/JavaScript
  • · 2023. 8. 21.
  • textsms
[JavaScript] 배열, 배열함수, 내장함수, 반복문 (if switch, for, for while, array,document)

[JavaScript] 배열, 배열함수, 내장함수, 반복문 (if switch, for, for while, array,document)

exam5 html DOCTYPE html> Document #output { /* 가로 */ width: 700px; /* 중앙정렬 */ margin: 30px auto; /* 배경색 */ background-color: black; /* 글자색 */ color: yellow; /* 글자 중앙 정렬 */ text-align: center; /* 글자 크기 */ font-size: 2em; } js /* 조건문 연습 */ // 1) 입력값이 y이면 글쓰기 라고 출력하고 // y가 아니면 글수정이라고 출력하기 // 힌트 : 조건문 // 새로운 출력방법(3) : // console.log(값) 대신에 아래 코드를 사용하면 화면에 출력됨 // 값이 웹브라우저에 출력됨 // document.querySelect..

  • format_list_bulleted HTML/JavaScript
  • · 2023. 8. 18.
  • textsms

[JavaScript] for문, 반복문 예제

기본함수 입력받는 함수 prompt 특수문자는 \붙이기 // 문자열 특수문자 : \(역슬래쉬) // 특수문자 사용법 : \영문자 소수점 자르기 함수 : 숫자.toFixed(자를자리수) 자르기 함수 .split("자를문자") for문 html DOCTYPE html> Document js // 반복문 : for문(80%) // 왜? 같은 명령문을 많은 횟수를 출력하고 싶을 때 사용 // 예) alert("Hello"); // 10번출력 // 사용법 : 초기값을 조건식에 넣어 판단해서 참이면 반복하고, // 거짓이면 중단함 // for(초기값; 조건식; 증감식) { // 반복문(문장); // } // 예제) 안녕하세요를 3번 출력하세요 // 단, 반복문을 사용하세요 // for(let i=0; iDOCTYP..

  • format_list_bulleted HTML/JavaScript
  • · 2023. 8. 17.
  • textsms