JavaScript

已于 2022-02-15 14:30:41 修改
阅读量643 收藏 1
点赞数
分类专栏： JavaWeb笔记 文章标签： javascript 前端 开发语言
于 2022-02-14 17:09:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhujianghan/article/details/121582583
版权

JavaScript--W3School

JavaScript

概念（一门客户端脚本语言）

  1. 运行在客户端浏览器中。每一个浏览器都有javaScript的解析引擎
  2. 脚本语言：不需要编译，直接就可以被浏览器解析执行

功能

可以增强用户与html页面的交互过程，可以来控制html元素，让页面有一些动态效果，增强用户的体验。

JavaScript发展史

  1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为c–，后来更名为ScriptEase
  2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来请来了Sun公司的专家，修改LiveScript，命名为JavaScript(JavaScript和Java没有半毛钱关系，如果有，就是SUN公司参与了设计)
  3. 1996年，微软抄袭JavaScript开发出了JScript
  4. 1997年，ECMA(欧洲计算机制造商协会）ECMAScript，就是所有客户端脚本语言的标准。
  5. javaScript=ECMAScript+JavaScript自己特有的东西（BOM+DOM）

ECMAScript:客户端脚本语言的标准

基本语法

与html结合的方式

  1. 内部JS：定义< script>,标签体内容就是js代码
  2. 外部JS：定义< script>,定义src属性引入外部的js文件
    注意：
    1. < script>可以定义在html页面的任意位置，但是定义的位置会影响执行的顺序
    2. < script>可以定义多个
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert("hello world");
    </script>
    <script src="JS/jsDemo.js"></script>
</head>
<body>
    <input type="text">
<!--    <script>-->
<!--        alert("hello world");-->
<!--    </script>-->
</body>
</html>

在这里插入图片描述

注释

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

数据类型

  1. 原始数据类型(基本数据类型)区分大小写
    1. number:数字。整数/小数/NaN(not a number 一个不是数字的数字类型,区分大小写)
    2. string:字符串。字符串（没有字符的概念）单引号多引号都可以"abc" ‘abc’ ‘a’
    3. boolean：布尔。true和false
    4. null:一个对象为空的占位符
    5. undefined:未定义。如果一个变量没有给初始化值，则会默认为undefined
  2. 引用数据类型：对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义number变量
        var num=1;
        var num2 = 2.2;
        var num3 = NaN;
        document.write(num+"<br>");
        document.write(num2+"<br>");
        document.write(num3+"<br>");
        //定义String
        var str="abc";
        var str1="def";
        var str2='ab';
        document.write(str+"<br>");
        document.write(str1+"<br>");
        document.write(str2+"<br>");
        //定义null,undefined
        var obj=null;
        var obj2=undefined;
        var obj3;
        document.write(obj+"<br>");
        document.write(obj2+"<br>");
        document.write(obj3+"<br>");
        //定义boolean
        var b=true;
        document.write(b+"<br>");
    </script>
</head>
<body>
<input type="text">
</body>
</html>

在这里插入图片描述

变量

  1. 变量：一小块存储数据的内存空间
  2. Java语言是强数据类型语言（在开辟变量存储空间时，定义了空间将来存储的数据的数据类型，只能存储固定类型的数据）
  3. JavaScript是弱类型语言（在开辟变量存储空间时，不定义空间将来存储的数据的数据类型，可以存放任意数据类型）所以typeof(变量名)获取数据类型没什么实际意义
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

运算符

一元运算符（只有一个运算数的运算符）
  1. ++，–：自增自减。在前：先自增自减再运算。在后：先运算再自增自减。
  2. +，-：正号，负号。
  3. 注意：在JS中，如果运算数不是运算符的类型，那么JS引擎会自动将运算数进行类型转换。例如其他类型转number:
    1. string转number，按照字面值转换，如果字面值不是数字，则转为NaN(不是数字的数字)
    2. boolean转number，+/-true为1，+/-false为0
    3. null为0
    4. undefined为NaN
      在这里插入图片描述
算术运算符

+、-、*、/、%
在这里插入图片描述

比较运算符

>、 <、 ==、 >=、 <=、 ===(全等于)
比较方式：

  1. 类型相同，直接比较（字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止）
  2. 类型不同，先进行类型转换，在比较（===全等于，在比较之前，先判断类型，若类型不同，则直接返回false）
逻辑运算符

&&、||、！
!进行逻辑转换：其他类型转boolean：

  1. number ：0或NaN为假，其他为真
  2. string：空串为false，其他为true
  3. null和undefined：都是false
  4. 对象：所有对象都为true
三元运算符

表达式1？值1：值2

特殊语法（建议不知道）

  1. 语句以分号结尾。如果一行只有一条语句，可以不写分号。但是不建议省略。
  2. 变量的定义用var关键字，也可以不用（用：定义的变量是局部变量。不用：定义的变量是全局变量）

流程控制语句（和java一模一样）

  1. if…else…
  2. switch:
    1. 在java中，switch可以接受的变量类型：byte,int,short,char,枚举(1.5后)，String(1.7后)
    2. 在JS中，switch可以接受任意的原始数据类型
  3. while
  4. do…while
  5. for(注意这里面循环用到的变量用var关键字定义)
示例99乘法表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
            border: 1px solid;
        }
    </style>

    <script>
        document.write("<table align='center'>");

        for (var i=1;i<=9;i++){
            document.write("<tr>");
            for (var j=1;j<=i;j++){
                document.write("<td>");
                document.write(j+"*"+i+"="+(i*j)+"  ");
                document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

基本对象

Function对象

创建
  1. var fun=new Function(形参列表，方法体);
  2. Function 方法名(形参列表){方法体}
  3. var 方法名=Function(形参列表){方法体}
属性

length:形参个数

特点
  1. 方法定义中返回值类型，形参类型都为var，都不用写
  2. 方法是一个对象，如果定义名称相同的方法，会覆盖
  3. 在JS中，方法的调用只与方法名有关，实参个数可以任意
  4. 在方法声明中会有一个隐藏的内置对象（数组），arguments，封装所有的实参。
调用

方法名称（实参列表）；

Array

创建
  1. var arr=new Array(元素列表);
  2. var arr=new Array(数组长度);
  3. var arr=[元素列表];
方法
  1. join(参数):将数组中的元素按照指定的分隔符拼接成字符串
  2. push():像数组末尾添加一个或者多个元素，并返回数组长度
属性
  1. length:数组的长度
特点
  1. JS中，数组元素的类型可变
  2. JS中，数组元素的长度可变

Date(日期对象)

创建

var date=new Date();

方法
  1. toLocalString():用本地字符串格式返回当前date对象对应的时间
  2. getTime():获取毫秒值。当前时间到1970/1/1的毫秒差。可以当成时间戳。

Math（数学对象）

创建(Math对象不用创建，直接使用)

Math.方法名

方法
  1. round():四舍五入
  2. ceil():向上取整
  3. floor():向下取整
  4. random():[0,1)之间的随机数
[1,100]的随机正整数小案例

在这里插入图片描述

属性（PI）

RegExp（正则表达式对象）表单校验

正则表达式（定义字符串的组成规则）
  1. 单个字符：[ ]。例如[a] [a-zA-Z0-9_]
    特殊符号代表特殊含义的单个字符：\d单个数字字符[0-9]。\w单个单词字符[a-zA-Z0-9_]
  2. 量词符号：
    ? 出现0个或者1个
    * 出现0个或者多个
    + 出现1个或者多个
    {m,n}出现>=m次<=n次（如果m缺省，{，n}则上限为n。如果n缺省，{m,}则下限为m）
    ^开始：必须以其后的子表达式开始；
    $结束：必须以其前面的子表达式结束
正则对象
  1. 创建（1.var reg=new RegExp(“正则表达式”)；2. var reg=new RegExp(/正则表达式/)）双引号里面的\要转义
  2. 方法（reg.test(字符串对象));
    在这里插入图片描述

Global

  1. 特点：全局对象，这个Global种封装的方法不需要对象就可以直接调用。方法名();
  2. 方法：
    1. encodeURI():url编码
    2. decodeURI():url编码
    3. encodeURIComponent():url编码，编码的字符更多
    4. decodeURIComponent():url解码
    5. parseInt():将字符串转换为数字（注意判断每一个字符是否是数字，知道不是数字为止，将前边数字部分转为number）
    6. isNaN():判断一个值是否为NaN（NAN六亲不认，连自己都不认，NaN参与的==比较全部为false）
    7. eval():JS字符串，并把它作为脚本代码来执行。
<script>
    var baidu=encodeURI("百度");
    document.write(baidu+"<br>");//%E7%99%BE%E5%BA%A6
    var baidu1=decodeURI("%E7%99%BE%E5%BA%A6");
    document.write(baidu1+"<br>");//百度
    var n=encodeURIComponent("https://www.baidu.com/?tn=80035161_1_dg");
    document.write(n+"<br>");//https%3A%2F%2Fwww.baidu.com%2F%3Ftn%3D80035161_1_dg
    var n1=decodeURIComponent("https%3A%2F%2Fwww.baidu.com%2F%3Ftn%3D80035161_1_dg");
    document.write(n1+"<br>");//https://www.baidu.com/?tn=80035161_1_dg
    var str="123abc123";
    document.write(parseInt(str)+"<br>");//123
    var str1="abc123";
    document.write(parseInt(str1)+"<br>");//NaN
    var o2=NaN;
    document.write((o2==NaN)+"<br>");//false
    document.write(isNaN(o2)+"<br>");//true
    eval("alert(123456)");
</script>

BOM

概念

Browser Object Model浏览器对象模板（将浏览器的各个部分封装成对象）

组成

  1. Window：窗口对象（包含html的body 所以包含DOM的document对象）
  2. Location: 地址栏对象
  3. History :历史记录对象
  4. Screen:屏幕对象（不重要）
  5. Navigator:浏览器对象（不重要）

Window窗口对象

  1. 对象不需要创建
  2. 调用方法：
    window.方法名()
    方法名()
  3. 方法：
    1. 与弹出有关的方法
      alert() 显示带有一个消息和一个确认按钮的警示框
      confirm() 显示带有一段消息、确认按钮、取消按钮的对话框（返回值：点击确认返回true，点击取消返回false）
      prompt() 显示可提示用户输入的对话框（返回值为用户输入的内容）
      在这里插入图片描述
    2. 与打开关闭有关的方法
      close():关闭浏览器窗口（谁调用我，我关谁）
      open():打开一个新的浏览器窗口（返回值：新的window对象）
      在这里插入图片描述
    3. 与定时器有关的方式
      setTimeout() 在指定毫秒数后调用函数或计算表达式
      1. 参数1：js代码或函数；参数2：毫秒值
      2. 返回值：唯一标识，用于取消定时器
      clearTimeout() 取消由setTimeout() 方法设置的timeout
      setInterval() 按照指定的周期（毫秒计）来调用函数或计算表达式
      clearInterval() 取消由serInterval()设置的timeout 在这里插入图片描述

案例：轮播图

在这里插入图片描述
4. 属性：
1. 获取其他BOM对象：history location Navigator Screen
2. 获取DOM对象document

locatiom地址栏对象

  1. 创建/获取：window.location location
  2. 方法：reload() 刷新、重新加载
  3. 属性：href 设置/返回完整的URL
    在这里插入图片描述

案例：5秒倒计时后自动跳转到百度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        <span id="time">5</span>秒之后跳转到百度
    </p>
<script>
    //1.获取span
    var gettime=document.getElementById("time");
    //2.控制显示时间,修改标签体内容
    var time=5;

    //3.函数
    function fun() {
        time--;
        if (time<=0){
            location.href="https://www.baidu.com";
        }
        gettime.innerHTML=time+"";
    }
    //4.循环计时器，每隔一秒调用一次函数
    window.setInterval(fun,1000);
</script>
</body>
</html>

history对象

  1. 创建/获取: window.history history
  2. 方法：
    back() 加载当前窗口history列表中的前一个URL
    forward() 加载当前窗口history列表中的后一个URL
    go() 加载当前窗口history列表中的某个具体页面
  3. 属性：length 返回当前窗口历史列表记录中的URL数量

DOM

简单学习

document object model文档对象模型

  1. 功能：控制（增删改查）html文档的内容
  2. 代码（获取页面标签/元素对象Element）
    var 对象名=document.getElementById(“id值”)：通过元素的id值获取元素对象
  3. 操作Element对象：
    1. 修改属性值：对象名.属性名=“”；（明确获取的对象是哪一个，查看API文档找其中有哪些属性可以设置）
    2. 修改标签体内容：属性innerHTML

详细

将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作。
W3C DOM 标准被分为3各不同的部分：

  1. 核心DOM （针对任何结构化文档的标准模型）
    Document:文档对象
    Element: 元素对象
    Attribute: 属性对象
    Text: 文本对象
    Comment: 注释对象
    Node: 节点对象（其他5个的父对象）
  2. XML DOM（针对XML文档的标准模型）
  3. HTML DOM（针对HTML文档的标准模型）

核心DOM

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

HTML DOM

在这里插入图片描述

事件简单学习

某些组件被执行了某些操作后，出发某些代码的执行。

如何绑定事件

  1. 直接在html标签上，指定事件的属性（操作），属性值为js代码。
    单击事件：onclick
    在这里插入图片描述

  2. 通过js获取元素，指定事件属性，设置一个函数 (降低耦合)
    在这里插入图片描述

实现两照片点击来回切换的效果

  1. 获得照片1对象
  2. 设置标记判断照片是1还是2
  3. 设置点击事件，如果是1则点击切换为2并且修改标记，如果是2则点击切换为1并修改标记。
<body>
    <img id="i1"src="img/i1.jpg"height="70dp" width="70dp">
<script>
var i=document.getElementById("i1");
var flag=false;//代表图片1
i.οnclick=function(){
    if (flag==false){//代表1要切换为2
        i.src="img/i2.jpg";
        flag=true;
    }else{//代表2要切换为1
        i.src="img/i1.jpg";
        flag=false;
    }
};
</script>
</body>

在这里插入图片描述

F12的控制台console可以看到JS代码的错误

在这里插入图片描述

案例（JS动态添加删除表格数据）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
</head>
<body>
<div>
    <input id="num" type="text" name="num" placeholder="请输入编号">
    <input id="name" type="text" name="name" placeholder="请输入姓名">
    <input id="sex" type="text" name="sex" placeholder="请输入性别">
    <input id="btn" type="button" name="btn" value="添加">
</div>


<table border="1" id="table">
    <caption>学生信息管理</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td><a href="JavaStrap:void(0);" onclick="del(this);">删除</a></td>
    </tr>

</table>

<script>
    var btn=document.getElementById("btn");

    btn.onclick=function () {
        var num=document.getElementById("num").value;
        var name=document.getElementById("name").value;
        var sex=document.getElementById("sex").value;

        var table=document.getElementById("table");
        table.innerHTML+="<tr>\n" +
            "        <td>"+num+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+sex+"</td>\n" +
            "        <td><a href=\"JavaStrap:void(0);\" οnclick=\"del(this);\">删除</a></td>\n" +
            "    </tr>"
    }

function del(obj){
        var table=obj.parentNode.parentNode.parentNode;
        var tr=obj.parentNode.parentNode;

        table.removeChild(tr);
    }


</script>



</body>
</html>
葡萄玛奇朵朵
关注
专栏目录
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基本语法
weixin_62859027的博客
04-27 3431
JavaScript基本语法一·JavaScript简介1.JavaScript发展历史2.JavaScript的组成3.JavaScript的添加方式4.JavaScript的输出方式二·JavaScript基本语法1 .语法规范2.变量变量的声明3.数据类型4.运算符算数运算符赋值运算符字符串运算符比较运算符逻辑运算与类型运算位运算符5.语句选择语句循环语句跳转语句6.数组7.对象8.函数9.预编译三.总结 一·JavaScript简介 1.JavaScript发展历史 JavaScript是一种可嵌入
JavaScript三元运算
热门推荐
abc689101的博客
03-28 2万+
三元运算符是 JavaScript 仅有的使用三个操作数的运算符。一个条件后面会跟一个问号（?），如果条件为 truthy ，则问号后面的表达式A将会执行；表达式A后面跟着一个冒号（:），如果条件为 falsy ，则冒号后面的表达式B将会执行。本运算符经常作为 if 语句的简捷形式来使用。（MDN） 使用三元运算符可以代替简单的 if 语句，让代码更简洁，减少分支。其中条件为假的情况除了false，有以下几种：Null，undefined，NaN ，0(数字0)，空字符串。这些值有在Boolean...
什么是JavaScript中的Proxy对象？它如何用于对象拦截？
官方推荐
07-18 1万+
什么是JavaScript中的Proxy对象？它如何用于对象拦截？
JavaScript 打印菱形
YMYYZ的博客
04-29 1859
JavaScript的七种数据类型
Zhang_wang_yun的博客
04-04 5651
在我们的javascript中，每个数据都有不一样的类型，它们被简称为数据类型。
javascript
jsd2root的博客
07-16 1958
javascript 本词条由“科普中国”百科科学词条编写与应用工作项目审核。 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 在1995年时，由Net
JavaScript求和函数
m0_59878114的博客
07-22 3898
<script> //求和函数 //要求: //1.封装函数,名字为sum //2.功能:根据传入的两个数,求和并且返回求和的结果（函数必须有return返回值） //3.测试:调用该函数时获取结果后在控制台打印结果判断是否正确 letnum1=+prompt('请输入第一个数') letnum2=+prompt('请输入第二个数') ...
javascript 阮一峰入门教程
running_131的博客
07-13 3511
Javascript [阮一峰大神](https://wangdoc.com/javascript/index.html)，深入浅出 文章来源 https://wangdoc.com/javascript/index.html 博客图片显示方法 https://crazyang.blog.csdn.net/article/details/87917772?
ArcGis-for-javaScript最全中文API.pdf
06-28
ArcGIS JavaScript API 介绍与示例 ArcGIS JavaScript API 是 ESRI 提供的一种基于 JavaScript 的开发工具，允许开发者创建交互式的 Web 地图应用程序。本文将对 ArcGIS JavaScript API 进行详细的介绍，并提供多个...
VS2015安装证书，JavaScript_ProjectSystem.msi，JavaScript_LanguageService.msi
08-06
在这个场景中，我们关注的是VS2015的安装过程中涉及到的证书问题以及两个特定的组件：JavaScript_ProjectSystem.msi和JavaScript_LanguageService.msi。 首先，关于“VS2015安装证书”，这通常是指安装过程中需要...
现代JavaScript教程
08-10
现代JavaScript教程是一个全面的学习资源，旨在帮助开发者深入理解JavaScript这一重要的编程语言。JavaScript，作为Web开发的核心技术之一，被广泛用于构建交互式的网页和应用程序。本教程覆盖了从基础概念到高级...
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码
12-11
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2599
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 576
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 303
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 374
实现中国地图各省数据案例
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值