zl程序教程

您现在的位置是:首页 >  前端

当前栏目

JavaScript基础语法及DOM简单操作

JavaScript基础 操作 简单 语法 dom
2023-09-27 14:22:11 时间

一.js简单语法

  1. js严格区分大小写,要注意.
  2. Js中每一条语句以分号结尾.
  3. 如果不写分号,浏览器会自动添加,但是会消耗一些系统资源.
  4. 而且有些时候,浏览器为加错分号,所以在开发中分号必须写
  5. js中会忽略多个空格和换行,所以可以利用进行格式化.

Js基本输出语句

  1. alert(“”); 弹出一个警告框.
  2. ducoment.write(““); 在body里显示.
  3. Console.log(“”); 在控制台显示.
  4. Prompt(‘’); 弹出一个文本框.

二.变量

在js中 声明变量用var
命名规范:
在这里插入图片描述

三.数据类型

一.简单介绍

在这里插入图片描述

  1. 数字型
    在这里插入图片描述

isNaN() 方法用来判断是否为数字 并且返回一个值 如果是数字返回false 如果不是返回true.
2. 字符串型
在这里插入图片描述

字符串嵌套.内单外双,外单内双.
转义符:
在这里插入图片描述

字符串的长度用 length
字符串的拼接 + 只要有字符串和其它类型相拼接 最终的
结果是字符串类型. 数值相加,字符相连.
3. boolean型
布尔型与数字型相加时,true为1,false为0
4. undefined 未定义
5. null 空值

二.获取数据类型

关键字:typeof 变量名
Prompt 取过来的值 是字符串型的

三.数据类型转换

1.转换为字符串型

1.toString()方法 变量.toString()
2.利用 String(变量)
3.利用 + 拼接字符串的方法实现转换效果

2.转换为数字型

1.parseInt(变量) 可以把字符型的转换为数字型 得到的是整数.也可以去掉单位.
2.parseFloat(变量) 可以把字符型的转换为数字型 得到的是小数,浮点数.
3.利用 Number(变量)
4. 利用了算术运算 - * / 隐式转换

3.转换为布尔型

Boolean()函数 其他类型转换为布尔型
代表空.否定的值会被转换为false ,如 ‘’.0 NaN null undefined
其余值都会被转换为true

四.运算符

1. 算术运算符

(加减乘除)递增++,递减–
注:后置自增: 先返回原值后变量自加1,前置自增: 先自加1后返回值

2. 比较运算符

默认转换数据类型 会把字符串型的数据 转换为数字型
=== 判断两边的值和数据类型是否完全相同
逻辑中断很重要,会影响程序运行的结果

3. 逻辑与短路运算

如果表达式1结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1

4. 逻辑或短路运算

如果表达式1结果为真 则返回表达式1 如果表达式1为假 那么返回表达式2
运算符优先级:

在这里插入图片描述

五.流程控制

1. 分支结构

(1).If条件语句

If (条件表达式) {
执行语句
} else{
执行语句
}
多分支结构:
If () {

} else if() {

} else if() {

} else{

}

(2).Switch 语句

switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
.
.
.
Default:
执行最后的语句;

}

(3).三元表达式

语法结构:
条件表达式 ? 表达式1: 表达式2
如果条件表达式为真 则返回 表达式1 的值 如果条件表达式为假 则返回 表达式2的值

2. 循环结构

1. for 循环

重复执行某些代码,通常跟计数有关
for(初始化变量;条件表达式;操作表达式){
循环体
}
双重for循环
for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
for(里层的初始化变量;里层的条件表达式;里层的操作表达式){
//执行语句
}
}

2. while 循环

while(条件表达式) { //while 当…时候
//循环体
}

3. do-while 循环

do{
//循环体
}while();

六.数组

使用new 关键字创建数组

  1. Var 数组名 = new Array() ;
  2. Var 数组名 = [ ]; 如var arr =[1,2,’pink老师’,true];
    遍历数组
    For(var i=0; i<3; i++){
    Console.log(arr[i]);
    }

数组中新增元素

可以通过修改length 长度以及索引号增加数组元素

  1. 手动修改 为length赋值 arr.length=4;
  2. 主动追加索引号 arr[4]=’pink’

七.函数

函数就是封装了一段可以被重复使用的代码块 目的:就是让大量代码重复使用

1. 函数的使用

-----声明函数,调用函数

1.1 声明函数

function 函数名() {
//函数体
}
// function 声明函数的关键字 全部小写
// 函数是做某件事情 函数名一般是动词
// 函数不调用自己不执行

1.2 调用函数

函数名();
//调用函数时千万不要忘记加小括号

2. 函数的参数

2.1 形参和实参

function 函数名(形参1,形参2…){ //在声明函数的小括号里面的是形参.

}
函数名(实参1,实参2…); //在函数调用的小括号是实参
形参是接收实参的,相当于一个变量。
1.如果实参的个数多于形参的个数 会取到形参的个数
2.如果实参个数小于形参的个数 多于形参定义为undefined

2.2 函数的返回值

function 函数名(){
return 需要返回的结果;
}
只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名()=return 后面的结果
Return 只能返回一个值

在这里插入图片描述

3. arguments

在这里插入图片描述

八.预解析

  1. 我们js引擎运行js 分为两步: 预解析 代码执行
    (1)预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
    (2)代码执行 按照代码书写的顺序从上往下执行
  2. 预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)
    在函数里,不声明直接赋值相当于全局变量
    (1)变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
    (2)函数提升 就是把所有的函数声明提升到当前的作用域最前面 不提升调用

九.对象

1. 创建对象

  1. 利用字面量创建对象
    在这里插入图片描述

  2. 利用new Object 创建对象
    在这里插入图片描述

  3. 利用构造函数创建对象
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

2. 使用对象

在这里插入图片描述
在这里插入图片描述

3.遍历对象-for in 循环

在这里插入图片描述

4.对象小结

在这里插入图片描述

十.内置对象

1. 查文档

  1. MDN

2. Math 对象在这里插入图片描述

在这里插入图片描述

3.Date 对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

倒计时案例
在这里插入图片描述

4.数组对象

判断是否为数组:
Instanceof 关键字
Array.isarray() 方法
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.字符串对象

在这里插入图片描述

在这里插入图片描述

十一.DOM部分操作

1. 获取元素

1.1 通过id 获取
在这里插入图片描述

1.2 通过标签名获取
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2. 事件基础

在这里插入图片描述
在这里插入图片描述

3. 操作元素

3.1 改变元素内容
在这里插入图片描述
在这里插入图片描述

3.2 改变元素属性
在这里插入图片描述

3.3 改变表单属性
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4. 节点操作

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
兄弟节点
在这里插入图片描述
在这里插入图片描述

js学了将近一半,但属性及各种操作繁多,还需要多练习,通过敲代码,做案例来属性各种知识。