05 JavaScript 실습

32.자바스크립트 실습(https://opentutorials.org/course/1688/9381) -12/31

1.JS 실습1

*방법론적인 것은 점점 더 배워야함: "이런것이다"라는 것을 이해하기 위해서 하는것

-javascipt에 1.html 폴더

*input tag: 사용자가 정보를 입력할 수 있는 장치, 

-type 속성으로 뭘 주느냐에 따라서 input하는 방법이 다르다: checkbox, text, button 등...

-value: 값이 white가 되는 것

*script

-alert: 알림 창이 뜨게 하는 것. 경고 창이 뜨게 하는 것

*자바스크립트의 이벤트 프로그래밍: script 태그 안쪽에 존재훌 수 있지만, html 태그 안쪽에 존재해도 괜찮다. 

-input 태그 안에 onclick이라는 속성을 주고, alert을 쓰면 -> white 버튼을 눌렀을 때 (onclick) javascript 코드를 실행

-이벤트: 버튼을 사용자가 '클릭'하는 것과 같은, 스크롤/마우스를 움직이는 것 등이 모두 '사건', 이 사건에 맞는 프로그래밍이 이벤트 프로그래밍

-onfocus, onblur, onclick 등은 javascript 코드를 값으로 취한다; 사용자가 특정 행동 실행시(이벤트) js코드를 실행

2.JS실습2

-1.html 이어서 

*input type="text"에 입력한 값을 경고 창으로 뜨게 만들기

-onclick="alert('id값이 user_input인 태그값')"; 이 나오게 해야함. 

-getElementById('user_input') ; 함수임. 이 함수가 시행된 결과가 위의 text 값이 지정,

위의 함수는 document.라는 함수 그룹에 속해있음 (API를 구분하기 쉽게 모아놓음) -> document.getElementById('user_inpput')

-white 버튼을 누르면 아래 정보가 표시

-text에서 입력한 값: value로 알 수 있음 -> document.getElementById('user_inpput').value

-> white 버튼을 누르면 onclick이 실행 -> alert에 document.getElementById 가 시행: user_input.value(값) 을 가져온다 라는 뜻 

3.JS실습3- localhost/javascript/2.html

*CSS 복습

<style> </style> 사이에 쓰면 됨. 원하는 tag를 입력하고 {} 안에 입력, 

*class

-html과 최수원만 밑줄을 긋고싶다? -> 그룹핑을 하면 됨: class="em", -> style 내에 .으로 사용(class),,

-class: 같은 tag에만 지정할 필요는 없다. 

*em이라는 효과를 ol에만 주고싶다; id를 통해서 (em은 style상에 .em에 적용 -> 클래스 네임을 주면 됨)

 <input type="button" value="강조" onclick="document.getElementById('target').className='em'"  />

-> '강조' 버튼을 누르면 document.getElementById를 통해 id가 target인 값(ol tag)을 선택하여  class 이름을 em을 부여

-> 이후 부여된 em 클래스 값이 위의 style의 text-decoration이 적용

즉, clasee="em" 값을 javascript로 추가 : JS는 html을 제어하는  언어라고 할수있다. 

4.JS실습 4: 화면의 오른쪽 버튼을 누르면 배경이 흰색/검은색으로 바뀌는 기능 구현

-localhost/page_vc.html에 만들어서 다른 화면에도 적용할것

*<nav> 와 <article> 사이에 버튼에 해당하는 tag를 넣자. 

1)<input type="button" value="white" /> ; black까지 2개를 생성

2)위치를 오른쪽으로 옮기고 싶다: 그룹핑을 한 후에 위치 옮기기: 임의의 tag를 만들어서 두개를 묶자

-> 이때 사용하는 것이 <div> : css적인 뭔가를 주기 위해서 사용

-> div: 아무런 특징이 없다는 특징- 특정한 기능이 없이 태그를 묶어주는 태그! 아하~ 묶어서 css 효과 주기, 여기서는 id값을 control로 

3)css 파일에 #control을 오른쪽으로 옮기는 기능 넣기

#문제; 수정된 css, js 파일이 적용이 안될 때 :해결

4) 버튼을 클릭 했을 때 웹사이트의 색상을 바꾸기

-css 파일에서 body 컬러를 바꿔주기: 

body.white{

background-color: white;

color: black;

}

body.black{

background-color: black;

color: white;

} 

-> black을 클릭하면 아래, white를 클릭하면 아래로 가게 하고싶다. 어떻게? class를 줘서

-> 이제 body의 class 값에 따라서 (black/white) 배경 색이 바뀌게 된다

-> 이제 input 버튼의 onclick에 js 코드를 활용해서 body의 class값을 주면 된다. 

-> body의 id 값을 주고 input 태그에 onclick 속성에 onclick="document.getElementById('body').className='white'" 를 주면 된다

5) page_vc.html 이외의 다른 모든 page에도 적용시키

5.JS실습 5 -> 들어도 되고 안들어도 된다?: script.js 파일로 적용시키기~ 

*기능은 구현 완료, 하지만 좋은 코드는 아니다? html이 비대해지기 때문에...

-> body 밑에 <script>를 추가. js 이벤트가 등장(click이라는 사건)했을 때 반응하도록,

-> 모든 페이지에 붙여넣기: 중복의 악취 ㅋㅋㅋㅋ 이를 css처럼 js 파일을 별도의 파일로 분리시키기 (script.js 파일을 만들어서 거기에 넣기)

-<script src="http://localhost/script.js"></script> 로 적용해서 다른 파일에도 적용 

*수업 정리

HTML: 정보, CSS: 디자인, Javascript: 제어

6. JS 활용(disqus, tawk): 다른 회사에서 만든 기능을 통해서 내 서비스에 붙이는 방법론: 댓글기능 + 채팅기능

-댓글을 달면 이메일로 보내고, 이를 답변하면 다시 댓글로 달아주는 기능

-방문한 사람과의 채팅 기능: 채팅을 보냈을 때 방문자에게 응답할 수  있는 화면 

-> 이를 몇줄의 코드만으로 구현하기! 

*댓글기능: disqus로 진행 (한국에 livere라는 서비스도 있다) 

-disqus 가입 후 코드를 article에 입력, 이것만으로 코드

-각각의 코드에 붙이면 된다! 

*채팅기능: tawk.to -> 이 기능을 통해서 웹으로 편하게 대화할 수 있는 사이트를 운영 가능 (카톡같은 프로그램 외에도...) 

-가입 후 </body> 위에 붙이기

-여러 사람이 응대하는 것도 제공하는 강력한 기능

-> 주목: 코딩을 하는 이유가 무엇인가! 

제목과 같은 작은 기능부터 댓글, 채팅 시스템과 같은 거대한 기능까지 구현하는 것이 코드의 힘이다!!!