javascript

基本类型

number基本运算：

字符串基本运算：

变量

null & undefined

常用输出语句

js代码分离

index.html:

script.js:

布尔逻辑

双等号与三等号比较特殊，双等号会转换类型让两者匹配再比较大小，而三个等号会比较类型。

练习1：

练习2：

练习3：

练习3：

if

if 判断语句的语法：

if (condition) statement1 else if statement2 else statement3

如果条件计算结果为 true，则执行 statement1；如果条件计算结果为 false，则执行 statement2。
注意判断的条件会发生自动类型转换：
number：如果非0为true，0为false
string：如果非null或非空为true，否则为false
undefined：false
NaN: false
对象类型：非null为true，否则为false。

案例猜数字游戏：

case

循环语句

while

while循环语句：

while(count<5){
document.write(“hello world
”);
count++;
}

do-while循环语句

需求；计算1~100奇数的总和。

for循环语句:

需求；计算1~100偶数的总和。
var result = 0 ;
for(var i = 1 ; i<=100 ; i++){
if(i%2==0){
result +=i;
}
}
document.write(“结果：”+result);

测试

函数function

函数的定义格式：

javascript的函数要注意的细节：
1. 在 javascript中函数 定义形参时是不能使用var关键字声明变量 的。
2. 在javascript中 的函数是没有返回值类型 的，如果函数需要返回数据给调用者，直接return返回即可，如果不需要返回则不返回。
3. 在 javascript中是没有函数 重载 的概念 的，后定义的同名函数会直接覆盖前面定义同名函数。
4. 在javascript中任何的函数内部都隐式的维护了一个arguments（数组）的对象，给函数 传递数据的时候，是会先传递到arguments对象中，
然后再由arguments对象分配数据给形参的。
5.函数本身就是一个对象，此对象的名字就是函数名
需求：定义一个函数做两个参数的加法功能。

函数本身就是一个对象，此对象的名字就是函数名

动态函数
动态函数的特点时new一个Function对象，往对象中可以传入变量，函数体，以及输出语句。

匿名函数,通常在定义事件属性的行为时较为常用。

数组

初始化数组：

更新数组：

数组方法：

数组循环：

案例

案例2：构建自己的foreach

对象

对象更新

创建对象

对象中可以容纳任何数据

var junkObject = {
age: 57,
color: “purple”,
isHungry: true,
friends: [“Horatio”, “Hamlet”],
pet: {
name: “Rusty”,
species: “Dog”,
age: 2
}
};
对象中可以容纳方法
junkObject.add = function(a,b){
return a+b;
}

使用this，使用对象中的已有元素

junkObject.print = function(){
this.friends.forEach(function(arr){console.log(arr);});
}

DOM

The Document Object Model is the interface between your Javascript and HTML+CSS
在控制台输入：document 以及 console.dir(document)即会显示出js文档对象

dom 5类选择器

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()

Hello

Goodbye

• List Item 1

• List Item 2

• List Item 3

var tag = document.getElementById(“highlight”);
var tags = document.getElementsByClassName(“bolded”);
var tags = document.getElementsByTagName(“li”);
//select by ID 所有都可选择
var tag = document.querySelector("#highlight");
//select by Class
var tag = document.querySelector(".bolded");
//select by tag
var tag = document.querySelector(“h1”);

//select by tag
var tags = document.querySelectorAll(“h1”);
//select by class
var tags = document.querySelectorAll(".bolded");

交互dom

changing an element’s style

adding/removing classes

changing the content of a tag

changing attributes(src, href, etc.)

DOM Events

案例1

综合案例：猜颜色

第一步：布局

第2步：点击事件

正确时显示同一颜色，不正确时为黑色。

第3步：随机颜色

第4步：布局

• 本文链接： https://dreamerjonson.com/2019/01/11/javascript/

• 版权声明： 本博客所有文章除特别声明外，均采用 CC BY 4.0 CN协议 许可协议。转载请注明出出处！

• go语言交流2群：713385260