草庐IT

JavaScript基本知识点——带你逐步解开JS的神秘面纱

qiuluoyuweiliang 2023-03-28 原文

JavaScript基本知识点——带你逐步解开JS的神秘面纱

在我们前面的文章中已经深入学了HTML和CSS，在网页设计中我们已经有能力完成一个美观的网页框架

但仅仅是网页框架不足以展现出网页的魅力，JS由此而生！

JavaScript概述

JavaScript是一门弱类型脚本语言，其源代码在发往客户端运行之前不需要进行翻译，而是将文本格式的字符代码发送给浏览器由浏览器进行解释编译。

ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言，算是目前JS的一个标准。

目前我们所使用的JS版本一般是ES6，但网页的通用版本一般为ES5。

JavaScript书写位置

既然谈到JavaScript，首先谈及它的作用

  • JavaScript是为HTML而服务的，所以JavaScript的书写也同CSS一样可以在HTML代码中编写

我们来介绍JavaScript的两种书写方法：

  • 内部标签：

​ 在HTML的任意位置（注意不要超出HTML控制范围）都可以采用script成对标签来书写JS代码

  • 外部引入：

​ 在HTML的head部分，采用script成对标签来引入外部JS文件代码

我们下面给出示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我们的第一个JavaScript代码</title>

    <!-- JS和CSS一样分为内部标签和外部引入 -->

    <!-- 内部引入采用script成对标签 -->
    <script>
        // JS中的注释是//
        // 这里alert的意思是输出，我们后面会有介绍
        alert("HelloWorld!");
    </script>

    <!-- 外部引入也是采用script成对标签，但里面需要写src=“JS文件地址” -->
    <script src="js.js"></script>

</head>
<body>
    <!-- 我们的html中不需要书写东西也可以使用JS -->


    <!-- 注意，JS代码也可以写在body里面，只要不写在/html外都可以生效 -->
</body>
</html>

JavaScript浏览器控制调试

我们的JavaScript虽然在HTML中书写，但一般情况下我们无法在HTML文件中检查到错误

所以我们一般在HTML文件打开的网站中进行JavaScript的调试和错误修改以及提醒

下面我以图片形式展示JavaScript的浏览器控制调试顺序：

我们在控制台中进行JavaScript代码的调试，也可以在源代码中选择断点来进行错误检测

JavaScript须知

在介绍JavaScript的其他内容之前我需要先把一些基本内容告诉你们：

  • JavaScript的所有数据类型都由var和let定义
    • var 全局变量
    • let 局部变量
  • JavaScript的输出方法：
    • alert（） 打开页面将会弹出的内容
    • console.log() 在控制台输出的内容
  • JavaScript严格检查模式（ES6专属）：
    • 在之间的第一行加上"use strict"
    • 进入严格检查模式后，你的部分不规整代码将会被检测，但错误无法完全检测

JavaScript数据类型

JavaScript是一种面向对象的编程语言，所以在JavaScript与HTML和CSS不同，我们可以在JavaScript中定义数据变量来协助我们书写代码

下面我先为大家介绍JavaScript的基本数据类型（与Java相似但有所不同，下面我只为JS特有类型做出标注）：

数字类型

数字类型包括有：

  • 1 整数
  • 1.1 小数
  • 1.123e3 科学计数法
  • NaN 非数字类型
  • Infinity 无穷

字符串

与Java一样采用“ ”来定义：

  • “HelloWorld”

布尔值

布尔值分为两种：

  • true
  • false

逻辑运算符

逻辑运算符分为三种：

  • &&
  • ||
  • ！

比较符

JavaScript的比较符相对特殊：

  • = 表示赋值
  • == 表示等于（类型不一样，但数值一样就可以判定为true）
  • === 表示绝对等于（只有当类型和数值都一样时才可以判定为false）

在这里我想特别强调一下NaN和浮点数问题：

  • NaN无法通过===进行比较
    • NaN === NaN 的运算结果为false
    • isNaN（NaN）才可以得出NaN的判定结果
  • 浮点数计算无法通过===进行比较
    • 1/3 === （1-2/3） 的运算结果为false
    • 我们通常通过 Math.abs(1/3 - (1-2/3) < 0.000001)来判断浮点数是否相同

特殊类型

JavaScript存在两种特殊类型：

  • null 空
  • underfined 未定义

数组

JavaScript的数组可以存在有不同基本类型的数据

定义格式：

  • var arr = [...,...,...];

定义例子：

  • var arr = [1,2,3,"Hello"，true];

输出方法：

  • arr[0]

注意：当打印越界时，不会报错，但打印结果为underfined

对象

JavaScript的对象类似于键值对的存在方式

定义格式：

  • var person = {

    ​ name：“侯佳磊”，

    ​ age：18，

    ​ tags：["Java","HTML","CSS"]

    }

对象之间的数据用逗号隔开，最后一个不用

调用方法：

  • person.name

JavaScript字符串详解

我们首先对字符串进行详细介绍：

  1. 字符串的定义通常采用“”或者''都可以

  2. 注意转义字符：

    格式 说明
    \ + 特殊意义字符 在控制台输出该字符
    \n 换行符
    \t 水平制表符
    \u + 四位数 Unicode字符
    \x + 两位数 Ascll字符

  3. 多行字符串：采用``来隔行书写字符串

  4. 模板字符串：我们可以采用${字符串}来直接带入字符串

let name = "侯佳磊";
let age = 18;
let msg = `你好啊，${name}`;
  1. 字符串具有不可变性
  2. 字符串属性和方法：
方法名 说明
str.length 字符串长度
str.toUpperCase() 字符串字母变大写
str.toLowerCase() 字符串字母变小写
str.indexOf('~') 字符串查找“~”的下标
str.subString(n) 返回一个从n到最后的字符串
str.subString(n,m) 返回一个字符串（n，m]的字符串

JavaScript数组详解

JavaScript中数组可以结合各种类型的数值

JavaScript中数组可以结合各种类型的数值

  1. 定义格式：
    • var arr = [1，2，3，4]；
  2. 数组长度：
    • arr.length
    • 注意：可以为数组的length赋值
    • 当length赋值变大，后面的值默认为empty
    • 当length赋值变小，前面的值将会被删除
  3. 可以通过下标进行取值和赋值
  4. 数组的属性和方法：
方法名 说明
indexOf() 返回该数组中元素下标索引（注意数字1和字符串“1”不同）
slice(n) 截取一部分，返回一个数组(截取第n位之后的所有元素组成数组)
push（） 把值在尾部输入
pop（） 把最后一个值从尾部弹出
unshift（） 把值在头部输入
shift（） 把第一个值从头部弹出
sort（） 排序方法
reverse（） 反转方法
concat（） 拼接方法（不会改变原数组，会返回一个新数组）
join（“~”） 用~连接各个元素并返回一个字符串
  1. 多维数组：
  • 定义格式：[[],[],[]]
  • 例子：var nums = [[1,2],[2,3],[3,4]];

JavaScript对象详解

JavaScript的相关知识点：

  1. 定义格式：
var 对象名 = {
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}
  1. 对象的键是字符串，值是任意对象
  2. 对象赋值：
    • 对象.属性 = 属性值
  3. 当使用一个不存在的属性时，不会报错，但会报出underfined
  4. 动态删除属性：
    • delete 对象.属性
  5. 动态增加属性：
    • 对象.属性 = 属性值
  6. 判断属性值是否在对象中：
    • “键名” in 对象
    • 例如："name" in person
  7. 判断属性是否是对象自身拥有的：
    • 对象.hasOwnProperty(“键名”)

流程控制

JavaScript的流程控制和Java相差不大

  1. if判断与Java完全相同
  2. while循环与Java完全相同
  3. for原版循环与Java完全相同

下面我们介绍三种新的for循环：

  1. forEach（）循环
var age = [12,3,12,3,12,3,123,23];

//主要采用函数,注意：最外围是（），里面包括函数
age.forEach(function(value){
            console.log(value)
            })
  1. forin循环
//注意：这里的num是下标值
for(var num in age){
    console.log(arr[num])
}
  1. forof循环
//注意：这里的num是元素值
for(var num of age){
    console.log(num)
}

Map和Set详解（ES6新增特性）

Map详解：

  • 定义格式：
    • var map = new Map([[ , ],[ , ],[ , ]]);
    • 注意：这里是有Map的（），然后里面有一个[]表示map，然后再有多个[]表示多个键值对
    • 例如： var map = new Map([["侯佳磊",18],["胡桃",18]]);
  • 获得Map值：
    • map.get(键名); 通过键获得值
  • 新添Map键值对：
    • map.set( , );
  • 删除Map键值对：
    • map.delete( , );

Set详解：

  • 定义格式：
    • var set = new Set([ , , ,]);
    • 注意：这里同样有Set的（），然后里面有一个[]表示set
    • 例如：var set = new Set([1,2,3]);
  • 判断是否包含某个值：
    • set.has(value);
  • 新添set值：
    • set.add(value);
  • 删除set值：
    • set.delete(value);

Map和Set均通过for方法实现遍历：

        var map = new Map([["侯佳磊",18],["胡桃",18]]);

        for(let value of map){
            console.log(value[0]);
            console.log(value[1]);
            console.log(value)
        }

        var set = new Set([1,2,3,3,4]);

        for(let value of set){
            console.log(value)
        }

结束语

好的，关于JavaScript的基本知识点我们就讲到这里，下节课我们将会学习JavaScript函数和常用对象

mdash知识点liJavaScripttd

有关JavaScript基本知识点——带你逐步解开JS的神秘面纱的更多相关文章

  1. Unity 热更新技术 | （三） Lua语言基本介绍及下载安装 - 2

    ?博客主页：https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创，首发于CSDN??学习专栏推荐：Unity系统学习专栏?游戏制作专栏推荐：游戏制作?Unity实战100例专栏推荐：Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正！?未来很长，值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  3. ruby-on-rails - 使用 HTTParty 的非常基本的 Rails 4.1 API 调用 - 2

    Rails相对较新。我正在尝试调用一个API，它应该向我返回一个唯一的URL。我的应用程序中捆绑了HTTParty。我已经创建了一个UniqueNumberController，并且我已经阅读了几个HTTParty指南，直到我想要什么，但也许我只是有点迷路，真的不知道该怎么做。基本上，我需要做的就是调用API，获取它返回的URL，然后将该URL插入到用户的数据库中。谁能给我指出正确的方向或与我分享一些代码？ 最佳答案 假设API为JSON格式并返回如下数据:{"url":"http://example.com/unique-url"

  4. ruby - Ruby 是否有类似于 Perl 的 "perl -d"的逐步调试器？ - 2

    Ruby是否有逐步调试器，类似于Perl的“perl-d”？ 最佳答案 ruby-debug(对于ruby1.8)，debugger(对于ruby1.9)，byebug(对于ruby​​2.0)以及trepanning系列都有一个-x或--trace选项。在调试器内部，命令setlinetrace将打开或关闭线路跟踪。这是themanualforruby-debug原来的答案已经修改，因为数据噪声文章的链接，唉，不再有效了。还添加了ruby​​-debug的后继者 关于ruby-Ruby

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby-on-rails - Rails 基本 Base64 身份验证 - 2

    我正在尝试复制此GETcurl请求:curl-D--XGET-H"Authorization:BasicdGVzdEB0YXByZXNlYXJjaC5jb206NGMzMTg2Mjg4YWUyM2ZkOTY2MWNiNWRmY2NlMTkzMGU="-H"Content-Type:application/json"http://staging.example.com/api/v1/campaigns在Ruby中，通过电子邮件+apikey生成身份验证:auth="Basic"+Base64::encode64("test@example.com:4c3186288ae23fd9661c

  7. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  8. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  9. ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby，这是我的第一门编程语言。我对语法感到满意，并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法，在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明)，但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法？

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐