본문 바로가기
생활코딩/javascript

공부정리_javascript(1~23강)

by Sharon kim 2021. 9. 12.

 

WEB2 JavaScript - 1.수업소개

사용자와 상호작용하는 웹페이지를 만들고 싶다는 욕망.

그래서 태어난 기술이 바로

JavaScript

동적으로 사용자와 상호작용

수많은 웹사이트들이 프로그램처럼 사용자와 상호작용하면서도 검색엔진을 통해서 검색된다는 것은

웹만이 가진 독창적인 특성

HTML 정보라는 멈춰 있는 이미지를 그리는 것
JavaScript 정보라고 하는 그 이미지를
마치 영화처럼 움직이게 함

 

WEB2 JavaScript - 2.수업의 목적

Day 와 night 버튼으로 body 색 바꾸기

<input type=“button” value=“night” onclick=“ 
Document.querySeletor(‘body’).style.backgroundColor=‘black’;
Document.querySelector(‘body’).style.color=‘white’;”> 

/*사용자가 night라고 하는 버튼을 클릭했을 때(onclick=자바스크립트),
이 문서(document)에서 body 태그의 style 속성 값으로
'background color를 black으로 한다'라고 하는 코드*/

<input type=“button” value=“day” onclick=“ 
Document.querySeletor(‘body’).style.backgroundColor=‘white;
Document.querySelector(‘body’).style.color=‘black’;”> 

/*사용자가 day라고 하는 버튼을 클릭했을 때(onclick=자바스크립트),
이 문서(document)에서 body 태그의 style 속성 값으로 
'background color를 white로 한다'라고 하는 코드*/

 

Elements는 태그라는 뜻

첫번째,

'자바스크립트는 사용자와 상호작용을 하는 언어이다'

두번째,

웹브라우저는 한번 화면에 출력되면 자기 자신을 바꿀 수 없다

예시)

여기 있는 body 태그는 언제나 body 태그.

하지만, JavaScript를 이용해서 여기 있는 버튼을 클릭하면

여기 있는 JavaScript 코드에 따라서

body 태그에 style이라는 속성이 추가되면서

이 body 태그의 디자인을 바꿔준다.

'JavaScript가 HTML을 제어하는 언어다'

 

WEB2 JavaScript - 3. HTML과 JS의 만남 : script 태그 
<script>//'지금부터 JavaScript가 시작됩니다'
//‘이 문서에'라는 뜻의 document.write document.write(hello world')
document.write(1+1) //2가 나옴
                    //html에서는 1+1로 나옴 
</script>

<기억해야할 점>

document.write()는 JavaScript 코드다.

웹페이지에 글씨를 출력할 때는

document.write를 쓴다.

WEB2 JavaScript - 4.HTML과 JS의 만남 : 이벤트

<nput type=“button” value=“hi” onclick=“alert(‘hi’)”>

'onclick 속성의 값으로는 반드시 JavaScript가 와야 됩니다'

'onclick 속성의 속성 값은 웹브라우저가 기억하고 있다가 이 onclick 속성이 위치하고 있는 태그(alert),

이것을 사용자가 클릭했을 때 기억하고 있던 JS 코드를 JS 문법에 따라 해석해

거기 적혀 있는대로 웹브라우저가 동작할 것입니다'

이렇게 웹브라우저 위에서 일어나는 일들을 event라고 함

어떤 이벤트가 일어났을 때 어떠한 JS가 실행되도록 하는 것이

바로 이 onclick이라는 거.

<input type=“text” onchange=“alert(‘changed’)”>

'내용이 변했을 때'라는 이벤트를 체크하는 이벤트 onchange

 

웹브라우저는 웹브라우저 위에서 일어나는 여러 사건중에 기념할 만한 것들 몇 가지,

약 10개에서 20개 정도 되는 이벤트들을 정의해 놓고 있다.

우리는 그 이벤트를 이용해서 사용자와 상호작용하는 웹페이지, 웹사이트를 만들 수 있다.

 

사용자가 어떤 키를 눌렀을 때 이벤트가 발생하게 하고 싶다면 이렇게 검색해 볼 수 있다.

검색 onkeydown event attribute(속성)

<input type=“text” onkeydown=“alert(‘key down!’)”>

event= onclick, on change, onkeydown 등등

 

WEB2 JavaScript - 5.HTML과 JS의 만남 (콘솔)

이 문자열의 문자의 개수를 알려 주는 명령 : length

alert(‘1234567’.length)

새 창에 7이 나옴

( 자바스크립트로 페이스북 추첨 하는 모습 )

 

Console이라는 걸 통해서 JS를 실행하면 지금 보고 있는 웹페이지를 대상으로 해서 JS가 실행 된다.

 

WEB2 JavaScript - 6.데이터타입 - 문자열과 숫자

데이터 타입=한국어로는 자료형

검색 javascript data type

 

문자 string 숫자 number

number라는 데이터 타입에서 아주 중요한 것은 연산

 

산술연산자

1+1 더하기

2-1 빼기

2*4 곱하기

6/2 나누기

 

“Hello world” 
‘Hello world’.length 
모질라에서 ‘Hello world’.toUpperCase 
‘Hello world’.Indexof(‘o’)
//4가 나옴 01234번째애 ‘o’가 있다는 말

‘Hello world’.IndexOf(‘world’)
//6이 나옴 6번째 부터 world가 시작된다는 말

 

Hello world ’.trim -> “Hello” : 공백을 없애주는 기능

 

1+1(숫자형) 과 “1”+”1”(문자형)은 같지 않음

숫자형은 2가 나오고, 문자형은 11이 나옴

 

WEB2 JavaScript - 7.변수와 대입 연산자

x = 1

y = 1

'오른쪽 항의 값을 왼쪽의 변수에 대입한다'라는 대입 연산자

1 = 2 이거는 무슨 뜻이냐면 1에 2를 대입한 것

당연히 1은 언제나 1이기 때문에, 1을 대입하면 안되니까 에러가 뜨는 거.

x라고 하는 것은 대입 연산자를 통해 값이 바뀔 수 있다는 뜻을 갖고 있는 변수

하지만 여기 있는 숫자 1은 언제나 1이기 때문에

'항상 상'자를 써서, 바뀌지 않는다는 뜻에서 '상수'

영어로는 constant

var name = ‘egoing’ alert(“sdfgsdfgsdfg”+name+”asdfadfasdgfba”);

 

WEB2 JavaScript - 8.웹브라우저 제어

지금부터는 두가지의 중요한 주제가 나오는데

첫 번째, CSS의 가장 본질적이고 중요한 문법들을 좀 살펴볼 것

출처 입력

두 번째로는 JavaScript를 이용해서 여러분이 제어하고자 하는 태그를

선택하는 방법에 대해서 살펴볼 것

 

WEB2 JavaScript - 9. CSS 기초 : style 속성

'어떤 특정 태그를 CSS라는 언어로 디자인하고 싶을 때는

style이라는 속성을 쓰고 그 안에 CSS의 속성이라는 문법을 사용하면 된다'

WEB2 JavaScript - 10.CSS 기초 (style 태그)

style을 따로 쓰는 법

 

WEB2 JavaScript - 11.CSS 기초 : 선택자

우선순위

id(식별,타갯팅)>class(그룹핑,포괄적)>선택자(span, div, p…)

 

WEB2 JavaScript - 12.제어할 태그 선택하기 
<input type=“button” value=“night” onclick=“
Document.querySeletor(‘body’).style.backgroundColor=‘black’; 
Document.querySelector(‘body’).style.color=‘white’;”>

<input type=“button” value=“day” onclick=“ 
Document.querySeletor(‘body’).style.backgroundColor=‘white;
Document.querySelector(‘body’).style.color=‘black’;”>

 

이 문서에서 document

query - query는 질의하다

웹브라우저에게 질의한다, 라는 뜻

 

Selector는 css의 Selector라는 뜻

 

검색 Javascript select tag by css selector

검색 Javascript element style

 

WEB2 JavaScript - 13.프로그램,프로그래밍,프로그래머

HTML과 JavaScript는 둘 다 컴퓨터 언어

JavaScript는 컴퓨터 언어이면서 동시에 컴퓨터 프로그래밍 언어

음악회 같은 곳에서는 시간의 흐름에 따라서

음악이 연주되는 순서를 예전부터 프로그램이라고 함.

즉 프로그램이라는 말의 중심에는

순서라는 의미가 깊숙히 자리잡고 있다.

이 순서를 만드는 행위를 프로그래밍이라고 하고

그 순서를 만드는 사람을 프로그래머.

출처 입력

HTML은

시간의 순서에 따라 실행되는 기능을 갖고 있지 않다.

하지만 JavaScript는 다르다.

JavaScript는 사용자와 상호작용하기 위해서 고안된 컴퓨터 언어이고

그러기 위해서는 시간의 순서에 따라 웹브라우저의 여러 기능이 실행되어야 하기 때문에

프로그래밍이라고 하는 형태를 띠고 있고 바로 이런 점이 HTML과 JavaScript를 다르게 하는 중요한 특징

 

WEB2 JavaScript - 14. 조건문 예고

깜깜한 상태에서 버튼을 클릭하면 밝은 상태가 되고

밝은 상태에서 버튼을 클릭하면 깜깜한 상태가 되는

기능을 구현

이런걸 토글(toggle)이라고 부름

<input type=“button” value=“black” onclick=“
if(document.querySelector(‘body’).dataset.mode === ‘day’){ 
document.querySelector(‘body’).style.backgroundColor = “black”;
document.querySelector(‘body’).style.color = “white”; 
document.querySelector(‘body’).dataset.mode = ‘night’; 
This.value = ‘day’;
}else {document.querySelector(‘body’).dataset.mode === ‘night’){ 
document.querySelector(‘body’).style.backgroundColor = “white”;
document.querySelector(‘body’).style.color = “black”; 
document.querySelector(‘body’).dataset.mode = ‘day’; 
This.value = ‘night’; }
WEB2 JavaScript - 15. 비교 연산자와 블리언 
<!doctype html>
<html>
  <head>
    <meta charset=“utf-8”> 
    <title></title> 
  </head>
  <body>
    <h1>Comparison operator(는 비교 연산자) & Boolean</h1> 
    <h2>===</h2>
    <h3>1===1</h3>
  <script> 
    document.write(1===1);//true
    document.write(1<2);//true 
  </script>
    <h3>1===2</h3>
  <script>
    document.write(1===2);//false 
    document.write(1>2);//false 
  </script> 
  </body> 
</html>

데이터 타입

Number - 데이터 많음

String - 데이터 많음

Boolean - 2개의 데이터(true/false)로 이뤄져 있는 타입 >>반복에서 벗어나게 해줌

 

WEB2 JavaScript - 16.조건문 
<html> 
  <head>
    <meta charset=“utf-8”>
    <title></title> 
  </head>
  <body> 
    <h1>Conditional statements</h1>
    <h2>program</h2>

  <script> 
    document.write(“1<br>”);
    document.write(“2<br>”);
    document.write(“3<br>”);
    document.write(“4<br>”); 
  </script> 

    <h2>IF-TRUE</h2> 

  <script> 
    document.write(“1<br>”);
    if(true){ document.write(“2<br>”);
    }else{ document.write(“3<br>”);
    } 
    document.write(“4<br>”); //124 
  </script> 

    <h2>IF-FALSE</h2>

  <script> 
    document.write(“1<br>”);
    if(false){ document.write(“2<br>”);
    }else{ document.write(“3<br>”); 
    } 
    document.write(“4<br>”); //134 
  </script>
  </body>
</html>

 

즉, 불리언의 값이 무엇이냐에 따라서 실행되는 코드가 바뀐다.

물론 우리가 지금 짠 코드는 여기에 true와 여기에 false라고 되어 있는 부분이 그냥 우리가 불리언 값을 직접 코딩을 해놨기 때문에 얘는 언제나 true. 얘는 언제나 false이기 때문에 이것은 사실 완전히 쓸모없는 코드.

조건에 따라서 실행되는 코드가 달라지지 않기 때문에 그럼 이제 그 다음에 해야 될 것은 여기 있는 이 if 뒤에 오는 괄호 안에 Boolean 값이 true나 false로 들어오는데 조건에 따라서 true가 오고 조건에 따라서 false가 오도록 하면 되는 거.

 

WEB2 JavaScript - 17.조건문의 활용

검색 Javascript element get value

<input id=“night_day” type=“button” value=“night” onclick=“
if(document.querySelector(‘#night_day’).value === ‘night’){
document.querySelector(‘body’).style.backgroundColor = “black”;
document.querySelector(‘body’).style.color = “white”;
document.querySelector(‘#night_day’).value = ‘day’ 

} else { document.querySelector(‘body’).style.backgroundColor = “white”; 
document.querySelector(‘body’).style.color = “black”; 
document.querySelector(‘#night_day’).value = ‘night’; 
}

 

WEB2 JavaScript - 18.리팩토링 중복의 제거

리팩토링이라는 건 뭐냐면 우리가 코딩을 하고 나면 코드가 좀 비효율적인 면들이 생기기 마련.

그러면 동작하는 것은 그대로 두고 코드 자체를 아주 효율적으로 만들어서 그 코드의 가독성을 높이고,

유지보수를 하기 편리하게 만들고, 중복된 코드를 낮추고. 이러한 방향으로 코드를 다시

개선하는 작업을 리팩토링

 

소프트웨어가 커지고 복잡해지는 데 있어서

틈틈이 리팩토링을 해야 좋은 프로그램을 만들 수 있다.

 

WEB2 JavaScript - 19.반복문 예고 
<input id = “night_day” type=“button” value=“night” onclick=“
var target = document.querySelector(‘body’);
if(this.value === ‘night’ ){ 
target.style.color = ‘white’;
this.value = ‘day’; 
var links = document.querySelectorAll(‘a’);
Var i = 0; while(I<links.length){
links[I].style.color=‘powerblue’; 
i=i+1; 
} 
}else { target.style.backgroundColor = ‘white’; 
Target.style.color = ‘black’;
This.value = ‘night’; 
var links = document.querySelectorAll(‘a’); 
var i = 0; while(i<links.length){
Links[I].style.color=‘blue’; 
i = i+1; 
} 
}“>

night 버튼을 클릭하면 보시는 것처럼 태그에 style 속성이 추가되면서 powder blue가 적용되고

day로 바꾸면 blue로 바뀌는 걸 통해서 이렇게 어둡고 밝음에 따라 잘 보이도록 만들 수 있게 된다.

그걸 하기 위해서 필요한 것이 바로 여기 있는 이 코드

이 코드의 대략적인 내용은 이 웹 페이지에 있는 모든 태그를 가져온 다음에

그 태그 하나하나를 하나하나에 대해서 반복적으로 powder blue 컬러를 지정한다,

이런 내용이 들어 있는 코드

 

WEB2 JavaScript - 20.배열 
<!doctype html>
  <html>
  <head>
    <meta charset=“utf-8”>
  <title></title>
  </head>
  <body>
    <h1>Array</h1>
    <h2>Syntax</h2>
  <script>
    var coworkers = [“egoing”, “leezche”];
  </script>
    <h2>get</h2>
  <script>
    document.write(coworkers[0]);//egoing
    document.write(coworkers[1]);//leezche
  </script>
  <h2>count</h2>//javascript array count 검색
  <script>
    document.write(coworkers.length);//2
  </script>
    <h2>add</h2>//javascript array add data 검색
  <script>
    coworkers.push(‘duru’);
    coworkers.push(‘raeho’);
    //push는 데이터를 끝에 추가
    //javascript array 로 검색
    // concat, fill, join, pop, pus 등등
  </script>
  </body>
</html>

배열과 반복문은 환상의 콤비

 

WEB2 JavaScript - 21.반복문 
<!doctype html> 
<html> 
  <head> 
  	<meta charset=“utf-8”>
  </head> 
  <body> 
  	<h1>loop(반복문)</h1>
 	 <ul>
  <script> 
  	document.write(‘<li>1</li>’); 
 	 var i = 0; 
 	 while(i < 3){ document.write(‘<li>2</li>’); 
 	 document.write(‘<li>3</li>’); i = i+1; 
 	 } document.write(‘<li>4</li>’); //1 2 3 2 3 2 3 4 로 나옴 
 	 </script>
 	 </ul>

 

WEB2 JavaScript - 22.배열과 반복문 
<!doctype html>
  <html>
  <head>
    <meta charset=“utf-8”>
  </head>
  <body>
    <h1>Loop & Array</h1>
  <script>
    var coworkers = [‘egoing’, ‘leezche’, ‘duru’, ‘taeho’];
  </script>
    <h2>co workers</h2>
  <ul>
  <script>
    var i =0;
    white(){
    document.write(‘<li><a href=“http://a.com/'+coworkers[i]+’”>’+coworkers[I]+’</a></li>’);
    i = i + 1;
    }
  </script>
  </ul>
  </body>
</html>

 

WEB2 JavaScript - 23.배열과 반복문의 활용

검색 javascript get element by css selector multiple

 

querySelectorAll이 뭔지를 또 검색

아래를 Night 안에 넣기

var alist = document.querySelectorAll(‘a’);
Var I = 0;
white(I < list.length){
Console.log(alist[I]);
alist[I].style.color = ‘powerblue’;
I = I + 1;
}

아래를 day안에 넣기

var alist = document.querySelectorAll(‘a’);
Var I = 0;
white(I < list.length){
Console.log(alist[I]);
alist[I].style.color = ‘blue’;
I = I + 1;
}

 

 

'생활코딩 > javascript' 카테고리의 다른 글

공부정리_javascript(24~37강)  (0) 2021.09.12

관련글

티스토리툴바