생활코딩 WEB2 - JavaScript (23.04.04)

💎WEB/Web 개념정리

˚₊✩‧₊ 생활코딩 WEB2 - JavaScript (23.04.04) ˚₊✩‧₊

HYEJU01 2023. 4. 4. 23:35

수업의 목적 ✅

자바스크립트 = 사용자와 상호작용

웹브라우저 한번 출력 후 수정 불가능 = 자바스크립트를 통해 디자인 수정 가능

자바스크립트가 html 을 제어하는 언어다!

동적으로 만들어주게된다 !

HTML과 JavaScript의 만남 1 (script 태그)✅

html 정적 / JavaScript 동적

  <script>
    document.write('1+1');
  </script>
  
  // 2

HTML과 JavaScript의 만남 2 (이벤트)✅

- onclick 뒤에는 JS 가 와야함

- JS 문법 해석에 따라 동작

on 으로 시작하는 속성 => 이벤트

HTML과 JavaScript의 만남 3 (콘솔)✅

- Console > '문자열'.length > 글자수 나옴

- Element > console (esc) > js 랜덤 당첨 코드 넣기 > 결과 완료

이미 만들어진 웹사이트에서도 해결가능

데이터타입 - 문자열과 숫자✅

- 숫자와 문자열은 다른 데이터 타입!

- 데이터 타입 확실하게 표현해야한다.

- "" 문자

- '' 문자

- "" 문자열

- "hello".trim() => 다양한 문법 적용 가

변수와 대입 연산자✅

변수를 왜 쓰는가?

var name = 'egoing'

"~" +  name + "~"

웹브라우저 제어✅

- css 본질 문법

- js 원하는 태그 선택

CSS 기초✅

-style 속성을 이용해서 CSS 사용하기
-style 태그를 이용해서 CSS 사용하기
-CSS 선택자

제어할 태그 선택하기✅

<body>
<input type=button" value="night" onclick="
documnet.querySelector('body').style.backgroundColor = 'black';
documnet.querySelector('body').style.color = 'white';
">

사용자와 상호작용, 동적으로 만드는 원리

제어 태그 선택

documnet.querySelector(".myclass")

저작자표시 비영리 변경금지

현재글생활코딩 WEB2 - JavaScript (23.04.04)

개발일지📝

˚₊✩‧₊ 생활코딩 WEB2 - JavaScript (23.04.04) ˚₊✩‧₊

'💎WEB/Web 개념정리'의 다른글

티스토리툴바

˚₊✩‧₊ 생활코딩 WEB2 - JavaScript (23.04.04) ˚₊✩‧₊

'💎WEB/Web 개념정리'의 다른글

관련글

티스토리툴바