33 lines
978 B
Markdown
33 lines
978 B
Markdown
|
# 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
|
||
|
|
|
||
|
|
|