😺 Study/JavaScript, jQuery

[javascript] 자바스크립트 - 브라우저와 상호작용, 동적인 자바스크립트

<rin> 2020. 11. 23. 21:32
반응형

자바스크립트를 처음부터 다시 공부해보니 언어를 받아들여야 한다는 거부감이 들었다.

무엇보다 어떻게 읽히고 동작하는지부터 알아야 훨씬 쉽게 받아들일 수 있을 것 같았다.

그래서 찾다가 알게된 edwith 사이트..!

edwith은 네이버와 네이버커넥트재단이 제공하는 온라인 교육 플랫폼이다.

강의를 무료로 이용한 뒤 실무자에게 코드리뷰를 받을 수도 있다.

참고로 코드리뷰는 유료다.

자세한 내용은 아래 링크 참고//

 

https://www.edwith.org/

 

에듀케이션위드 : edwith

에드위드(edwith)는 네이버(NAVER)와 네이버 커넥트재단(NAVER Connect)이 제공하는 온라인 강좌(MOOC : Massive Online Open Course) 교육 플랫폼입니다. 에듀케이션위드(education with) 에드위드(edwith)로 분야별 명

www.edwith.org

이미 유명한 생활코딩, 이고잉 님의 자바스크립트의 시작 강의를 들어보기로 했다.

초보자도 하나씩 쉽게 이해할 수 있다는 것이 가장 큰 장점인 것 같다.

영상도 짧아서 하루에 몇 개씩 듣는 것도 가능..!

노트필기와 함께 강의를 듣고 있다.

첫 강의부터 정리한 것 차근차근 포스팅 해보기로.

- javascript는 브라우저와 사용자의 상호작용이 이루어지도록 도와준다.

- html 태그에서 onclick 속성의 의미는 '여기서 자바스크립트가 나옵니다' 라는 의미

 

예를 들어, 브라우저에 다크모드를 지원하는 버튼이 있을 때.

 

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

 

1. night 버튼을 클릭했을 때, 위의 자바스크립트 코드를 실행시키겠다는 의미

이 문서에서 body 태그를 선택하는 코드는 document.querySelector('body')

 

2.이 body 태그의 backgroundColor 속성값은 'black'으로 하겠다는 코드는

.style.backgroundColor='black';

html은 정적이지만 javascript는 동적이다. 예를 들어,

 

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

 

- html은 그대로 1+1 출력하지만, 자바스크립트는 동적이기 때문에

1+1을 연산한 2를 출력한다.

*왜 .write을 썼는지 등 코드를 외우거나 분석하기보다 어떻게 실행되는지를 먼저 이해하자.

 

 

 

 

참고: edwith [부스트코스] 자바스크립트의 시작 by 생활코딩
https://www.edwith.org/boostcourse-web-106/joinLectures/52258
반응형