비전공자 개발일기

Javascript 본문

Javascript

Javascript

HiroDaegu 2021. 7. 13. 23:28
728x90
SMALL

개요

  • Javascript with HTML
  • Javascript with CSS
  • Event
  • localStorage

Javascript with HTML

  • console에서 document라고 입력하면, 본인이 작성한 HTML 코드가 나옴
  • 이를 활용해, HTML의 정보 변경도 가능(새로고침을 하게 되면 변경한 기록은 다 지워짐)
  • document = Web page
  • HTML에 Javascript 연동시, <head>에 <script defer src= ...></script> 삽입
<script defer src="../js/app.js"></script>
  • getElementById(" ") = querySelector("# ")
const a = document.getElementById("아이디명")
const a = document.querySelector("#아이디명")
  • querySelector( ) VS querySelectorAll( ) VS getElementByClass( ), getElementByID( )
const a = document.querySelector(".클래스 / #아이디 등") // 1개의 element를 찾아줌
const a = document.querySelectorAll(".클래스 / #아이디 등") // 2개 이상의 elements를 찾아줌
// 하위 태그의 내용도 찾아서 보여줄 수 있는 함수​

const a = document.getElementById("아이디명")
// 하위 태그가 있을 경우 가장 먼저 찾아지는 element를 보여줌
  • Javascript에 HTML 태그 내에 있는 값을 가져오는 방법
<input type="text"> Tony </input>​
const a = document.querySelector("input)
a.value // Tony

 

Javascript with CSS

  • CSS 역시, Javascript로 컨트롤 할 수 있음(하지만, 각자의 역할이 있기에 위치에 맞게 사용)
  • HTML = 구조 / CSS = 스타일 / Javascript = 동적 처리
<div> Hello </div>
const a = document.querySelector("div")
a.style.color = "blue"

 

Event

  • 이름.addEventListner("이벤트명", 이벤트함수) 
    function submit(txt) {
	text.preventDefalut()
    console.log(txt)
}
이름.addEventListener("submit", submit)​
  • preventDefaullt( ): 브라우저의 기본 동작을 막아줌
  • 코드의 간소화
const a = document.querySelector("div")

function handleTitleClick() {
	console.log("title was clicked!")
}

a.addEventListener("click", handleTitleClick)
a.onclick = handleTitleClick                   // 같은 코드
function handleTitleClick() {
  const clickedClass = "clicked"
  if(h1.classList.contains(clickedClass)) {
    h1.classList.remove(clickedClass)
  }else {
    h1.classList.add(clickedClass)
  }
}

====(같은 코드)

function handleTitleClick() {
  h1.classList.toggle("clicked")
}

  • 이벤트 종류: on~ 단어 -> 이벤트 적용 가능 ex) onclick = 이벤트명: click
console.dir( ) // ( ) 내 속성 확인
  • 그 외
    1. 문자열의 길이 확인 = 변수명.length
    2. String 타입과 변수를 합치는 방법
"hello " + 변수 = `hello ${변수}`

localStorage

  • 저장한 값을 기억하는 공간
localStorage.setItem("key", "value")
  • 호출
localStorage.getItem("key")
  • 삭제
localStorage.removeItem("key")
728x90
LIST

'Javascript' 카테고리의 다른 글

Javascript  (0) 2021.07.18
Javascript  (0) 2021.07.16
Javascript  (0) 2021.07.15
Javascript  (0) 2021.07.14
Javascript  (0) 2021.07.12
'Javascript' Related Articles more