JavaScript

最新推荐文章于 2022-10-15 09:24:51 发布

HHYZBC

最新推荐文章于 2022-10-15 09:24:51 发布

阅读量1.3k

点赞数

分类专栏： web 文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/HHYZBC/article/details/124079476

版权

web 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

null NaN undefined这三个值有什么区别

innerText和innerHTML属性有什么区别？

正则对象的建立

如何进行匹配？

BOM编程

JavaScript是什么

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。. 虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。.

以下内容中JavaScript全部使用简称JS表示。

JS的作用是什么

允许您在网页上实现复杂的功能 - 每次网页不仅仅是坐在那里显示静态信息供您查看 - 显示及时的内容更新，交互式地图，动画2D / 3D图形，滚动视频自动存储塔等。简单说就是可以让网页动起来。

javascript当中的变量

怎么声明变量？

var 变量名;

怎么给变量赋值

变量名 = 值;

注意：

javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。
在javascript中，当一个变量没有手动赋值时，系统默认赋值为undefined，undefined 在JS中是一个具体存在值.

函数定义

函数也是一段可以被重复利用的代码片段。函数一般都是可以完成某个特定功能的。

定义语法格式：

第一种方式：

function 函数名(形式参数列表){
								函数体;
							}

第二种方式：

函数名 = function(形式参数列表){
								函数体;
							}

JS中的函数不需要指定返回值类型，返回什么类型都行。

定义函数后必须对该函数进行调用后，才会执行函数内的代码

全局变量和局部变量

全局变量：

在函数体之外声明的变量属于全局变量，全局变量的生命周期是：浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间。能使用局部变量尽量使用局部变量。

局部变量：

在函数体当中声明的变量，包括一个函数的形参都属于局部变量，局部变量的生命周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。局部变量生命周期较短。

数据类型

JS中数据类型有：原始类型、引用类型。

原始类型：

Undefined
- Undefined类型只有一个值，这个值就是 undefined，当一个变量没有手动赋值，系统默认赋值undefined，或者也可以给一个变量手动赋值undefined。
Number
- 整数、小数、正数、负数、NaN(不是数字)、Infinity(无穷大)都属于Number类型。
  - 运算结果本来应该是一个数字,最后算完不是一个数字的时候,结果是NaN.
    - 比如一个数字除一个字符串时，除号最后的结果本应该是一个数字，但是运算的过程中遇到的字符串，所以导致结果不是数字，这个时候运算结果就为NaN
- 有关Number类型的函数：
  - isNaN()
    - 判断一个值是否为数字，为True表示不是数字
  - parseInt()函数
    - 可以将字符串自动转换成数字,并且取整数位.
  - parseFloat()函数
    - 可以将字符串自动转换成数字.
  - Math.ceil() 函数
    - 向上取整
String
- 表示字符串
- 常用String类型的属性：
  - length 获取字符串长度
- 有关String类型的函数：
  - indexOf
    - 获取指定字符串在当前字符串中第一次出现处的索引
  - lastIndexOf
    - 获取指定字符串在当前字符串中最后一次出现处的索引
  - replace
    - 替换
  - substr(startIndex, length)
    - 截取字符串
    - startIndex表示开头
    - length表示停止位置
  - substring(startIndex, endIndex)
    - 截取字符串
    - startIndex表示开头
    - endIndex表示停止位置但不包括endIndex
  - toLowerCase
    - 转换小写
  - toUpperCase
    - 转换大写
  - split
    - 拆分字符串
Boolean
- 表示布尔类型，值只有两个，True（真）和false（假）
- 有关Boolean类型的函数：
  - Boolean()
    - 作用是将非布尔类型转换成布尔类型。
    - Boolean(数据)
  - 除去空字符串、null、NaN、undefined类型，其他的都会True
Null
- 表示空
- 该数据类型只有一个值：null

引用类型：

Object以及Object的子类
- Object类型是所有类型的超类，自定义的任何类型，默认继承Object。
- Object类包括哪些属性？
  - prototype属性
    - 作用是给类动态的扩展属性和函数。
- 定义类的语法与定义函数的方法相同，但是创建类后还需要使用类创建对象来使用类里面的方法
- 创建对象的语法：
  - new 构造方法名(实参); // 构造方法名和类名一致。
- 在Object类型中还有一种数组类型，这个类型可以当作容器使用，用来存放多个数据，赋值方法是使用方括号（[]）将数据括起来即可

typeof

JS中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型。typeof运算符的语法格式：

typeof 变量名

typeof运算符的运算结果是以下6个字符串之一：注意字符串都是全部小写。

"undefined"
"number"
"string"
"boolean"
"object"
"function"

null NaN undefined这三个值有什么区别

数据类型不一致
null和undefined的值可以相等。

运算符

算术运算符

+、-、*、/（加减乘除）

逻辑运算符

&&
- 表示和
||
- 表示或者
！
- 表示否

赋值运算符

==
- 表示数据值相等
===
- 表示数据值和数据类型都要相等

js中的常用事件

blur失去焦点
focus获得焦点
click鼠标单击
dblclick鼠标双击
keydown键盘按下
keyup键盘弹起
mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起
reset表单重置
submit表单提交
change下拉列表选中项改变，或文本框内容改变
select文本被选定
load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。 onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）

注册事件的两种方式

第一种直接在标签中使用事件句柄，由于数据句柄以属性的属性存在，使用可以在标签中直接这次事件，但是这种方式使得js代码和html代码耦合度过高，不推荐使用

第二种方式是使用纯js代码完成事件的注册。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>
</head>
<body>
<input type="button" value="按钮" id="bin">
<script type="text/javascript">
    var bin1 = document.getElementById('bin');
    //获取按钮对象。document代表整个HTML页面，getElementById表示根据id获取对象
    bin1.onclick = function () {
        //为这个对象绑定一个单击事件，function函数没有名字，叫做匿名函数，也叫做回调函数
        //当用户单击按钮后，则会触发事件运行函数内部的代码
        alert('hello world');
    }
</script>
</body>
</html>

回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数。

js代码的运行顺序

在js中，代码从上而下的依次运行，这个时候则需要注意，如果上面例子中的js代码放在按钮代码的上面，则当运行到获取按钮对象时，按钮的id此时并不存在的，这个时候则会进行报错。而js的最号习惯是将js代码全部写道head标签中，以方便管理。这时就需要说到load事件了，它的作用是页面加载完毕，而对象则可以是windwards，表示浏览器页面，连起来则表示当浏览器页面加载完毕后，运行内部的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>
    <script>
        window.onclick = function () {
            var bin1 = document.getElementById('bin');
            //获取按钮对象。document代表整个HTML页面，getElementById表示根据id获取对象
            bin1.onclick = function () {
                //为这个对象绑定一个单击事件，function函数没有名字，叫做匿名函数，也叫做回调函数
                //当用户单击按钮后，则会触发事件运行函数内部的代码
                alert('hello world');
            }
        }
    </script>
</head>
<body>
<input type="button" value="按钮" id="bin">
</body>
</html>

这样一来js代码即使是在head标签中，代码也不会报错，

void

void(表达式)

作用是执行表达式，但不返回任何结果。

javascript:void(0)

其中javascript:作用是告诉浏览器后面是一段JS代码。

程序中的javascript:是不能省略的。

假设有一个需求，a标签既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。这个时候就需要使用到该运算符

<a href="javascript:void(0)" onclick="window.alert('test code')">
			既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
		</a>

控制语句

条件控制语句

if (表达式1)
    代码1
else if (表达式2)
    代码2
......
else 
    代码3

循环控制语句

for (var 变量名 in 可迭代对象)
    循环体

BOM和DOM

DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当做一棵DOM树来看待。

BOM：Browser Object Model（浏览器对象模型）关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程。

DOM和BOM的区别和联系

BOM的顶级对象是：window
DOM的顶级对象是：document
实际上BOM是包括DOM的！

innerText和innerHTML属性有什么区别？

相同点：都是标签的属性设，用来设置元素内部的内容。

不同点：

innerHTML会把后面的“字符串”当做一段HTML代码解释并执行。
innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。

正则对象的建立

第一种方法

var regExp = /正则表达式/flags;

第二种方法

var regExp = new RegExp("正则表达式","flags");

regExp表示一个对象

关于flags：

g：全局匹配
i：忽略大小写
m：多行搜索（ES规范制定之后才支持m。）当前面是正则表达式的时候，m不能用。只有前面是普通字符串的时候，m才可以使用。

如何进行匹配？

使用正则表达式对象的test()方法

true / false = 正则表达式对象.test(用户填写的字符串)

true : 字符串格式匹配成功
false: 字符串格式匹配失败

有关正则表达式的写法看下面链接

正则表达式_HHYZBC的博客-CSDN博客https://blog.csdn.net/HHYZBC/article/details/124428612

BOM编程

BOM编程中，window对象是顶级对象，代表浏览器窗口。

BOM编程中常用方法

open
- 开启窗口
close
- 关闭窗口
confirm
- 弹出一个有确定和取消按钮的消息框，可以返回True和False。
top
- 顶级窗口
self
- 当前窗口
location
- 表示浏览器地址栏上的URL
history
- 表示历史
- back()
  - 后退
- go()
  - 前进

HHYZBC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript

JavaScript是什么JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。. 虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。.以下内容中JavaScript全部使用简称JS表示。JS的作用是什么允许您在网页上实现复杂的功能 - 每次网页不仅仅是坐在那里显示静态信息供您查看 - 显示
复制链接

扫一扫