JavaScript学习笔记01

news2024/11/13 7:52:15

JavaScript笔记01

什么是 JavaScript

  • JavaScript 是一门世界上最流行的脚本语言,它是一种弱类型的脚本语言,其代码不需要经过编译,而是由浏览器解释运行,用于控制网页的行为。

发展历史

  • 参考:JavaScript的起源故事

ECMAScript

  • ECMAScript 可以被理解为 JavaScript 的一个国际标准,而 JavaScript 则是 ECMAScript 的一种实现。(最新已更新到了 ES6+)

快速入门

引入 JavaScript

内部标签:

  • 首先,我们可以使用script标签直接在我们的 HTML 文件中编写 JavaScript 代码,通常我们将script标签放在headbody中:

1.我的第一个JavaScript程序.html

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

    <!-- 可以在script标签中,写Javascript代码(通常将script标签放在head或body中) -->
    <script>
        alert('hello,world');
    </script>

</head>
<body>

</body>
</html>
  • 打开浏览器查看网页效果:

在这里插入图片描述

外部引入:

  • 和 CSS 一样,我们还可以把JavaScript代码单独写在一个.js文件中,再通过script标签从外部引入:
  • 所以,上面的 HTML 代码可以改下为如下两个文件:

1.我的第一个JavaScript程序.html

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

    <!-- 通过script标签外部引入 -->
    <!-- 注意:script标签必须成对出现,不能改写成自闭合标签!! -->
    <script src="js/hello.js"></script>
    
    
    <!-- 不用显式定义type,也默认就是type="text/javascript"(可以不用写) -->
    <script type="text/javascript"></script>

</head>
<body>

</body>
</html>

hello.js

alert('hello,world');
  • 查看网页效果:

在这里插入图片描述

  • 可以看到,这两种写法的效果是相同的。

基本语法入门

  • 下面我们通过下面的代码来了解一下 JavaScript 的基本语法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 和Java一样,JavaScript也是严格区分大小写! -->
    <script>
        // 1. 定义变量
        // 变量类型  变量名  =  变量值
        var score = 80;
        // 2. 条件控制
        if(score>=60 && score<=100) {
            // alert(); - 弹出框
            alert("pass");
        }if(score>=0 && score<60) {
            alert("fail");
        }else {
            alert("wrong score");
        }

    </script>

</head>
<body>

</body>
</html>
  • 查看网页弹窗:

在这里插入图片描述

补充:使用浏览器调试 JavaScript 代码

  • 首先我们需要认识一下浏览器自带的网页开发者工具,知道常用的几个工具分别是干什么的:

在这里插入图片描述

  • 我们可以使用Console进入浏览器的控制台,我们可以在里面写 JavaScript 代码。例如:我们可以通过输入console.log()来打印变量:

在这里插入图片描述

  • 我们也可以通过Sources来对我们的 JavaScript 代码打断点,一步一步地调试我们的程序:

在这里插入图片描述

在这里插入图片描述

数据类型

变量

使用var定义变量(ES6 之后建议使用let或者const

var name = "张三";
var num = 1;

number

  • JavaScript 不区分小数和整数:
123  // 整数
123.1  // 浮点数
1.123e3  // 科学计数法
-99  // 负数
NaN  // Not a Number
Infinity  // 表示无限大

字符串

  • 可以用单引号,也可以用双引号:
'abc'
"abc"

布尔值

  • 和 Java 相同:
true
false

逻辑运算

  • 与、或、非:
&&  // 与,两个都为真,结果为真
||  // 或,一个为真,结果为真
!  // 非,真即假,假即真(取反)

比较运算符【重点】

=  // 赋值
==  // 等于(类型不一样,值一样,也会判断为true),非常不建议使用!!!
===  // 绝对等于(类型一样,值也一样,才会判断为true),建议使用!!!
  • 补充:NaN===NaN判断结果为false。原因:NaN表示不是一个数字,所以它与任何数值都不相等,包括它自己。
  • 只能通过isNaN(数值)来判断这个数值是不是NaN。例如:isNaN(NaN) - 它的结果为true

浮点数问题

  • 和在 Java 中一样,我们在 JavaScript 中,也应该尽量避免直接使用浮点数进行运算(存在精度问题):
  • 例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        console.log((1/3)===(1-2/3));
    </script>

</head>
<body>

</body>
</html>
  • 打开浏览器控制台查看结果:

在这里插入图片描述

  • 那么在 JavaScript 中,我们该怎样对浮点数进行运算呢?
  • 由于 JavaScript 中并没有像 Java 中的 BigDecimal 一样的专门对浮点数进行运算的工具类,所以我们只能使用Math.abs()取两个数差的绝对值,与一个极小的浮点数(例如0.0000000001)进行比较,当差的绝对值小于这个极小的浮点数时,我们就可以近似地认为这两个浮点数相等,这样就可以进行浮点数的运算了。
  • 例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        console.log(Math.abs((1/3)-(1-2/3))<0.0000000001);
    </script>

</head>
<body>

</body>
</html>
  • 打开浏览器控制台查看结果:

在这里插入图片描述

null 和 undefined

null  // 空
undefined  // 未定义的

数组

  • 我们在 Java 中定义数组时,一个数组内只能存放相同类型的数据;而在 JavaScript 中则不需要这样,可以在一个数组中存放各种类型不相同的数据。
  • 例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        var arr = [1,2,3,4,"hello",null,true];
    </script>

</head>
<body>

</body>
</html>
  • 打开浏览器控制台,通过使用console.log(arr[数组的下标])打印数组中指定下标位置的数据:

在这里插入图片描述

  • 可以发现 JavaScript 中的数组和 Java 中的的数组一样,下标都是从 0 开始的。
  • 在 JavaScript 中,当我们打印数组中的数据时,如果我们取的数组下标越界了,也不会像 Java 中一样报异常,而是会返回 undefined(未定义的)。
  • 另外,除了上面的方式,JavaScript 中还有另一种方式定义数组:
  • 例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        new Array(1,2,3,4,"hello",null,true);
    </script>

</head>
<body>

</body>
</html>
  • 为了提高代码的可读性,我们通常建议使用第一种使用中括号[]的方式来定义数组。

对象

  • 定义数组用中括号[],定义对象用大括号{}
  • 每个属性之间使用逗号,隔开,最后一个属性则不需要添加。
  • 例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        var person = {
            name: "clown",
            age: 3,
            tags: ['java','javascript','python','c++']
        }
    </script>

</head>
<body>

</body>
</html>
  • 我们可以使用对象名.属性名来获取对象的值:

在这里插入图片描述

严格检查模式

  • 使用严格检查模式的前提:IDEA 需要设置支持 ES6 语法。

在这里插入图片描述

  • 通过使用"use strict" - 严格检查模式,可以预防因为 JavaScript 的随意性而产生的一些问题。
  • 例:
  • 因为 JavaScript 具有随意性,所以即使我们像下面这样不规范地定义变量程序也能运行,而不会报错:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>     
        i = 1;
    </script>
</head>
<body>

</body>
</html>
  • 可以看到 IDEA 预编译没有生成警告或错误提示信息:

在这里插入图片描述

  • 在浏览器控制台中使用console.log(i)也能获取到i的值:

在这里插入图片描述

  • 但这样定义的变量为全局变量,能被其他任何对象或函数引用,这样就会导致我们的程序存在隐患。
  • 所以,为了规范编码,预防因为 JavaScript 的随意性而产生的一些问题,我们可以使用严格检查模式("use strict"),它必须被写在 JavaScript 代码的第一行。
  • 我们给上面的代码中加上严格检查模式:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    前提:IDEA需要设置支持ES6语法
    "use strict" - 严格检查模式,预防因为JavaScript的随意性而产生的一些问题
    必须写在JavaScript代码的第一行!
    局部变量建议都使用let来定义~
    -->
    <script>
        "use strict";
        i = 1;
    </script>
</head>
<body>

</body>
</html>
  • 可以发现:在加上严格检查模式之后,IDEA 预编译帮我们生成了错误提示。

在这里插入图片描述

  • 在浏览器控制台中输入console.log(i)也无法获取i的值了,而是会报错:

在这里插入图片描述

  • 这就使得我们能提前发现我们的程序中不规范的编码,从而预防因为 JavaScript 的随意性而产生的一些问题。
  • 下面我们来看一下规范的代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    前提:IDEA需要设置支持ES6语法
    "use strict" - 严格检查模式,预防因为JavaScript的随意性而产生的一些问题
    必须写在JavaScript代码的第一行!
    局部变量建议都使用let来定义~
    -->
    <script>
        "use strict";
        let i = 1;
    </script>
</head>
<body>

</body>
</html>
  • 定义变量时,在变量i之前加上一个let,将它定义为局部变量,这样程序就不会出问题了。
  • 补充:深入理解JS:var、let、const的异同

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/977808.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AbstractQueuedSynchronizer--AQS

概述&#xff1a;全称是 AbstractQueuedSynchronizer&#xff0c;是阻塞式锁和相关的同步器工具的框架特点&#xff1a; 用 state 属性来表示资源的状态&#xff08;分独占模式和共享模式&#xff09;&#xff0c;子类需要定义如何维护这个状态&#xff0c;控制如何获取锁和释放…

第9篇:ESP32超声波HC-SR04Arduino类库编写

第1篇:Arduino与ESP32开发板的安装方法 第2篇:ESP32 helloworld第一个程序示范点亮板载LED 第3篇:vscode搭建esp32 arduino开发环境 第4篇:vscodeplatformio搭建esp32 arduino开发环境 第5篇:doit_esp32_devkit_v1使用pmw呼吸灯实验 第6篇:ESP32连接无源喇叭播放音乐《涛声…

从一到无穷大 #13 How does Lindorm TSDB solve the high cardinality problem?

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作)&#xff0c;由 李兆龙 确认&#xff0c;转载请注明版权。 文章目录 引言优势挑战系统架构细节/优化存储引擎索引写入查询 经验Ablation Study总结 引言 …

我的创作纪念日:一个特别的纪念日

一个特别的纪念日 机缘收获日常成就憧憬 &#x1f4a1;一个热爱分享高性能服务器后台开发知识的博主&#xff0c;目标是通过理论与代码实践的结合&#xff0c;让世界上看似难以掌握的技术变得易于理解与掌握。技能涵盖了多个领域&#xff0c;包括C/C、Linux、中间件、数据库、云…

【C++学习笔记】7、常量

文章目录 【 1、常量的分类 】1.1 整型常量1.2 浮点常量1.3 字符常量1.4 字符串常量1.5 布尔常量 【 2、常量的定义 】2.1 #define 预处理器2.2 const 关键字 常量 是固定值&#xff0c;在程序执行期间不会改变。这些固定的值&#xff0c;又叫做字面量。常量可以是任何的基本数…

网络安全合规-DSMM

DSMM&#xff08;Data Security Management Model&#xff09;是一种数据安全管理模型。该模型以数据为中心&#xff0c;从数据的生命周期入手&#xff0c;从数据发布、使用、共享、存储、删除等几个方面来管理数据安全。 DSMM提供了一些有效的数据安全管理原则和策略&#xf…

ArcGIS Engine10.2 Setup 报错

00 问题重述 当我尝试安装ArcGIS Engine时弹出错误&#xff1a;ArcGIs 10,2 Engine cannot be installed on your machine.ArcGIs 10,2 Engine requires Microsoft ,NET Framework 3.5sp1, Which has not been found on your system, If you want to download and install Mic…

Ubuntu18.04系统下通过moveit控制kinova真实机械臂,并用python脚本到达固定点

测试工作空间&#xff1a;test_ws Kinova机械臂型号&#xff1a;m1n6s300 双臂模型中的左臂 测试功能包为kinova-ros官方包 一、读取kinova机械臂末端执行器位姿及tf小知识 1. tf小知识之获取两个连杆坐标系的位姿关系&#xff0c;非常有用&#xff0c;非常有用&#xff0c;非…

Unity中Shader的变体shader_feature(青莲地心火 o.o )

文章目录 前言一、变体的类型1、multi_compile —— 无论如何都会被编译的变体2、shader_feature —— 通过材质的使用情况来决定是否编译的变体 二、使用 shader_feature 来控制 shader 效果的变化1、首先在属性面板暴露一个开关属性&#xff0c;用于配合shader_feature来控制…

Flask狼书笔记 | 05_数据库

文章目录 5 数据库5.1 数据库的分类5.2 ORM5.3 使用Flask_SQLAlchemy5.4 数据库操作5.5 定义关系5.6 更新数据库表5.7 数据库进阶小结 5 数据库 这一章学习如何在Python中使用DBMS&#xff08;数据库管理系统&#xff09;&#xff0c;来对数据库进行管理和操作。本书使用SQLit…

02JVM_垃圾回收GC

二、垃圾回收GC 在堆里面存放着java的所有对象实例&#xff0c;当对象为“死去”&#xff0c;也就是不再使用的对象&#xff0c;就会进行垃圾回收GC 1.如何判断对象可以回收 1.1引用计数器 介绍 在对象中添加一个引用计数器&#xff0c;当一个对象被其他变量引用时这个对象…

软件架构之前后端分离架构服务器端高并发演进之路

软件架构之前后端分离架构&服务器端高并发演进之路 前后端分离架构服务器端关于不同并发量的演进之路1. 单体架构2. 第一次演进&#xff1a;应用服务器和数据库服务器分开部署3. 第二次演进&#xff1a;引入本地缓存和分部署缓存4. 第三次演进&#xff1a;引入反向代理和负…

SQL语句如何生成PDM文件

首先我们先了解一下什么是PDM 物理数据模型&#xff08;PDM&#xff09;是数据库设计和管理过程中的重要组成部分&#xff0c;具有以下好处&#xff1a; 可视化数据库结构&#xff1a; PDM提供了一个直观的方式来可视化数据库的结构&#xff0c;包括表、列、索引、关系等。这使…

数据结构与算法学习(day4)——解决实际问题

前言 在本章的学习此前&#xff0c;需要复习前三章的内容&#xff0c;每个算法都动手敲一遍解题。宁愿学慢一点&#xff0c;也要对每个算法掌握基本的理解&#xff01; 前面我们学习了简化版桶排序、冒泡排序和快速排序三种算法&#xff0c;今天我们来实践一下前面的三种算法。…

QT连接OpenCV库完成人脸识别

1.相关的配置 1> 该项目所用环境&#xff1a;qt-opensource-windows-x86-mingw491_opengl-5.4.0 2> 配置opencv库路径&#xff1a; 1、在D盘下创建一个opencv的文件夹&#xff0c;用于存放所需材料 2、在opencv的文件夹下创建一个名为&#xff1a;opencv3.4-qt-intall 文…

Android Glide in RecyclerView,only load visible item when page return,Kotlin

Android Glide in RecyclerView&#xff0c;only load visible item when page return&#xff0c;Kotlin base on this article&#xff1a; Android Glide preload RecyclerView切入后台不可见再切换可见只加载当前视野可见区域item图片&#xff0c;Kotlin_zhangphil的博客…

L1和L2正则

L1和L2正则 L1正则常被用来进行特征选择&#xff0c;主要原因在于L1正则化会使得较多的参数为0&#xff0c;从而产生稀疏解&#xff0c;我们可以将0对应的特征遗弃&#xff0c;进而用来选择特征。一定程度上L1正则也可以防止模型过拟合。 L2正则&#xff1a; L1损失函数相比于…

口袋参谋:淘宝卖家如何对订单实现批量标旗?

​插旗在淘宝店铺里是经常能使用到的&#xff0c;如果淘宝卖家订单量太大&#xff0c;一个一个的标旗太过于繁琐&#xff0c;而且容易出错。 那么使用批量插旗工具&#xff0c;则可以大大节省卖家时间&#xff0c;提高工作效率&#xff01; 【批量插旗】功能&#xff1a; 一键…

基于blockqueue的生产和消费模型

线程篇下讲的是基于阻塞队列的生产者消费者模型。在学习这个之前我们先了解一些其他概念&#xff1a; 同步&#xff1a;在保证数据安全的条件下&#xff0c;让线程按某种特定的顺序依次访问临界资源。 通过上一节的代码我们实现了一个多线程抢票的程序&#xff0c;但结果显示…

Pytorch学习:卷积神经网络—nn.Conv2d、nn.MaxPool2d、nn.ReLU、nn.Linear和nn.Dropout

文章目录 1. torch.nn.Conv2d2. torch.nn.MaxPool2d3. torch.nn.ReLU4. torch.nn.Linear5. torch.nn.Dropout 卷积神经网络详解&#xff1a;csdn链接 其中包括对卷积操作中卷积核的计算、填充、步幅以及最大值池化的操作。 1. torch.nn.Conv2d 对由多个输入平面组成的输入信号…