It’s not that bad now. I have a feeling about this

他和 Java 没有关系，之所以取这个名字是当初为了蹭 Java 热度

  • 只用了10天开发
  • 直译语言，其中一条运行不了之后的不会运行。

服务器端：Node.js

I. 引用JS

a. script 内插入

1
2
3
4
5
6
7
8
9
<body>
  <button id="A">GO</button>
  </button>
  <script>
    document.getElementById("A").onclick =function(){
      alert("?");
    }
  </script>
</body>
  • 如果只是从可运行的角度考虑，那么在HTML文件（不是标签）内任意放置script它都能被识别与使用。
  • 但浏览器解析是按顺序的
    • 一般而言，放在 head | body部分
    • 如果是页面初始化需要用到的js必须放在head
    • 如果使用了getElementById(Class)或者类似需要已存在元素的查改，注意Js的插入位置。

b. script引用外部文件

1
<script src="./xxx.js">
  • 在引用外部文件以后，script标签内写的其他内容不会被执行

c. 事件属性

1
<span onclick="alert(??)">

比较常用的是以上几种。

II. Strict Mode

使用以下语句进入严格模式

1
"use strict";

a. 两种调用方式

1. 对整个脚本文件

置于第一行，否则大部分情况下以正常模式运行

1
2
3
4
5
6
7
8
　　<script>
　　　　"use strict";
　　　　console.log("strict mode");
　　</script>

　　<script>
　　　　console.log("Not");
　　</script>

上面的代码表示，一个页面中有两段Js。前一个是严格模式，后一个不是。

2. 对单个函数

将”use strict”放在函数体的第一行，则整个函数以”严格模式”运行。

b. 具体差别

一般体现在语法与行为上。

  • 严格模式禁止在不声明的情况下直接使用变量
  • 禁止this指向全局对象
  • 禁止函数内部遍历调用栈
  • 等

总之一般在写比较复杂的js时会选择性使用

III. let|const|var

1
2
3
var a=6;
let c=2;
const d=1;

const 常量应该都懂

实际使用中最好使用let，因为用 var 声明的变量如果在之后的代码中再次声明（假设你忘了自己已经使用过了该变量名），并不会报错，会给潜在的debug带来麻烦。

如果使用let，在运行到二次声明时会报错。

IV. 数据类型

基本类型

  • string ｜ number | boolean | null | undefined | symbol
  • 数字支持科学计数表示 如 123e5 （12300000）

引用类型

  • Object ｜ Array ｜ Function

类型是动态的，所以相同的变量可以赋值为不同的类型

  • null 与undefined 值相等

关于==与===

在使用==比较两个变量时，会将其转换为同一种数据类型再进行比较

相对应的===只要类型不同就会返回false

基本的语法都能找到，和现存的其他语言都很相似

V. 函数

一般函数的结构为

1
2
3
function name(arg1,arg2..){
	//xxx
}

参数可为空，如果需要有返回值使用 return 语句即可

a. 箭头函数

1
2
3
4
5
x=>x*x
//等效于
function(x){
  return x*x;
}

箭头函数相当于匿名函数并简化了定义

多参数或执行语句需要用{}括起来

1
2
3
4
(x,y)=>{
	//xxx
	//xxx
}

VI. RESTful & spread （杂项）

REST全称是Representational State Transfer

如果简单理解，是对增删改查(GET PUT POST DELETE)的标准和约束

  • 要让一个资源可以被识别，需要有个唯一标识，在Web中这个唯一标识就是URI(Uniform Resource Identifier)
  • RESTful架构应该遵循统一接口原则，不论什么样的资源，都是通过使用相同的接口进行资源的访问。接口应该使用标准的HTTP方法如GET，PUT和POST，并遵循这些方法的语义。

典型用法见RUNOOB

Spread 

1
...a

这里的..是ES6标准中的语法

1
2
3
4
5
6
7
8
9
var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];

console.log(arr);  // [1, 2, [3, 4] , 5, 6]
----
var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];

console.log(arr); // [1，2，3，4，5，6]

只是扩展内容的举例

VII. DOM

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 以树结构表达 HTML 文档。

DOM HTML tree

  • 整个文档是一个节点
  • 每个HTML元素是一个节点
  • HTML元素内的文本是文本节点
  • 每个HTML属性是属性节点
  • 注释是注释节点

a . DOM 对象 方法 属性

1. 常用方法

  • getElementById(id)
  • getElementByClassName(class)
  • appendChild(node)
  • removeChild(node)

2. 常用属性

  • innerHTML//节点的文本值
  • parentNode//父节点
  • ChildNode//子节点
  • attributes//属性节点

有需要用到的可以再去查

3. 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
	<p id="ini">
    200 OK.
  </p>
  
  <button id="eg1">
    Ha.
  </button>
  
  <script>
  	let txt=document.getElementById("ini").innerHTML;// get
   	document.write(txt);
    
    document.getElementById("ini").innerHTML='??NO';// rewrite
    document.getElementById("ini").style.color="Blue";
    
    let k1=document.createElement("div");// create append
    let	k2=document.createTextNode("New one");
    k1.appendChild(k2);
    document.getElementById("ini").appendChild(k1);
    
    function Change(id){
      id.innerHTML="Wrong";
    }
    
    document.getElementById("eg1").onclick=function(){Change(this)};//add event through script
    
    document.addEventListener("click",=>document.getElementById("ini").innerHTML="You clicked somewhere");
  </script>
  
  <button onclick="Change(this)">
    Click here.
  </button>
</body>

那么简单的结合事件触发onXXX, addEventListener等即可做到一些常见的功能。

AddEventListener相比 onXXX,可以对一个事件绑定多个函数