为了乐天的实习,今天开始速通。
姑且从Part0开始。
Part0给出了一个Web App应该有的示例。
首先是打开Console Tab,似乎是观察向back-end的请求?
之后是通过刷新页面,在Header标签下观察HTTP协议的一些基础(GET)
在Reponse标签下,我们看到了一个HTML文件的实例

浏览器和服务器的communication

传统的Web应用

浏览器中Web应用的运行逻辑 - Run application logic in the browser

事件处理和回调函数 - Event handlers and Callback functions

文件目标模型/DOM -Document Object Model or DOM (an API)

HTML file structure

html
  head
    link
    script
  body
    div
      h1
      div
        ul
          li
          li
          li
      form
        input
        input

从Console中操作文件目标 - Manipulating the document object from console

Document: The topmost file on the DOM tree
提供了一个通过DOM?创建一个新的文字标签并推送到server显示的实例,代码如下:

list = document.getElementsByTagName('ul')[0]
newElement = document.createElement('li')
newElement.textContent = 'Page manipulation from console is easy'
list.appendChild(newElement)

结果:
image

CSS

控制页面的样式

复习:加载一个包括JavaScript的页面 - Loading a page containing JavaScript - review

Forms and HTTP POST

AJAX(Asynchronous JavaScript and XML)

Execrise 0.1 - HTML

主要是关于HTML文档的一些用法,memo如下:

<!-- 网站注释>
<head>
</head>

<!-- 网站主体>
<body>
</body>

<!-- 各级标题>

<!-- 段落>

<!-- 插入图片>
<img >
<!-- 有序列表>
<ol>
  <li>  </li>
</ol>

<!-- 无序列表>
<ul>
  <li>  </li>
</ul>

<!-- 插入链接>
<a href = "link">
  Decripition Content
</a>

Execrise 0.2 - CSS

CSS: 更改HTML的样式