JavaScript基础语法、常用对象、时间监听以及正则表达式的快速入门。JS入门这一篇就够了！

于 2023-05-21 20:34:12 发布
阅读量361 收藏 2
点赞数
文章标签： javascript java 前端 正则表达式 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wocao_666/article/details/130796112
版权

JavaScript

  • JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。

  • JavaScript 和 Java 是完全不同的语言，不论是概念还是设计，只是名字比较像而已。但是基础语法类似，所以我们有java的学习经验，再学习JavaScript 语言就相对比较容易些。

  • JavaScript（简称：JS） 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。ECMA 规定了一套标准 就叫 ECMAScript ，所有的客户端校验语言必须遵守这个标准，当然 JavaScript 也遵守了这个标准。ECMAScript 6 (简称ES6) 是最新的 JavaScript 版本（发布于 2015 年)，我们的课程就是基于最新的 ES6 进行讲解。

JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：

  • 内部脚本：将 JS代码定义在HTML页面中
  • 外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
内部脚本

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间

  • 一般把脚本置于 元素的底部，可改善显示速度

    因为浏览器在加载页面的时候会从上往下进行加载并解析。 我们应该让用户看到页面内容，然后再展示动态的效果。

外部脚本

在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

注意：

  • 外部脚本不能包含 <script> 标签

    在js文件中直接写 js 代码即可，不要在 js文件 中写 script 标签

  • <script> 标签不能自闭合

    在页面中引入外部js文件时，不能写成 <script src="../js/demo.js" />。

JavaScript基础语法

书写语法

  • 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

  • 每行结尾的分号可有可无

    如果一行上写多个语句时，必须加分号用来区分多个语句。

  • 注释

    • 单行注释：// 注释内容
    • 多行注释：/* 注释内容 */

    注意：JavaScript 没有文档注释

  • 大括号表示代码块

输出语句

js 可以通过以下方式进行内容的输出，只不过不同的语句输出到的位置不同

  • 使用 window.alert() 写入警告框

  • 使用 document.write() 写入 HTML 输出

  • 使用 console.log() 写入浏览器控制台

变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。格式 var 变量名 = 数据值;。而在JavaScript 是一门弱类型语言，变量可以存放不同类型的值；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数

var test = 20;
test = "张三";

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

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

JavaScript 中 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 关键字所在的代码块内有效，且不允许重复声明。

例如：

{
    let age = 20;
}
alert(age);

而如果在代码块中定义两个同名的变量，IDEA 开发工具就直接报错了

ECMAScript 6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

数据类型

JavaScript 中提供了两类数据类型：原始类型 和 引用类型。

使用 typeof 运算符可以获取数据类型

alert(typeof age); 以弹框的形式将 age 变量的数据类型输出

原始数据类型：

  • number：数字（整数、小数、NaN(Not a Number)）

    var age = 20;
var price = 99.8;

alert(typeof age); // 结果是 ： number
alert(typeof price);// 结果是 ： number

    注意： NaN是一个特殊的number类型的值，后面用到再说

  • string：字符、字符串，单双引皆可

    var ch = 'a';
var name = '张三'; 
var addr = "北京";

alert(typeof ch); //结果是  string
alert(typeof name); //结果是  string
alert(typeof addr); //结果是  string

    ==注意：==在 js 中 双引号和单引号都表示字符串类型的数据

  • boolean：布尔。true，false

    var flag = true;
var flag2 = false;

alert(typeof flag); //结果是 boolean
alert(typeof flag2); //结果是 boolean

  • null：对象为空

    var obj = null;

alert(typeof obj);//结果是 object

    为什么打印上面的 obj 变量的数据类型，结果是object；这个官方给出了解释，

    这实际上是JavaScript最初实现中的一个错误，然后被ECMAScript沿用了。现在，null被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

  • undefined：当声明的变量未初始化时，该变量的默认值是 undefined

    var a ;
alert(typeof a); //结果是 undefined
运算符

JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的，不同的是 JS 关系运算符中的 == 和 ===，一会我们只演示这两个的区别，其他运算符将不做演示

  • 一元运算符：++，–

  • 算术运算符：+，-，*，/，%

  • 赋值运算符：=，+=，-=…

  • 关系运算符：>，<，>=，<=，!=，==，===…

  • 逻辑运算符：&&，||，!

  • 三元运算符：条件表达式 ? true_value : false_value

==和===区别

  • ==：

    1. 判断类型是否一样，如果不一样，则进行类型转换

    2. 再去比较其值

  • ===：js 中的全等于

    1. 判断类型是否一样，如果不一样，直接返回false
    2. 再去比较其值
类型转换

  • 其他类型转为number

    • string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN

      将 string 转换为 number 有两种方式：

      • 使用 + 正号运算符：

        var str = +"20";
alert(str + 1) //21

      • 使用 parseInt() 函数(方法)：

        var str = "20";
alert(parseInt(str) + 1);

      建议使用 parseInt() 函数进行转换。

    • boolean 转换为 number 类型：true 转为1，false转为0

      var flag = +false;
alert(flag); // 0

  • 其他类型转为boolean

    • number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
    • string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
    • null类型转换为 boolean 类型是 false
    • undefined 转换为 boolean 类型是 false
流程控制语句

JavaScript 中提供了和 Java 一样的流程控制语句，如下

  • if
  • switch
  • for
  • while
  • dowhile
if 语句
var count = 3;
if (count == 3) {
    alert(count);
}
switch 语句
var num = 3;
switch (num) {
    case 1:
        alert("星期一");
        break;
    case 2:
        alert("星期二");
        break;
    case 3:
        alert("星期三");
        break;
    case 4:
        alert("星期四");
        break;
    case 5:
        alert("星期五");
        break;
    case 6:
        alert("星期六");
        break;
    case 7:
        alert("星期日");
        break;
    default:
        alert("输入的星期有误");
        break;
}
for 循环语句
var sum = 0;
for (let i = 1; i <= 100; i++) { //建议for循环小括号中定义的变量使用let
    sum += i;
}
alert(sum);
while 循环语句
var sum = 0;
var i = 1;
while (i <= 100) {
    sum += i;
    i++;
}
alert(sum);
dowhile 循环语句
var sum = 0;
var i = 1;
do {
    sum += i;
    i++;
}
while (i <= 100);
alert(sum);
函数

函数（就是Java中的方法）是被设计为执行特定任务的代码块；JavaScript 函数通过 function 关键词进行定义。

定义格式

函数定义格式有两种：

  • 方式1

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

  • 方式2

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

注意：

  • 形式参数不需要类型。因为JavaScript是弱类型语言

  • 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

函数调用

函数调用函数：

函数名称(实际参数列表);

eg：

let result = add(10,20);

注意：

  • JS中，函数调用可以传递任意个数参数

  • 例如 let result = add(1,2,3);

    它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。

JavaScript常用对象

JavaScript 提供了很多对象供使用者来使用。这些对象总共分类三类

  • 基本对象

  • BOM 对象

  • DOM对象

Array对象

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 是弱类型，所以可以存储任意的类型的数据。

例如如下代码：

// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]); // 10
alert(arr3[9]);  //undefined

上面代码在定义数组中给了三个元素，又给索引是 10 的位置添加了数据 10，那么 索引3 到 索引9 位置的元素是什么呢？我们之前就介绍了，在 JavaScript 中没有赋值的话，默认就是 undefined。

如果给 arr3 数组添加字符串的数据，也是可以添加成功的

arr3[5] = "hello";
alert(arr3[5]); // hello
属性

Array 对象提供了很多属性，而我们只讲解 length 属性，该数组可以动态的获取数组的长度。而有这个属性，我们就可以遍历数组了

var arr = [1,2,3];
for (let i = 0; i < arr.length; i++) {
    alert(arr[i]);
}
方法

  • push 函数：给数组添加元素，也就是在数组的末尾添加元素

    参数表示要添加的元素

    // push:添加方法
var arr5 = [1,2,3];
arr5.push(10);
alert(arr5);  //数组的元素是 {1,2,3,10}

  • splice 函数：删除元素

    参数1：索引。表示从哪个索引位置删除

    参数2：个数。表示删除几个元素

    // splice:删除元素
var arr5 = [1,2,3];
arr5.splice(0,1); //从 0 索引位置开始删除，删除一个元素 
alert(arr5); // {2,3}
String对象

String对象的创建方式有两种

  • 方式1：

    var 变量名 = new String(s);

  • 方式2：

    var 变量名 = "数组";

属性：

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

函数：

String对象提供了很多函数（方法），下面给大家列举了两个方法。

名称描述
charAt()返回在指定位置的字符
indexOf()检索字符串

String对象还有一个函数 trim() ，该方法在文档中没有体现，但是所有的浏览器都支持；它是用来去掉字符串两端的空格。

代码演示：

var str4 = '  abc   ';
alert(1 + str4 + 1);

上面代码会输出内容 1 abc 1，很明显可以看到 abc 字符串左右两边是有空格的。接下来使用 trim() 函数

var str4 = '  abc   ';
alert(1 + str4.trim() + 1);

输出的内容是 1abc1 。这就是 trim() 函数的作用。

用户在输入用户名和密码时，可能会习惯的输入一些空格，这样在我们后端程序中判断用户名和密码是否正确，结果肯定是失败。所以我们一般都会对用户输入的字符串数据进行去除前后空格的操作。

自定义对象

在 JavaScript 中自定义对象特别简单，下面就是自定义对象的格式：

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

调用属性的格式：

对象名.属性名

调用函数的格式：

对象名.函数名()

BOM

BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。

我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。比如：我现在想将浏览器地址栏的地址改为 https://www.itheima.com 就可以通过使用 BOM 中定义的 Location 对象的 href 属性，代码： location.href = "https://itheima.com";

BOM 中包含了如下对象：

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

BOM 中的 Navigator 对象和 Screen 对象基本不会使用，所以我们的课堂只对 Window、History、Location 对象进行讲解。

window：浏览器窗口对象
获取

直接使用window，其中windows.可以省略

属性

主要用来获取其他BOM对象

  • Navigator：浏览器对象
  • Screen：屏幕对象
  • History：历史记录对象
  • Location：地址栏对象
方法
名称描述
alert()显示带有一段消息和一个确认按钮的警告框
confim()显示带有一段消息以及确认按钮和取消按钮的对话框，点击确认返回true，点击取消返回false
setInterval()按照指定的周期(以毫秒计)来调用函数或计算表达式
setTimeout()在指定的毫秒数后调用函数或计算表达式
History：历史记录
获取：

使用window.history获取，其中window.可以省略

方法：
名称描述
back()加载history列表中的前一个URL。
forward()加载history列表中的下一个URL。
Location：地址栏对象
获取：

使用window.location获取，其中window.可以省略

方法：
名称描述
href设置或返回完整的URL。

DOM

概述

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

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

作用：

JavaScript 通过 DOM， 就能够对 HTML进行操作了

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

DOM相关概念：

DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分：

  1. 核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准

    • Document：整个文档对象

    • Element：元素对象

    • Attribute：属性对象

    • Text：文本对象

    • Comment：注释对象

  2. XML DOM： 针对 XML 文档的标准模型

  3. HTML DOM： 针对 HTML 文档的标准模型

    该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象

    • 例如：<img> 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。
    • 例如：<input type='button'> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。
获取 Element对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数

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

代码演示：

下面有提前准备好的页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="../imgs/off.gif"> <br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <script>
		//在此处书写js代码
    </script>
</body>
</html>

  1. 根据 id 属性值获取上面的 img 元素对象，返回单个对象

    var img = document.getElementById("light");
alert(img);

  2. 根据标签名称获取所有的 div 元素对象

    var divs = document.getElementsByTagName("div");// 返回一个数组，数组中存储的是 div 元素对象
// alert(divs.length);  //输出 数组的长度
//遍历数组
for (let i = 0; i < divs.length; i++) {
    alert(divs[i]);
}

  3. 获取所有的满足 name = 'hobby' 条件的元素对象

    //3. getElementsByName：根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
    alert(hobbys[i]);
}

  4. 获取所有的满足 class='cls' 条件的元素对象

    //4. getElementsByClassName：根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName("cls");
for (let i = 0; i < clss.length; i++) {
    alert(clss[i]);
}
HTML Element对象使用

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

下面我们通过具体的案例给大家演示文档的查询和对象的使用；下面提前给大家准备好的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="../imgs/off.gif"> <br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <script>
        //在此处写js低吗
    </script>
</body>
</html>

需求：

  1. 点亮灯泡

    //1，根据 id='light' 获取 img 元素对象
var img = document.getElementById("light");
//2，修改 img 对象的 src 属性来改变图片
img.src = "../imgs/on.gif";

  2. 将所有的 div 标签的标签体内容替换为 呵呵

    //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 = "呵呵";
}

  3. 使所有的复选框呈现被选中的状态

    //1，获取所有的 复选框 元素对象
var hobbys = document.getElementsByName("hobby");
//2，遍历数组，通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态
for (let i = 0; i < hobbys.length; i++) {
    hobbys[i].checked = true;
}

事件监听

要想知道什么是事件监听，首先先聊聊什么是事件？

HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击、鼠标移动到元素之上、按下键盘按键 等都是事件。

事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码。

事件绑定

JavaScript 提供了两种事件绑定方式：

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

    如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性，在事件属性中绑定函数。onclick 就是 单击事件 的事件属性。onclick='on（）' 表示该点击事件绑定了一个名为 on() 的函数

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

    下面是点击事件绑定的 on() 函数

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

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

    如下面代码是按钮标签，在该标签上我们并没有使用 事件属性，绑定事件的操作需要在 js 代码中实现

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

    下面 js 代码是获取了 id='btn' 的元素对象，然后将 onclick 作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行

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

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数-->
    <input type="button" value="点我" onclick="on()"> <br>
    <input type="button" value="再点我" id="btn">

    <script>
        function on(){
            alert("我被点了");
        }
      	//方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件
        document.getElementById("btn").onclick = function (){
            alert("我被点了");
        }
    </script>
</body>
</html>
常见事件

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

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

正则对象使用

创建对象

正则对象有两种创建方式：

  • 直接量方式：注意不要加引号

    var reg = /正则表达式/;

  • 创建 RegExp 对象

    var reg = new RegExp("正则表达式");
函数

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

正则表达式

从上面创建正则对象的格式中可以看出不管哪种方式都需要正则表达式，那么什么是正则表达式呢？

正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。

正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。

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

  • ^：表示开始

  • $：表示结束

  • [ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符

  • .：代表任意单个字符，除了换行和行结束符

  • \w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]

  • \d：代表数字字符： 相当于 [0-9]

量词：

  • +：至少一个

  • *：零个或多个

  • ？：零个或一个

  • {x}：x个

  • {m,}：至少m个

  • {m,n}：至少m个，最多n个

代码演示：

// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;

var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

摘星2312

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值