JavaScript基础数据类型、运算符、数组、函数的定义及DOM方式应用

JavaScript中数据类型和变量

变量

html 复制代码

let 变量名 [= 值;]

JavaScript中只支持弱化数据类型，会通过变量值来确定变量的数据类型；如果没有赋值，会使用undefined赋值

数据类型

数值型

number，包含整数和小数

字符型

string，包含字符和字符串，因此值既可以定义在""中，也可以定义在''中

布尔型

boolean，值只有两种true和false

内置对象类型

Array数组类型、document对象、window对象

JavaScript中运算符应用

特殊的关系运算符：===

先判断数据类型是否一致，再判断值是否一致，严格区分大小写

逻辑运算符

&&：当且仅当所有的表达式都为true时，显示最后一个表达式结果值；有一个表达式为false时，则显示该表达式的结果值
||：当且仅当所有的表达式都为false时，显示最后一个表达式结果值；有一个表达式为true时，则显示该表达式的结果值
!：显示结果是布尔型
JavaScript中下列值在进行逻辑判断时，表示false -- 0、NaN、null、false、''、undefined

JavaScript数组的定义及遍历

数组的定义方式-4种

javascript 复制代码

// 空数组
let arr = new Array();
// 静态定义方式1
let arr = new Array(值1,值2,...,值n);
// 静态定义方式2 -- 常用方式
let arr = [值1,值2,...,值n];
// 动态定义方式
let arr = new Array(length);

数组遍历

javascript 复制代码

for(let i = 0;i < 数组名.length;i++){
    数组名[i]，进行操作
}

JavaScript中函数的定义和使用

函数的定义

javascript 复制代码

//1. 命名函数
function 函数名([参数列表]){
    方法体;
    [return 返回值结果;]
}
//调用命名函数
函数名([参数列表]);


//2. 条件运算符函数定义
function condition(x){
    x = x || 默认值;
}

//3. 匿名函数
let 变量名 = function([参数列表]){
    方法体;
    [return 返回值结果;]
}
//调用匿名函数
变量名([参数列表]);

//4. 箭头函数
let 变量名 = ([参数列表]) => {
    方法体;
    [return 返回值结果;]
}
//调用箭头函数
变量名([参数列表]);

DOM方式

定义

全称Document Object Model，文档对象模型；通过JS中内置的文档对象document，调用方法，完成对HTML页面中指定标签的操作

应用

获取标签对象

javascript 复制代码

console.log("---获取标签属性值方式---标签对象名.属性名---");
let div = document.getElementById("div1");
console.log(div.id);

console.log("---获取标签属性值方式---标签对象名['属性名']---");
console.log(div["id"]);

console.log("---获取标签属性值方式---标签对象名.getAttribute('属性名')---");
console.log(div.getAttribute("id"));

操作标签属性值

javascript 复制代码

console.log("**************操作特殊属性***************");
  //操作特殊属性推荐的方式：标签对象名.属性名
function operationSpecialAttr(){
let inp = document.getElementById("inp");
console.log(inp.checked); //显示为false
inp.checked = true;
console.log(inp.checked);  //显示为true

设置标签对象

javascript 复制代码

console.log("---设置标签属性值方式---标签对象名.属性名= '属性值';---");
let div = document.getElementById("div1");
div.id = 'youDiv';
console.log("-----youDiv-------_"+ div.id);

console.log("---设置标签属性值方式---标签对象名['属性名'] = '属性值';---");
div["id"] = 'youDiv1';
console.log("-----youDiv1-------_"+ div.id);

console.log("---设置标签属性值方式---标签对象名.setAttribute('属性名','属性值')---");
div.setAttribute("id","youDiv2");
console.log(div.id);