# Chapter 7: Javascript in Browser

## Setting up a Web Server

Setting up a web server:
* Install `live-server` using `npm`:
```
npm install -g live-server
```
`live-server` have live-reloading feature.

Create a directory for the app.

In the app directory, create a `index.html` and add element in

After creating a HTML, we can view it `live-server <app-directory>` in browser

## JavaScript in Browser

* JS embedded in HTML via `<script></script>`
* Or put JS code in a separate file, then import it as `<script src="notes-app.js"></script>`

## DOM Manipulation

Use JS to manipulate HTML via **Document Object Model**, where document = HTML, object = JS object (i.e. Document is modeled using a JS object)

The JS object represent Document is `document`.
* Create an obj `p` and assign the queried obj to it. `document.querySelector('p')` select the first obj that has tag named `<p>`
* Script tag has to be after paragraph to query it

## Adding Elements via the DOM