Run JavaScript : <script>

HTML과 JavaScript

프로그램이라는 단어로 알아보는 Html과 Javascript 차이점

HTML: 컴퓨터 언어 / JavaScript: 컴퓨터+프로그래밍 언어
program에는 '순서'라는 개념이 중요한데(음악회의 연주회 순서를 프로그램이라 함) 때문에 프로그래밍은 순서를 만드는 행위로 볼 수 있고 프로그래머는 순서를 만드는 사람이라 정의할 수 있음.

따라서 시간의 순서에 따라 실행되어야 하는 기능을 프로그래밍 언어의 문법에 맞게 글로 적어두는 방식이 프로그래밍!
JS는 사용자와 상호작용을 하기 위해 고안된 컴퓨터 언어. 웹브라우저의 여러 기능이 시간 순으로 작동되도록 한다!

이에 따라 html은 프로그래밍 언어가 아니다. Html은 웹페이지를 묘사하는 언어이지 시간(조건)의 순서에 따라 일을 할 필요가 없기 때문이다.

이후 순서의 배치(코드)가 복잡해짐에 따라 단순하게 정리하는 방법도 고안되기 시작함...


Run JavaScript : console

console

console은 객체!!
console.log() 로그를 보여줌
console.dir() console 객체의 elements를 보여줌

JS를 통해 HTML파일의 요소를 조회할 수도 수정할 수도 있다!

HTML 식별자

<#id>

고유한 식별을 목적으로 하는 경우 사용 페이지에서 하나의 요소만 지정 가능 javascript에서 접근 목적. 현 페이지에서 한 개만이 유효
== Javascript

<.class>

재사용을 목적으로 하는 경우 사용 여러 개의 요소에 지정 가능
js에서도 접근이 가능하지만, 일단은 css에서 디자인적인 요소인 경우가 많다.
== css 쪽에서 주로 사용, 현 페이지에서 다중으로 설정이 가능하다.

<name>

form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성 여러 개의 요소에 지정 가능
값을 전달하기 위한 목적을 가지고 있는 경우가 많다. 다중 설정이 가능하다.
즉, A페이지에서 B페이지로 이동하는 경우 값을 넘겨준다.


자바스크립트 EVENT

onclick, onchange, onkeydown 등등...

  • js파일이 있기 때문에 js를 통해 html의 내용을 가져올 수 있는 거임
  • document가 html이 js파일을 load하기 때문에 존재
    → 그 다음에 browser가 우리가 document에 접근할 수 있게 해줌
  • element의 내부를 보고 싶으면 console.dir()
    기본적으로 object로 표시한 element를 보여줌(전부 js object임)
    그 element 중 앞에 on이 붙은 것들은 event
  • event : 어떤 행위를 하는 것
    모든 event는 js가 listen할 수 있음
  • eventListener : event를 listen함
    → js에게 무슨 event를 listen하고 싶은 지 알려줘야 함
  • title.addEventListener("click") : 누군가가 title을 click하는 것을 listen할 거임
    → 무언가를 해줘야함
const title = document.querySelector("div.hello:first-child h1");
// title이란 변수는 = HTML에서 div태그 중 아이디가 
function handleTitleClick(){
	title.style.color = "blue";
}
// 이벤트 동작 내용 서술 {title의 스타일 색상을 파랗게}
title.addEventListener("click",handleTitleClick);
//title에 event동작 기능 넣기. (이벤트의 종류는"click", 동작 내용 서술한 함수 이름)


※ 유저가 title을 click할 경우에 js단에서 실행되도록 해야함  
()는 함수를 실행하라는 의미로 보면 됨!()의 위치가 있는 곳에서 실행함. 
  
...("click",handleTitleClick());이렇게 하면 클릭 하기도 전에 
브라우저 상에서 동작되어버림! (파랑으로 변함)

-> 함수에 ()기입!!
function.handleTitleClick(){...}으로 작성해야 
유저가 클릭 => 함수이름 타고 JS내 함수가 실행!

JS를 통해 HTML파일의 요소를 조회할 수도 수정할 수도 있다!
원하는 값을 불러오는 방법에는 여러가지가 있다.

()안에는 "string"이 들어가야함

console.log() 객체의 로그를 보여줌
console.dir() 주어진 JS 객체의 모든 속성을 콘솔창에서 볼 수 있음

getElementById() Id로 객체를 확인 ❗️하나의 값
getElementsByClassName() 클래스 이름으로 객체 확인 ❗️배열
getElementByTagNaem() 태그 이름으로 객체 확인 ❗️배열

document.querySelector ❗️오직 하나의 element만 return.
동일한 selector를 가진 여러 요소들 중 첫번째만 가져옴! 자세히 알아보기->
document.querySelectorAll ❗️배열
style.스타일내용 = "값" 자세히 알아보기->

위에서 id 빼고는 배열을 가져오기 때문에 title.innerText 와 같은 방법은 사용할 수 없다.

참고
1. ex02)처럼 .style이 이벤트""안에서 작성될 경우 스타일 값은 ''로 작성해야함!
2. background-color (x) => backgroundColor (o)

ex 01) 알람창이 띄어지도록 작성된 코드웹브라우저 위에서 일어나는 여러가지 사건들 중 사용자에게 유용하게 상호작용하는 코드!

ex 02) 나이트 모드 코드

 document.querySelector('선택자').sytle.스타일 내용='값';
 ->js에서 'css스타일 주기'위한 '선택자' 선택
profile
FE 개발 공부 중

0개의 댓글