JavaScript

已于 2022-07-04 18:42:48 修改
阅读量143 收藏
点赞数 1
分类专栏： 学习javascript 文章标签： javascript 前端 html
于 2022-06-19 20:16:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_59281909/article/details/125358857
版权

初学JavaScript

JavaScript的定义

JavaScript 是属于 HTML 和 Web 的编程语言，JavaScript 能够改变 HTML 内容 getElementById() 是多个 JavaScript HTML 方法之一，JavaScript 很容易学习。

一 javascript的简单使用

1.1 语法

JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构。JavaScript 语句定义两种类型的值：混合值和变量值。混合值被称为字面量而变量值被称为变量。
书写格式如下：

var x, y;	// 如何声明变量
x = 7; y = 8;	// 如何赋值
z = x + y;	// 如何计算值

在编程语言中，变量用于存储数据值。JavaScript 使用 var 关键词来声明变量，= 号用于为变量赋值。

1.2 输出形式

JavaScript 能够以不同方式“显示”数据：

  1. 使用 window.alert() 写入警告框。
  2. 使用 document.write() 写入 HTML 输出。
  3. 使用 innerHTML 写入 HTML 元素。
  4. 使用 console.log() 写入浏览器控制台。
1.2.1 使用 innerHTML

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。

<h1>Web 页面的元素插入</h1>
<p id="demo">我的第一个段落是否修改</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>

如图所示
在这里插入图片描述

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：
我们可以看出可以通过Id更改插入标签中的内容。

1.2.2 window.alert()

<!DOCTYPE html>

<html>
<body>

<h2>我的网页</h2>
<p>第一个段落。</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

在这里插入图片描述

1.3 javascript的关键词

关键字有：break、do、instanceof、typeof、case、else、new、var、catch、finally、return、void、continue、for、switch、while、if、try、this、with等。
在这里插入图片描述

1.3.1 let 关键字

使用 var 关键字重新声明变量会带来问题。在块中重新声明变量也将重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

使用 let 关键字重新声明变量可以解决这个问题。在块中重新声明变量不会重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

可以发现使用let相当于一个局部变量，外面无法访问作用域的内容。

1.4 JavaScript 数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：

var length = 7;                             // 数字
var lastName = "a";                      // 字符串
var cars = ["a", "b", "c"];         // 数组
var x = {firstName:"a", lastName:"b"};    // 对象

注意！！！
当数值和字符串相加时，JavaScript 将把数值视作字符串。

注意va c=1+1+"wxm"//2wxm，是一个字符串
var c2=wxm+1+1//wxm11，这是两种不同的结果，先遇到谁就是谁

二 基本函数的诞生

JavaScript 函数是被设计为执行特定任务的代码块，JavaScript 函数会在某代码调用它时被执行。

2.1 函数的语法

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。圆括号可包括由逗号分隔的参数：

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

2.2 函数的调用

函数中的代码将在其他代码调用该函数时执行：

  1. 当事件发生时（比如当用户点击按钮时）
  2. 当 JavaScript 代码调用时
  3. 自调用

2.3 函数是对象方法

fullName 属性是一个方法。person 对象是该方法的拥有者。fullName 属性属于 person 对象的方法。

var person = {
    firstName:"王",
    lastName: "小明",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
person.fullName();		// 将返回 "王 小明"

2.4 JavaScript call() 方法

call() 方法是预定义的 JavaScript 方法,它可以用来调用所有者对象作为参数的方法。通过 call()，您能够使用属于另一个对象的方法。
本例调用 person 的 fullName 方法，并用于 person1：

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"a",
    lastName: "b",
}
var person2 = {
    firstName:"c",
    lastName: "d",
}
person.fullName.call(person1);  // 将返回 "a b"

2.5 JavaScript apply() 方法

apply() 方法与 call() 方法非常相似：
在本例中，person 的 fullName 方法被应用到 person1：

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "a",
    lastName: "b",
}
person.fullName.apply(person1);  // 将返回 "a b"

2.6 call() 和 apply() 之间的区别

call() 方法分别接受参数而apply() 方法接受数组形式的参数。如果要使用数组而不是参数列表，则 apply() 方法非常方便。

三 数组及其函数

JavaScript 数组可以用于在单一变量中存储多个值。

3.1 创建数组

var array-name = [a, b, …];

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

3.2 使用数组

我们通过引用索引号（下标号）来引用某个数组元素，这条语句访问 cars 中的首个元素的值：

var name = cars[0];//访问首元素
cars[0] = "Opel";//修改首元素

3.3 把数组转换为字符串

JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。

<h1>tostring</h1>
<p id="demo">我的第一个段落是否修改</p>
<script>
    var cars = [
    "S",
    "V",
    "B"
];
document.getElementById("demo").innerHTML=cars.toString();
</script>

在这里插入图片描述

3.4 把字符串转换为数组

可以通过 split() 将字符串转换为数组：

var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔

如果分隔符是 “”，被返回的数组将是间隔单个字符的数组：

<h1>把字符串转换为数组</h1>
<p id="demo">我的第一个段落是否修改</p>
<script>
   
var str="王小明666"
document.getElementById("demo").innerHTML=str.split("");
</script>

在这里插入图片描述

3.5 查找字符串中的字符串

indexOf() 方法返回字符串中指定文本首次出现的索引（位置）,如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

 <h1>把字符串转换为数组</h1>
    <p id="demo">我的第一个段落是否修改</p>
    <p id="demo1">我的第一个段落是否修改</p>
    <script>

        var str = "王小明666abcd"
        // 找到a何e
        document.getElementById("demo").innerHTML = str.indexOf("a");
        document.getElementById("demo1").innerHTML = str.indexOf("e");
    </script>

在这里插入图片描述

JavaScript 从零计算位置。0 是字符串中的第一个位置，1 是第二个，2 是第三个 …
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引。

四 日期的使用

4.1 JavaScript 日期输出

 <h1>日期的输出</h1>
    <p id="demo">中国标准日期输出</p>
    <script>

        var str =new Date();
        // 使用new date
        document.getElementById("demo").innerHTML = str;
    </script>

在这里插入图片描述

4.2 创建 Date 对象

4.2.1 日期对象的定义格式

  1. new Date()
  2. new Date(year, month, day, hours, minutes, seconds, milliseconds)
  3. new Date(milliseconds)
  4. new Date(date string)

4.3 JavaScript 日期格式

在这里插入图片描述

4.4 JavaScript ISO 日期

SO 8601 是表现日期和时间的国际标准。

ISO 8601 语法 (YYYY-MM-DD) 也是首选的 JavaScript 日期格式：

var d = new Date("2018-02-19");
警告
在某些浏览器中，不带前导零的月或其会产生错误：

4.5 JavaScript 日期获取方法

4.6 日期设置方法

设置方法用于设置日期的某个部分。下面是最常用的方法（按照字母顺序排序）：
在这里插入图片描述

五 JavaScript 箭头函数

5.1 语法格式

hello = () => {
  return "Hello World!";
}

如果只有一个参数则可以更短

hello = () => "Hello World!";

5.2 this

与常规函数相比，箭头函数对 this 的处理也有所不同，简而言之，使用箭头函数没有对 this 的绑定。

（1）对于常规函数，this 表示调用该函数的对象：
// 常规函数：
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

// window 对象调用该函数：
window.addEventListener("load", hello);

// button 对象调用该函数：
document.getElementById("btn").addEventListener("click", hello);

结果显示第一个例子返回两个不同的对象（window 和 button）
（2）箭头函数：

// 箭头函数：
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

// window 对象调用该函数：
window.addEventListener("load", hello);

// button 对象调用该函数：
document.getElementById("btn").addEventListener("click", hello);

第二个例子返回两次 window 对象，因为 window 对象是函数的“所有者”。

六 JavaScript 类

6.1 创建语法

请使用关键字 class 创建类，请始终添加名为 constructor() 的方法：

class ClassName {
  constructor() { ... }
}

6.2 使用类创建对象

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

6.3 Constructor 方法

构造方法是一种特殊的方法：

  1. 它必须拥有确切名称的“构造函数”
  2. 创建新对象时自动执行
  3. 用于初始化对象属性
  4. 如果未定义构造函数方法，JavaScript 会添加空的构造函数方法。

七 JSON

7.1 JSON的定义

  1. JSON 指的是 JavaScript Object Notation
  2. JSON 是轻量级的数据交换格式
  3. JSON 独立于语言 *
  4. JSON 是“自描述的”且易于理解

7.2 语法规则

  1. 数据是名称/值对
  2. 数据由逗号分隔
  3. 花括号保存对象
  4. 方括号保存数组
  5. JSON 名称需要双引号。JavaScript 名称不需要。

7.3 JSON 实例

SON 语法定义了一个雇员对象：包含三条员工记录的数组（对象）：

{
"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"},
    {"firstName":"Alan", "lastName":"Turing"}
]
}

7.4 JSON 文本转换为 JavaScript 对象

使用 JavaScript 的内建函数 JSON.parse() 来把这个字符串转换为 JavaScript 对象：

 <h1>输出</h1>
    <p id="demo">转换</p>
    <script>
        var text = '{"name":"wxm","age":20}';
        obj = JSON.parse(text);
        document.getElementById("demo").innerHTML = text;
    </script>

在这里插入图片描述

7.5 JavaScript转为JSON

调用stringify()将一个JS对象转换为JSON

 <h1>输出</h1>
    <p id="demo">转换</p>
    <script>
        var test = { name: "王小明", age: 21 };//定义一个JS对象
        var json = JSON.stringify(test);//调用stringify()将一个JS对象转换为JSON
        console.log(json);//输出：{"name":"王小明","age":21}
        document.getElementById("demo").innerHTML = json;
    </script>

在这里插入图片描述

八 撒花完结！

javaScript简介
weixin_69252724的博客
04-16 4173
它是一种直译式的语言, 用来为网页添加各种各样的动态功能不需要编译直接通过浏览器直接运行, 通常javaScript脚本是通过嵌入HTML里来实现功能的。
19 JavaScript学习：调试
百锦再的博客
04-28 8万+
使用控制台：在浏览器的开发工中的控台输入代码实时查看的函数等信息，帮调试程序4. 使用调试工具一些开环境（）或者浏览器插件提供了专门的调试工具，如Chrome DevTools、Firefox Developer Tools等，可以更，开发者可以发的错误，并及时修复，代码质量和开发效率。使用断点：在浏览器的开发者工具中设置断点，当程序执行到断点处时暂停执行，开发者可以查看当前变量的值、调用栈等信息，帮助定位问题。关键字可以手动触发断点，不需要依赖开发者工具中的设置断点功能，方便在代码中灵活地进行调试。
javaScript
xl2655894520的博客
01-25 2729
web学习
22 JavaScript学习：表单验证
热门推荐
百锦再的博客
04-30 9万+
JavaScript 表单验证是一种常用的前端技术，可以通过编写 JavaScript 脚本来对用户在表单中输入的数据进行验证，确保其格式和内容符合要求。但需要注意，前端验证只能作为一种辅助手段，真正的数据验证应该在后端进行，以确保数据的安全性和可靠性。其原理是在用户提交表单时，触发 JavaScript 函数进行对用户输入数据的验证，以确保其格式和内容符合预期。HTML5引入了一些新的表单输入类型和属性，可以在不编写JavaScript的情况下自动验证用户输入。最好根据具体需求和业务场景进行调整和优化。
javascript基础
全栈攻城狮JSON的博客
05-30 2410
目录 一、概述 1、概念 2、作用 二、用法 1、html页面中的javascript 2、外部的javascript 3、标签中的javascript 4、javascript显示数据 5、javascirpt注释 三、javascript基本语法 1、javascript变量 2、javascript的语句 3、javascript数据类型 3.1 值类型 3.2 引用数据类型 3.3 javascript拥有动态类型 4、javascript中运算符 四、javas
JavaScript实战 - 使用JavaScript解析CSV文件
逍遥Sean的博客
07-31 2466
CSV文件是一种简单的文本文件格式，其中数据以逗号分隔，每行代表一个数据记录，字段之间用逗号或其他分隔符（如分号、制表符等）分隔。使用原生JavaScript可以简单地解析小型CSV文件，适合基本需求和轻量级应用。对于复杂的CSV文件处理，建议使用成熟的CSV解析库，以便处理大量数据、复杂结构或特定的CSV格式要求。在处理CSV文件时，要注意处理特殊字符、转义字符以及不同操作系统下的换行符问题，以保证数据的准确性和完整性。
JavaScript（一）
zzh的博客
01-15 1551
目录介绍JavaScript的功能JavaScript 组成ECMAScriptDOM文档对象模型BOM浏览器对象模型JS的引用< head > 或 < body > 中的 JavaScript外部脚本外部文件：myScript.js外部 JavaScript 的优势JS输出使用 innerHTML使用 document.write()使用 window.alert()使用 console.log()JS语句语法JavaScript变量JavaScript Let全局作用域函数作用域
JavaScript总结
adorable_的博客
03-31 1170
文章目录一、JavaScript简介二、JavaScript用法1、嵌入HTML2、外部的JavaScript脚本3、Console窗口调试JavaScript代码4、Chrome snippets小脚本5、事件触发三、JavaScript变量1、声明变量2、数据类型3、算术运算符4、赋值运算符5、比较运算符6、逻辑运算符四、基本语法1、条件语句1.1 if 语句1.2 if...else 语句1.3 if...else if....else 语句1.4 switch 语句1.5 三目运算2、循环语句2.1
JavaScript入门
weixin_45684846的博客
04-22 965
JavaScript入门 JavaScript引入方式——嵌入式 JavaScript引入方式——外链式 相比嵌入式，外链式的优势可以总结为以下3点： ① 嵌入式会导致HTML与JavaScript代码混合在一起，不利用修改和维护。 ② 嵌入式会增加HTML文件的体积，影响网页本身的加载速度，而外链式可以利用浏览器缓存提高速度。 ③ 外链式有利于分布式部署。网页中链接的js、cs...
基于Javascript的个人博客网站设计源码
03-29
这是一个基于Javascript的个人博客网站设计，使用Javascript和CSS语言开发，包含217个文件。主要文件类型包括106个Pug模板文件、45个Stylus样式文件、31个JavaScript文件、15个YAML配置文件、6个Markdown文档、5个...
HTML+CSS+Javascript详细手册大全 含9个chm文档资料合集
04-17
3- JavaScript参考手册.chm 4- JavaScript参考手册中文版.chm 5- Javascript高级教程.CHM 6- JavaScript使用手册.chm 7- 网页制作完全手册.chm 8- 样式表滤镜中文手册.CHM 9- 样式表中文手册2.0.CHM
Custom-JavaScript-for-Websites-2：在任何网站上运行自定义JavaScript
01-30
网站的自定义JavaScript 在任何网站上运行自定义JavaScript。 使用此工具可以在任何网站中注入自定义JavaScript。 您的脚本保存在本地存储中，并跨域URL应用。 您可以使用jQuery 1.11.x或2.1.x或您自己的外部脚本...
jsplayground:JavaScript 游乐场
07-13
JavaScript 游乐场 (JSPG) 用于玩 JavaScript 的模拟控制台 这个项目是一种使用 JavaScript 的愚蠢方式。 基本前提是，这是一个容器项目，您可以在其中编写小的 Javascript 片段并使用底层的 liveedit 功能查看结果...
计算机结构与解释javascript版(带书签)
08-13
计算机结构与解释javascript版(带书签)
Bootstrap法进行随机模拟
最新发布
所念皆星河
05-28 240
本研究对26名神经功能受损儿童的空间知觉测试数据进行了分析。问题一采用Bootstrap方法计算A组与B组得分的皮尔逊相关系数，得到点估计0.821，95%置信区间为[0.662,0.913]。问题二以B组为因变量、A组为自变量建立一元线性回归模型，回归系数a的Bootstrap点估计为0.656，95%置信区间[0.49,0.847]，假设检验p值接近0，表明回归系数显著不为零。分析结果表明两组测试得分存在显著相关性和线性关系。
Web前端开发（JS的快速入门）
2401_88455976的博客
05-24 1392
元素的底部，可改善显示速度外部的JS文件中，只包含JS代码，不包含<script>标签<script>标签不能自闭合<head><title>JS引入方式</title>-- 内部脚本 -->-- 外部脚本 --></head><body>
[特殊字符]使用 Hyperlane 实现 WebSocket广播
m0_52796585的博客
05-27 798
## 推荐几款学习编程的免费平台 ### 免费在线开发平台（[https://docs.ltpp.vip/LTPP/](https://docs.ltpp.vip/LTPP/)） <blockquote> <p>        探索编程世界的新天地，为学生和开发者精心打造的编程平台，现已盛大开启！这个平台汇集了近4000道精心设计的编程题目，覆盖了C、C++、JavaScript、TypeScript、Go、Rust、PHP、Java、Ruby
基于yjs实现协同编辑页面
qq_15509267的博客
05-26 949
协同编辑已成为现代Web应用的核心功能之一，它允许多用户实时协作，共同修改同一份文档或数据。然而，实现这一功能往往涉及复杂的冲突解决、状态同步和实时通信问题。Yjs作为一款高效的开源协同编辑框架，为开发者提供了简洁而强大的解决方案。它基于CRDT（无冲突复制数据类型）技术，确保数据一致性，同时支持与主流前端框架无缝集成。本文将介绍如何利用Yjs快速构建一个协同编辑页面，涵盖从基础原理到实际实现的完整流程。无论你是初次接触协同技术，还是希望优化现有系统，本文都能提供清晰的指引和实用的代码示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值