57일차 JS

Dogeun Lee·2023년 2월 23일

개요

Script 언어
기본 프로그램의 동작을 사용자에 요구에 맞게 수행되도록 도와주는 언어

별도의 컴파일을 진행하지 않고
인터프리터를 이용하여 소스코드를 한줄 씩 읽어 바로 실행

compile에 소요되는 시간이 없다.
대신 실행시간이 느리다.

java script란?
웹브라우저에서 많이 사용되는 인터프리터 방식의 객체지향 프로그래밍 언어
ECMA script 표준을 따른다.

자바스크립트 작성방법
1) 브라우저 콘솔에 직접 작성
2) 태그에 직접 JS 코드를 작성(inline)
3) html문서 내부에 <script태그를 사용해서 저장> ( internal )
4) html외부에 파일(.js)을 이용해서 작성 (external)

js
onclick 클릭했을 때 발생하는 이벤트

alret 알람창이뜬다-
document.getElementById("box").style.backgroundColor = 'red'; 색바꾸기

get/set으로 읽고 변경

js
innerHTML

get : html을 그대로 read(code)
set : html을 해석해서 표현해줌(컴파일러해줌)

innerText

get : html을 문자열로 read(none code)
set : html을 해석하지않고 그대로 문자열(코드형식)으로 표현함

js
confirm("내용")
prompt("내용")
조건문
if(){}else(){}

DOM

    1. id 속성값으로 접근하기
     - document.getElementById("id");

    2. class 속성값으로 접근하기
     - document.getElementsByClassName("class");
    
    3. name속성값으로 접근하기
     - document.getElementsByName("name");

    4. tag 네임으로 접근하기
     - document.getElementsByTagName("tagname");
     
    5. css 선택자를 이용해서 접근하기
     1) document.qureySelector("#id or .class ect..");
      - 단일요소를 선택하는 방법
      - 선택된 요소가 여러개면 첫번 째 것만 불러올수있다.

     2) documnet.qureySelectorAll("#id or .class ect..")
      - 다중 요소를 선택하는 방법 ( 배열 형태로 반환 )
        ( 각각의 인덱스를 가지고 있다. )

//스크롤을 가장 밑으로 내리는 방법 //요소.scroll //Top : 요소내부현재스크롤위치 //Height : 스크롤전체높이 //Top = 위치 : 스크롤을 특정위치로 보냄