JavaScript 개괄(1)_21.06.01

생활코딩 강의 web2 javascript 복습 포스팅입니다.

제가 이해한 대로 정리하는 것이니

틀린 부분이 있을 수 있습니다!

댓글로 알려주시면 수정하도록 하겠습니다 :)

항상 열심히 배우겠습니다

 

JavaScript

-> 사용자와의 상호작용이 가능함

-> 동적임

	HTML	CSS	JavaScript
컴퓨터 언어	O	O	O
컴퓨터 프로그래밍 언어	X	X	O
확장자	.html	.css	.js

CSS가 아래와 같은 코드로 반복, 중복을 피할 수 있듯이

<link rel="style sheet" href="css파일명.css">

JavaScript도 아래의 코드를 활용하여 중복을 피할 수 있다

<script src="파일명.js"> </script>

 

코드를 짤 때는 중복을 피하는 것이 중요하다고 한다!!!! 본격적으로 JS에 대한 내용을 개괄해보자!

 

1. JS를 이용하는 방법

(1) <script> </script>

<script>
  document.querySelector('body').style.color="blue";
</script>

<input type="button" value="click" onclick="alert('hello')">

각 방법에 대한 소개는 밑에서 자세하게!

 

2. <script> </script>

(1)웹 페이지에 글쓰기

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

document. -> 이 페이지에

write(' ') ->  따옴표 안을 써라

정도로 생각하고 있습니다!

JS의 특징은 '1+1' 을 2로 나타낸다는 것입니다!

 

 

(2) 특정 태그의 CSS 설정하기

<script>
  document.querySelctor('a').style.color = 'blue'
</script>

<script>
  document.querySelectorAll('div')[0].style.color = 'red'
</script>

document.querySelector(' ')는 tag, class, id 등 해당 페이지에 있는 선택자를 모두 찾는 코드입니다.

document.querySelectorAll(' ')는 tag, class가 여러개일 때 그 중 하나를 지정하고 싶을 때 쓰는 코드입니다.

--------------------------------------------

저는 코드를 다음과 같이 이해했습니다.

document.querySelector( 'a ' ) -> 해당 웹페이지에서 모든 a 테그를 찾아서

style.color -> 그 css의 color를

blue로 해라!

 

document.querySelectorAll ('div')[0] ->해당 페이지에 있는 div태그 중 첫번째를 찾아서

style.color -> 그 css의 color(즉, 글자색)을

red로 해라!

 

*css의 color :  css에서 color는 글자색을 의미하는 코드입니다!

css로 글자색을 설정하는 방법은 다음과 같습니다

<a href="~~~~" style= " color : blue ; "> </a>

<style>
  a{
    color : blue;
    }
 </style>

 

 

(3) 변수 설정하기 (var)

<script>
  var aAll = document.querySelector('a')
  aAll.style.color = 'blue'
  aAll.style.backgroundColor= ' black'
</script>

코드를 간단하게 만들기 위해서 반복되는 코드는 변수로 설정할 수 있습니다.

 

*CSS는 background-color라고 하지만 JS에서는 backgroundColor입니다!

 

3. <input type = " " >

(1) 예시

<input type="button" value="click" onclick="alert('hi')">

<input type="text" onchange="alert('changed')">

<input type="text" onkeydown="alert('keydown')">

 

(2) 이벤트

onclick, onchage, onkeydown 등 on~~인 속성은 이벤트(사건)이라고 불린다.

해당 사건이 일어난 경우 큰 따옴표 안의 코드가 작동되는 것이다.

 

이벤트가 일어났을 때 실행되는 코드는 JS이다. 따라서 위에서 언급한 코드들을 <script> </script>없이 사용할 수 있다.

<input type="button" value="click" onclick="
  document.querySelector('body').style.backgroudnColor='blue'">

 click이라고 적힌 버튼을 누르는 경우(onclick) 해당 페이지의 body 태그의 배경색이 파란색으로 변한다

 

----------------------------

개괄 (2)

4. 조건문

 

5. 리펙토링

 

6.반복문

 

7.함수

 

8.객체

 

9. jQuery