JavaScript Start

2016 Spring Dongyue Web Studio

by arrowrowe

(background image by anonymous)

Contents

HTML Revisited

Browser | Nginx - index.html

(Screenshots from Bilibili)

/etc/nginx/conf.d/playground.conf

server {
  root /playground/;
  server_name playground.lk;
}

More: listen, index, sendfile, try_files, location block, with php-fpm...

BTW: Got Nginx 1.8.1? Google 'nginx ppa'.

Q: No 'playground.lk'? A: Modify `/etc/hosts`.

Q: Who loads this .conf? A: See `/etc/nginx/nginx.conf`.

So, JavaScript?

...

| ... | | | |

live demo

Q? Just move on...

Native JavaScript in Browser

(a glance)

Review the last demo...

  • `alert`, `console`, `document`, ......
  • Q: More global stuff? Where are they?
  • Q: Can we add more? How is `say` found?
  • Q: How `getElementById` works?
  • A: Go for `window`. They are its properties.
  • A: Yes, by adding properties to `window`.
  • A: No local `say` found, falling back eventually to the global one.
  • A: Select one HTML element by its `id`.

(Move on for more details......)

The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window.

The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document as a tree.

The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.

(Now begins the boring part... Let's go through the basic together...)

(In fact all MDN JavaScript Tutorials are recommended......)

Web APIs

(Know it when its time comes...)

Meet Node.js

(Twin?)

Dependencies

In Browser | For Node

Back to Browser

Utilities & Frameworks

Try!

ANYTHING

Q