概念

JavaScript 是一门跨平台、面向对象的脚本语言,不需要编译,由浏览器直接解析并执行。JavaScript 是用来控制网页行为的,它能使网页可交互;那么它可以做什么呢?如改变页面内容、修改指定元素的属性值、对表单进行校验等。

引入方式

内部脚本

在 HTML 中,JavaScript 代码必须位于 <script></script> 标签之间,在 HTML 文档中可以在任意地方,放置任意数量的<script>标签,但一般把脚本置于<body>元素的底部,可改善显示速度。

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    alert("hello js1");
</script>
</body>
</html>

外部脚本

  1. demo.js中书写代码,如下(在js文件中直接写 js 代码即可,不要在 js文件 中写 script 标签)
    注:<script> 标签不能自闭合,即必须写一对标签。
alert("hello js");
  1. 在页面中引入外部的js文件,在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="../js/demo.js"></script>
</body>
</html>

基础语法

书写语法

  • 区分大小写:与 Java 一样,变量名、函数名以及其他一切东西都是区分大小写的
  • 每行结尾的分号可有可无,建议加上
    如果一行上写多个语句时,必须加分号用来区分多个语句。
  • 注释
    • 单行注释:// 注释内容
    • 多行注释:/* 注释内容 */

    注意:JavaScript 没有文档注释

输出语句

  1. 使用 window.alert() 弹出警告框,window为内置对象可直接写alert()方法
  2. 使用 document.write() 写入 HTML 输出
  3. 使用 console.log() 写入浏览器控制台

变量

  1. var 关键字(variable 的缩写)来声明变量。格式 var 变量名 = 数据值;。JavaScript 是一门弱类型语言,变量可以存放不同类型的值;如下在定义变量时赋值为数字数据,还可以将变量的值改为字符串类型的数。
var test = 20;
test = "张三";
  1. var 关键字有点特殊,有以下地方和其他语言不一样
  • 作用域:全局变量
{
    var age = 20;
}
alert(age);  // 在代码块中定义的age 变量,在代码块外边还可以使用
  • 变量可以重复定义
{
    var age = 20;
    var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
}
alert(age); //打印的结果是 30

针对如上的问题,ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var,但是所声明的变量,只在 let 关键字所在的代码块内有效,且不允许重复声明。
ECMAScript 6 新增了 const关键字,用来声明一个只读的常量。一旦声明,常量的值就不能改变。

js 中的变量名命名也有如下规则,和java语言基本都相同

  • 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
  • 数字不能开头
  • 建议使用驼峰命名

数据类型

JavaScript 中提供了两类数据类型:原始类型 和 引用类型。
使用 typeof 运算符可以获取数据类型:alert(typeof age);

原始数据类型

  1. number:数字(整数、小数、NaN(Not a Number))
  2. string:字符、字符串,单双引皆可
  3. boolean:布尔。true,false
  4. null:对象为空。注:对null使用typeof判定得到的是Object结果
  5. undefined:当声明的变量未初始化时,该变量的默认值是 undefined

运算符

JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的,不同的是 JS 关系运算符中的 =====

  • 一元运算符:++,–
  • 算术运算符:+,-,*,/,%
  • 赋值运算符:=,+=,-=…
  • 关系运算符:>,<,>=,<=,!=,==,===…
  • 逻辑运算符:&&,||,!
  • 三元运算符:条件表达式 ? true_value : false_value

==和===区别

  • ==:
    1. 判断类型是否一样,如果不一样,则进行类型转换
    2. 再去比较其值
  • ===:js 中的全等于
    1. 判断类型是否一样,如果不一样,直接返回false
    2. 再去比较其值

上述讲解 == 运算符时,发现会进行类型转换,所以接下来我们来详细的讲解一下 JavaScript 中的类型转换。

其他类型转为number

  • string 转换为 number 类型:按照字符串的字面值,转为数字。如果字面值不是数字,则转为NaN
    将 string 转换为 number 有两种方式:

    • 使用 + 正号运算符:
    • 使用 parseInt() 函数(建议使用):
  • boolean 转换为 number 类型:true 转为1,false转为0

其他类型转为boolean

  • number 类型转换为 boolean 类型:0和NaN转为false,其他的数字转为true
  • string 类型转换为 boolean 类型:空字符串转为false,其他的字符串转为true
  • null类型转换为 boolean 类型是 false
  • undefined 转换为 boolean 类型是 false

流程控制语句

与Java、C++完全一样这边不赘述(if、switch、for、while、dowhile)

函数

定义

方式1

function 函数名(参数1,参数2..){
    要执行的代码
}

方式2

var 函数名 = function (参数列表){
    要执行的代码
}

注:形式参数和返回值不需要类型,因为JavaScript是弱类型语言。

调用

调用:函数名称(实际参数列表);
注意:

  • JS中,函数调用可以传递任意个数参数
  • 例如 let result = add(1,2,3);
    它是将数据 1 传递给了变量a,将数据 2 传递给了变量 b,而数据 3 没有变量接收。

JavaScript常用对象

Array对象

定义

  1. var 变量名 = new Array(元素列表);
    var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据(元素)
  2. var 变量名 = [元素列表];
    var arr = [1,2,3]; //1,2,3 是存储在数组中的数据(元素)
    注意:Java中的数组静态初始化使用的是{}定义,而 JavaScript 中使用的是 [] 定义

访问

访问数组中的元素和 Java 语言的一样,格式如下:
arr[索引] = 值;

特点

JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的,而 JavaScript 是弱类型,所以可以存储任意的类型的数据。

属性

length 属性,该数组可以动态的获取数组的长度。而有这个属性,我们就可以遍历数组了

方法

  • push 函数:给数组添加元素,也就是在数组的末尾添加元素
  • splice 函数:删除元素
    • 参数1:索引。表示从哪个索引位置删除
    • 参数2:个数。表示删除几个元素

String对象

创建

  1. var 变量名 = new String(s);
  2. var 变量名 = "hello";

属性

String对象提供了很多属性,下面给大家列举了一个属性 length ,该属性是用于动态的获取字符串的长度

方法

  1. charAt() 方法可返回指定位置的字符。
  2. indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
  3. trim() 方法用来去掉字符串两端的空格。

自定义对象

var 对象名称 = {
    属性名称1:属性值1,
    属性名称2:属性值2,
    ...,
    函数名称:function (形参列表){},
	...
};

调用:

  • 对象名.属性名
  • 对象名.方法名()

BOM

BOM 中包含了如下对象:

  • Window:浏览器窗口对象
  • Navigator:浏览器对象
  • Screen:屏幕对象
  • History:历史记录对象
  • Location:地址栏对象

1. Window对象

Window为内置对象,可以直接使用
window 对象提供了用于获取其他四个 BOM 组成对象的属性。
例如Window.History获取History对象,而前面的Window.可以省略,
即可以直接通过History获取其对象。

Window对象的方法

  1. setTimeout(function,毫秒值) :在一定的时间间隔后执行一个function,只执行一次
  2. setInterval(function,毫秒值) :在一定的时间间隔后执行一个function,循环执行
  3. confirm("字符串");:一个弹窗,有确认和取消按钮
// confirm(),点击确定按钮,返回true,点击取消按钮,返回false
var flag = confirm("确认删除?");
  1. alert("字符串");:一个弹窗

History对象

方法:

  1. back():加载history列表中的前一个URL
  2. forward():加载history列表中的下一个URL
    这两个方法就相当于浏览器的左右箭头

Location对象

Location对象属性

Location对象提供了很对属性。以后常用的只有一个属性 href:设置或返回完整的URL,举例:location.href = "https://www.baidu.com";

DOM

DOM包括:

  • Document:整个文档对象
  • Element:元素对象
  • Attribute:属性对象
  • Text:文本对象
  • Comment:注释对象

作用:
JavaScript 通过 DOM, 就能够对 HTML进行操作了

  • 改变 HTML 元素的内容
  • 改变 HTML 元素的样式(CSS)
  • 对 HTML DOM 事件作出反应
  • 添加和删除 HTML 元素

获取对象

  • getElementById():根据id属性值获取,返回单个Element对象
  • getElementsByTagName():根据标签名称获取,返回Element对象数组
  • getElementsByName():根据name属性值获取,返回Element对象数组
  • getElementsByClassName():根据class属性值获取,返回Element对象数组

对象使用

HTML 中的 Element 元素对象有很多,不可能全部记住,以后是根据具体的需求查阅文档使用。
举例:

//1,获取所有的 div 元素对象
var divs = document.getElementsByTagName("div");
/*
        style:设置元素css样式
        innerHTML:设置元素内容
    */
//2,遍历数组,获取到每一个 div 元素对象,并修改元素内容
for (let i = 0; i < divs.length; i++) {
    //divs[i].style.color = 'red';
    divs[i].innerHTML = "呵呵";
}
//1,获取所有的 复选框 元素对象
var hobbys = document.getElementsByName("hobby");
//2,遍历数组,通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态
for (let i = 0; i < hobbys.length; i++) {
    hobbys[i].checked = true;
}

事件监听

事件绑定

方式一:通过 HTML标签中的事件属性进行绑定

给输入框绑定点击事件为方法on

<input type="button" onclick='on()’>

function on(){
	alert("我被点了");
}

方式二:通过 DOM 元素属性绑定

<input type="button" id="btn">

document.getElementById("btn").onclick = function (){
    alert("我被点了");
}

常见事件

上面案例中使用到了 onclick 事件属性,那都有哪些事件属性供我们使用呢?下面就给大家列举一些比较常用的事件属性

事件属性名 说明
onclick 鼠标单击事件
onblur 元素失去焦点
onfocus 元素获得焦点
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开

正则对象

创建对象

  1. 直接量方式:注意不要加引号
var reg = /正则表达式/;
  1. 创建 RegExp 对象
var reg = new RegExp("正则表达式");

正则对象的函数

test(str) :判断指定字符串是否符合规则,返回 true或 false

规则

正则表达式常用的规则如下:

  • ^:表示开始
  • $:表示结束
  • [ ]:代表某个范围内的单个字符,比如: [0-9] 单个数字字符
  • .:代表任意单个字符,除了换行和行结束符
  • \w:代表单词字符:字母、数字、下划线(),相当于 [A-Za-z0-9]
  • \d:代表数字字符: 相当于 [0-9]

量词:

  • +:至少一个
  • *:零个或多个
  • ?:零个或一个
  • {x}:x个
  • {m,}:至少m个
  • {m,n}:至少m个,最多n个

Q.E.D.


在读程序猿+指弹发烧友+力量举、街头健身爱好者。