[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
비주얼 스튜디오에서 동물 키우기 확장 프로그램 (vscode-pets) extension

비주얼 스튜디오에서 동물 키우기 확장 프로그램 (vscode-pets) extension

오늘은 심심한 화면을 꾸며주는 vscode-pets 확장 프로그램 설치와 사용법에 대해 알아볼 건데요 먼저 vscode-pets 확장 프로그램을 설치해줍니다 이렇게 설치를 완료해주시면 이렇게 밑에 vs code pets이 화면에 표시됩니다 (바로 표시되지 않는 분들은 비주얼 스튜디오를 종료했다가 다시 켜보시면 됩니다!) 그럼 이렇게 귀여운 고양이 한마리가 생성된답니다 이렇게 마우스 커서를 올리면 상호작용도 가능하답니다 오른쪽 위 +버튼을 클릭하면 다양한 동물들도 추가 가능합니다 ○버튼은 공을 던지는 버튼 휴지통 아이콘은 추가된 동물들을 제거 할 수 있습니다 Settings --> extensions --> vscode -pets 에 들어가셔서 옵션들을 바꿀 수 있습니다 마우스로 공 던지기 ,pet 크기 ..

  • format_list_bulleted HTML
  • · 2023. 8. 20.
  • 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