JavaScript 入门(1)

news2024/11/25 3:51:03

script 标签

  • <scrtipt> 标签可以插入到HTML中的任何位置
  • 在很老的代码中需使用type属性,但是现在的代码中不需要
  <script type="text/javascript"><!-- ... //--></script>

外部脚本

通过src 属性将脚本添加到HTML中

<script src="/path/to/script.js"></script>

如果设置了src属性,script标签中的内容将会被忽略

<script _src_="file.js"> alert(1); // 此内容会被忽略,因为设定了 src </script>

为了让上面的例子工作,我们可以将它分成两个 <script> 标签。

<script src="file.js"></script> <script> alert(1); </script>

代码结构

语句

当存在换行符的时候可以省略分号,也被称为自动分号插入,建议不要省略分号

alert('Hello'); alert('World');

alert('Hello') 
alert('World')

现代模式,“use strict”

为了保证旧的功能能够使用,大部分的修改是默认不生效的。你需要一个特殊的指令 —— "use strict" 来明确地激活这些特性。

"use strict"; 
// 代码以现代模式工作 
...

确保“use strict”出现脚本顶部
没有办法取消 use strict

  • class 和 module 都会自动启用 usr strict,无需再添加指令

变量

使用 let 定义和声明变量

let message = 'Hello!';
alert(message); // Hello!
let user = 'John', age = 25, message = 'Hello';

老的代码中使用 var

未采用user strict时变量定义

// 注意:这个例子中没有 "use strict"
num = 5;
// 如果变量 "num" 不存在,就会被创建 
alert(num); // 5
"use strict"; 
num = 5; // 错误:num 未定义_

常量

const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // 错误,不能对常量重新赋值

数据类型

动态类型

虽然编程语言中有不同的数据类型,但是你定义的变量并不会在定义后,被限制为某一数据类型

// 没有错误 
let message = "hello"; 
message = 123456;

Number 类型

  • Infinity 无穷大,有两种方式来得到它
// 除0
alert( 1 / 0 ); // Infinity

alert( Infinity ); // Infinity
  • NaN 代表一个计算错误

BigInt类型

± ( 2 53 − 1 ) ±(2^{53}-1) ±(2531) 范围就足够了,但有时候我们需要整个范围非常大的整数,例如用于密码学或微秒精度的时间戳。
可以通过将 n 附加到整数字段的末尾来创建 BigInt 值。

// 尾部的 "n" 表示这是一个 BigInt 类型 
const bigInt = 1234567890123456789012345678901234567890n;

String类型

let str = "Hello"; 
let str2 = 'Single quotes are ok too'; 
let phrase = `can embed another ${str}`;
  • 反引号是 功能扩展 引号。它们允许我们通过将变量和表达式包装在 ${…} 中,来将它们嵌入到字符串中。

  • 需要注意的是,这仅仅在反引号内有效,其他引号不允许这种嵌入。

Boolean 类型

null

undefined

typeof 运算符

对 typeof x 的调用会以字符串的形式返回数据类型:

typeof undefined // "undefined" 
typeof 0 // "number" 
typeof 10n // "bigint" 
typeof true // "boolean" 
typeof "foo" // "string" 
typeof Symbol("id") // "symbol" _
typeof Math // "object" (1)_ _
typeof null // "object" (2)_ _
typeof alert // "function" (3)_

type(x)type x 相同。
简单点说:typeof 是一个操作符,不是一个函数。这里的括号不是 typeof 的一部分。它是数学运算分组的括号。

交互

alert

它会显示一条信息,并等待用户按下 “OK”。

alert("Hello");

prompt

prompt 函数接收两个参数

result = prompt(title, [default]);
  • title 显示给用户的文本
  • default 是输入框的初始文本,可省
  • 输入框,点确定,将输入的内容返回给result
  • 点取消,返回null

![[Pasted image 20230430011020.png]]

![[Pasted image 20230430011031.png]]

confirm

result = confirm(question);

confirm 函数显示一个带有 question 以及确定和取消两个按钮的模态窗口。

点击确定返回 true,点击取消返回 false

类型转换

字符串转换

String(value)

数字类型转换

  • 在算术函数和表达式中,会自动进行 number 类型转换。
alert( "6" / "2" ); // 3, string 类型的值被自动转换成 number 类型后进行计算
  • 使用Number(value)
let str = "123"; 
alert(typeof str); // string 
let num = Number(str); // 变成 number 类型 123 
alert(typeof num); // number

Bool

转换发生在进行逻辑操作时,也可以通过 Boolean(value) 进行显式转换

alert( Boolean(1) ); // true 
alert( Boolean(0) ); // false 
alert( Boolean("hello") ); // true 
alert( Boolean("") ); // false

alert( Boolean("0") ); // true 
alert( Boolean(" ") ); // 空格,也是 true(任何非空字符串都是 true)

包含 0 的字符串 "0" 是 true

数学运算

求幂**

alert( 2 ** 2 ); // 2² = 4 
alert( 2 ** 3 ); // 2³ = 8 
alert( 2 ** 4 ); // 2⁴ = 16

alert( 4 ** (1/2) ); // 2(1/2 次方与平方根相同) 
alert( 8 ** (1/3) ); // 2(1/3 次方与立方根相同)

加号 + 被应用于字符串,它将合并(连接)各个字符串:

let s = "my" + "string"; 
alert(s); // mystring

alert( '1' + 2 ); // "12" 
alert( 2 + '1' ); // "21"

alert(2 + 2 + '1' ); // "41",不是 "221"
alert('1' + 2 + 2); // "122",不是 "14"

二元 + 是唯一一个以这种方式支持字符串的运算符。其他算术运算符只对数字起作用,并且总是将其运算元转换为数字。

下面是减法和除法运算的示例:

alert( 6 - '2' ); // 4,将 '2' 转换为数字 
alert( '6' / '2' ); // 3,将两个运算元都转换为数字

逗号运算符

逗号运算符能让我们处理多个语句,使用 , 将它们分开。每个语句都运行了,但是只有最后的语句的结果会被返回。

let a = (1 + 2, 3 + 4);
alert( a ); // 7(3 + 4 的结果) 

值的比较

和C很类似

不同类型的值比较

JavaScript 会首先将其转化为数字(number)再判定大小。

严格相等

如果 a 和 b 属于不同的数据类型,那么 a === b 不会做任何的类型转换而立刻返回 false

alert( 0 === false ); // false,因为被比较值的数据类型不同

逻辑运算

|| && !

控制合并运算符

a ?? b 的结果是:

  • 如果 a 是已定义的,则结果为 a
  • 如果 a 不是已定义的,则结果为 b

等价于

result = (a !== null && a !== undefined) ? a : b;

循环

while for break continue 基本和c一致

标签

是在循环之前带有冒号的标识符:
 ```
  labelName: for (…) { … }


`break <labelName>` 语句跳出标记循环:
```JavaScript
outer: for (let i = 0; i < 3; i++) {
	for (let j = 0; j < 3; j++) { 
	let input = prompt(`Value at coords (${i},${j})`, ''); // 如果是空字符串或被取消,则中断并跳出这两个循环。 
	if (!input) _break_ _outer_; // (*) 
	// 用得到的值做些事…… 
	} 
} 
alert('Done!');

我们还可以将标签移至单独一行:

outer: for (let i = 0; i < 3; i++) { ... }

continue 指令也可以与标签一起使用。在这种情况下,执行跳转到标记循环的下一次迭代。

break 指令必须在代码块内。从技术上讲,任何被标记的代码块都有效.

switch

这里的相等是严格相等。被比较的值必须是相同的类型才能进行匹配。

函数

函数声明

function name(parameter1, parameter2, ... parameterN) {
...body... 
}

向函数传参,使用的是赋值,而不是引用,函数内的修改函数外不可见

默认值

function showMessage(from, text = "no text given") { 
alert( from + ": " + text );
}
showMessage("Ann"); // Ann: no text given


function showMessage(from, text = anotherFunction()) { 
// anotherFunction() 仅在没有给定 text 时执行 
// 其运行结果将成为 text 的值 
}

返回值

空值的 return 和 return undefined 等效

函数表达式

在 JavaScript 中,函数不是“神奇的语言结构”,而是一种特殊的值。
它允许我们在任何表达式的中间创建一个新函数。

let sayHi = function() { alert( "Hello" ); };

函数是一个值


function sayHi() { alert( "Hello" ); } 

alert( sayHi ); // 显示函数代码_


但是这样并不会运行函数,因为没有括号

回调函数

这两个函数没有名字,所以叫 匿名函数。这样的函数在 ask 外无法访问(因为没有对它们分配变量),不过这正是我们想要的。

function ask(question, yes, no) 
{ if (confirm(question)) yes()  
   else no(); 
} 
ask( 
    "Do you agree?", 
    function() { alert("You agreed."); }, 
    function() { alert("You canceled the execution."); } 
);

函数表达式是在代码执行到达时被创建,并且仅从那一刻起可用

在函数声明被定义之前,它就可以被调用。

sayHi("John"); // Hello, John
function sayHi(name) { alert( `Hello, ${name}` ); }

但是以下的写法就会有bug

sayHi("John"); // error! 

let sayHi = function(name) {
// (*) no magic any more
alert( `Hello, ${name}` ); 
};

严格模式下,当一个函数声明在一个代码块内时,它在该代码块内的任何位置都是可见的。但在代码块外不可见。

箭头函数

let func = (arg1, arg2, ..., argN) => expression;

这里创建了一个函数 func,它接受参数 arg1..argN,然后使用参数对右侧的 expression 求值并返回其结果。

换句话说,它是下面这段代码的更短的版本:

let func = function(arg1, arg2, ..., argN) { return expression; };
let double = n => n * 2; 
// 差不多等同于:let double = function(n) { return n * 2 }
alert( double(3) ); // 6


let sayHi = () => alert("Hello!");
sayHi();


let sum = (a, b) => { // 花括号表示开始一个多行函数
let result = a + b; 
return result; // 如果我们使用了花括号,那么我们需要一个显式的 “return”
}; 

alert( sum(1, 2) ); // 3

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

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

相关文章

Maven的全面讲解及如何安装使用

Maven是一种流行的Java项目管理工具&#xff0c;可用于构建、测试、打包和部署Java应用程序。本文将介绍Maven的概念、安装配置、使用方法、生命周期以及IDEA集成Maven的方法。 Maven的概念 Maven是一种基于项目对象模型&#xff08;POM&#xff09;的构建工具。POM是一个XML…

【C++】位运算类题目总结

文章目录 一. 位运算符脑图二. 相关题目1. 统计二进制数中0的个数2. 数组中只出现一次的数字3. 数组中只出现一次的数字 II4. 不用加减乘除做加法 一. 位运算符脑图 二. 相关题目 1. 统计二进制数中0的个数 解题思路&#xff1a;x & (x-1)&#xff1b;它的作用是每次循环…

系统集成项目管理工程师 笔记(第18章:项目风险管理)

文章目录 18.1.2 风险的分类 54318.1.3 风险的性质 544项目风险管理6个过程&#xff08;风险管理、识别风险、实施定性风险分析、实施定量风险分析、规划风险应对、控制风险&#xff09;组织和干系人的风险态度影响因素18.3.3 规划风险管理的输出 550风险识别的原则18.4.2 识别…

针对Vue前后端分离项目的渗透思路

引言 在目前的开发环境下&#xff0c;越来越多的厂商选择 Vue.js 来实现前端功能的编写&#xff0c;且成熟的前端框架已经可以实现后端代码实现的功能&#xff0c;导致后端目前只负责提供 Api 接口和文档&#xff0c;方便前端的同时去调用。本文主要介绍如何针对这类前后端分离…

如何利用几何坐标变换后纠正技术实现倾斜摄影三维模型数据拼接?

如何利用几何坐标变换后纠正技术实现倾斜摄影三维模型数据拼接&#xff1f; 倾斜摄影三维模型数据拼接是指将多个倾斜摄影数据集合并为一个完整的三维模型。在这个过程中&#xff0c;由于不同数据集之间的相对位置和姿态不同&#xff0c;需要进行几何坐标变换以实现数据拼接。…

借用AI工具为视频添加中文字幕,消除语言障碍,母语环境最快速地学习

由于chatgpt的启动&#xff0c;感觉语言已经完全不会成为学习的障碍&#xff0c;突发奇想&#xff0c;在我们查看youtube视频的时候&#xff0c;有没有方便的工具能够将其字幕翻译为中文。这样能够极大提高在youtube学习的效率&#xff0c;于是顺手问了一下ChatGPT&#xff0c;…

Nginx—在linux的ubuntu系统上的安装使用

前言: 有关Nginx的基础知识和使用都在这里Nginx简介和快速入门_北岭山脚鼠鼠的博客-CSDN博客 常用命令: cd /usr/local/nginx/sbin/ ./nginx 启动 ./nginx -s stop 停止 ./nginx -s quit 安全退出 ./nginx -s reload 重新加载配置文件(常用) //在修改配置文件之后使用 p…

教你部署chatgpt商业版源码,支持卡密开通国内使用

教你部署chatgpt商业版源码&#xff0c;支持卡密开通国内使用 当今&#xff0c;人工智能技术在各个领域的应用越来越广泛&#xff0c;其中自然语言处理是非常重要的一环。OpenAI 的 GPT 模型是自然语言处理领域的一项重要技术&#xff0c;它可以根据已有的文本数据&#xff0c;…

Java 怎样实现代理模式,有什么优缺点

一、介绍 代理模式是一种常见的设计模式&#xff0c;它可以为其他对象提供一种代理以控制对这个对象的访问。代理对象具有与被代理对象相同的接口&#xff0c;客户端无需知道代理对象和被代理对象的区别。代理模式可以应用于各种不同的场景&#xff0c;例如远程代理、虚拟代理…

Ubantu docker学习笔记(九)容器监控 自带的监控+sysdig+scope+cAdvisor+prometheus

文章目录 一、Docker命令监控二、Sysdig2.1介绍2.2 基本操作2.2.1 切换视图2.2.2 查看标签含义2.2.3 排序2.2.4 查看内部进程2.2.5 查找2.2.6 暂停2.2.7 上一级2.2.8 退出 三、Weave Scope3.1介绍3.2基本操作3.2.1 显示容器3.2.2 选择容器3.2.3 按照CPU使用情况排序3.2.4 控制容…

手动开发 简单的 Spring 基于 XML 配置的程序

目录 手动开发- 简单的 Spring 基于 XML 配置的程序 需求说明 思路分析 WyxApplicationContextTest xml配置 注意 手动开发- 简单的 Spring 基于 XML 配置的程序 需求说明 1. 自己写一个简单的 Spring 容器, 通过读取 beans.xml&#xff0c;获取第 1 个 JavaBean: Mon…

【建议收藏】Pandas(一)——初见Series

文章目录 &#x1f4da;引言&#x1f4d6;库的安装以及一些说明&#x1f4d1;库的安装&#x1f4d1;一些说明 &#x1f4d6;Series&#x1f4d1;创建一个Series&#x1f516;从列表创建Series&#x1f516;从字典创建Series&#x1f516;标量创建Series &#x1f4d1;Series的特…

SpringSecurity认证原理和自定义认证

认证原理和自定义认证 认证配置表单认证注销登录前后端分离认证添加验证码 自定义认证 自定义资源权限规则 /index 公共资源/hello … 受保护资源 权限管理 在项目中添加如下配置就可以实现对资源权限规则设定: Configuration public class WebSecurityConfigurer extend…

node笔记_http服务搭建(渲染html、json)

文章目录 ⭐前言⭐初始化项目调整npm 的script运行入口搭建hello world的http服务npm run dev执行主函数的http服务 ⭐http返回类型html模板文件返回安装express渲染html的字符串 渲染html文件 sendFile渲染json返回数据类型 res.json ⭐结束 ⭐前言 大家好&#xff0c;我是ym…

CTF权威指南 笔记 -第二章二进制文件- 2.2 -ELF文件格式

目录 ELF的文件类型 ELF文件的结构 ELF文件头 节头表 代码节 数据节和只读数据节 bss节 字符串表 符号表 重定位 可执行文件的装载 常见的段 ELF就是可执行可连接格式 为linux运行文件格式 ELF的文件类型 我们使用复杂的例子进行演示 #include<stdio.h>int gl…

成功解决长时间挂起虚拟机后再次打开无法连接网络,并提示网络激活失败(亲测有效)

成功解决长时间挂起虚拟机后再次打开无法连接网络&#xff0c;并提示网络激活失败&#xff08;亲测有效&#xff01;&#xff09; 之前做区块链的一个虚拟机很久没打开&#xff0c;一直处于挂起状态&#xff0c;一直提示网络连接激活失败。试了很多种方法没解决&#xff0c;更…

人力资源管理系统有哪些推荐?

人力资源管理系统是现代企业管理中必不可少的工具&#xff0c;它可以帮助企业高效地管理人员的入职、离职、考勤、绩效、薪酬等方面的信息。 然而&#xff0c;市场上的HRM系统琳琅满目&#xff0c;选择一款合适的系统并不容易。 今天就来给大家介绍六款好用的人力资源管理系统…

自动化运维工具---Ansible Playbook语法实战(一)

目录 一、Ansible Playbook剧本初识 1.1 Ansible Playbook 基本概述 1.1.1 什么是playbook 1.1.2 Ansible playbook 与AD-Hoc的关系 1.2 Ansible Playbook 书写格式 1.2.1安装NFS 服务 1.3 Playbook变量详解 1.3.1 使用 vars定义变量 1.3.2 使用 vars_flies定义变量 …

中国平安将在2023年出现转机,复苏才刚刚开始

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 在解封后股价出现短暂反弹之后&#xff0c;由于市场担忧中国平安&#xff08;02318&#xff09;人寿保险部门新业务NBV&#xff08;用于衡量寿险公司新业务价值的一个重要指标,当一家保险公司的NBV指标越高,那么说明每新增…

码出高效:Java开发手册笔记(线程安全)

并发与并行的目标都是尽可能快地执行完所有任务。以医生坐诊为例&#xff0c;某个科室有两个专家同时出诊&#xff0c;这就是两个并行任务&#xff0c;其中一个医生&#xff0c;时而问诊&#xff0c;时而查看化验单&#xff0c;然后继续问诊&#xff0c;突然又中断去处理病人的…