what can in-browser javascript do?

In-browser JavaScript can do everything related to webpage manipulation, interaction with the user, and the webserver.

• Add new HTML to the page, change the existing content, modify styles.
• React to user actions, run on mouse clicks, pointer movements, key presses.
• Send requests over the network to remote servers, download and upload files (so-called AJAX and COMET technologies).
• Get and set cookies, ask questions to the visitor, show messages.
  Remember the data on the client-side (“local storage”).
• the only programming language to build front-end of websites. makes your website interactive, very powerful.

1. Specification(ECMAscript)
   : ES6 is just a updated version specification. What is specification? JAVASCRIPT is centralized so that somebody update, works on all the browser. And each browsers (chrome, safari, firefox) read javascript depend on the version of specification.

2. vanilla javascript

   : a language called javascript with no library or framework. Just the raw javascript!
   Many people don't know about vanilla, the core of javascript. This is why we should learn!
   it's fast, lightweight, cross-platform. So after you learn vanilla, you can go next to react.js things with no problems.

how javascript is this much powerful?

: 어떻게 javascript를 이용해서 특정 url을 호출하는지가 중요하다. 바로 이 부분이 javascript가 이렇게 강력해진 이유다. javascript는 웹사이트로 request를 보내고 respond를 통해서 data를 얻을 수 있는데, 가져온 data를 refresh없이도 웹사이트에 적용시킬 수 있기 때문이야.

behind the scenes, javascript is getting informations all the time.

JavaScript programs can be inserted almost anywhere into an HTML document using the <script> tag.
The <script> tag contains JavaScript code which is automatically executed when the browser processes the tag.

order of script in html

the order is important also in html. actually we can use export, but when we don't use ES6, we should bring the exporting js file first, and then importing js file.

<script src="variables.js"></script>

<script src="using.js"></script>

DOM (: Document Object Module)

document

javascript에서 기본적으로 html을 document라는 이름으로 인식한다. document is also an huuuuge object.
getElementById, getElementByTagname, .....

• If you need to get access to an element using querySelector() to find the element using any selector.

document.getElementByTagname("h1")[0] // the first h1 element
document.querySelector("h1) //the first h1 element

좀 더 복잡한 선택자

아래 예제처럼 정말 강력한 선택자도 사용할 수 있습니다. 예제의 결과는 클래스가 "user-panel main"인 <div>(<div class="user-panel main">) 안의, 이름이 "login"인 <input> 중 첫 번째 요소입니다.

var el = document.querySelector("div.user-panel.main input[name=login]");

it's all about object !

Remember ! All the things that you selected from your page using javascript, are going to be objects !!

javascript will bring all the elements(tags) in your html, and gonna turn them into objects. and we can change html contents using javascript!

we are manipulating html elements through javascript !

• querySelector : returns the first element of node, among the all children inside.