前端三大件速成 05 javascript(1)js组成、引入、基本语法

news2024/12/23 18:49:54

文章目录

  • 一、js组成
  • 二、js的引入
  • 三、基本语法
    • 1、变量
    • 2、基本规范
    • 3、关键字
    • 4、数据类型
      • (1)基本数据类型
      • (2)引用数据类型
      • (3)数据类型转换
      • (4)typeof运算符
    • 5、运算符
    • 6、流程控制
      • (1)选择结构
      • (2)循环语句
    • 7、异常处理
    • 8、函数

一、js组成

核心(ECMAScript):规定了js的基本语法、关键字等
文档对象模型(DOM):整合js,css,html
浏览器对象模型(BOM):整合js和浏览器

js在开发中绝大多数情况是基于对象的,也是面向对象的。

二、js的引入

方法一:

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

</head>
<body>

<script>
    alert(123);
</script>

</body>
</html>

方法二:

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

    <script src="tset.js"></script>

</head>
<body>

</body>
</html>

tset.js文件:

alert(666);

注:script标签放在哪都行,不过代码是从上到下顺序解释的的,所以最好放在body标签最下面,否则找标签可能找不到。

三、基本语法

1、变量

(1)变量是弱类型的。
(2)声明变量时不用声明变量类型,全部使用var关键字。

var x;  //变量声明
x = 12;
alert(x);    //浏览器弹出一个弹框,输出x值
console.log(x); //在控制台输出x值
var x=10;  //变量声明,同时赋值
console.log(x); //在控制台输出x值

(3)声明变量时,不用关键字var,那么它是全局变量
(4)变量命名:首字母只能是字母、下划线、$ 三选一,且区分大小写。

2、基本规范

(1)语句结束以分号结尾,如果不加分号,浏览器会以换行符为语句结束标志,自动加上分号。规范上,建议分号不要省。
(2)注释:单行注释 //  多行注释 /* */
(3)使用{ }来封装代码块

3、关键字

在这里插入图片描述

4、数据类型

(1)基本数据类型

number: 整型和浮点型
string: 字符串,首尾用单引号或双引号括起。js没有字符类型,单个字符也是字符串。
常用转义字符: \n 换行  \’ 单引号  \" 双引号 \\ 右划线
boolean: 布尔型,仅有两个值,true和false,分别代表1和0
undefined: 只有一个值,即undefined。变量声明后没有赋值,或者函数没有返回值时,其值为undefined。
Null: 只有一个值null,表示尚未存在的对象。如果函数返回的是对象,那么找不到该对象时,返回的通常是null。注意:typeof null 返回值为object

(2)引用数据类型

数组等复合数据类型均为object

(3)数据类型转换

①隐式转换:
数字 + 字符串:数字转换为字符串
数字 + 布尔值:布尔值转换为数字
字符串 + 布尔值:布尔值转换为字符串true或false

var x=10,y="ab",z=true;
console.log(x+y)    //10ab
console.log(x+z)    //11
console.log(y+z)    //abtrue

用一元加减法转化为数字

var n = "5"
n = +n
console.log(typeof n) // number

②强制转换:

// 转换为整数
console.log(parseInt("123ab"))  // 123
console.log(parseInt("ab123"))  // NaN
console.log(parseInt("hello"))  // NaN
//NAN: not a number,属于Number的一种
console.log(typeof NaN)         //number
console.log(parseInt("6.99ab")) // 6
// 转换为浮点数
console.log(parseFloat("6.99ab")) // 6.99
console.log(eval("1+1")) // 2
console.log(eval("1<2")) // true

(4)typeof运算符

typeof可以查看数据类型

function f() {
    // 相当于写了个html语句
    document.write("<h1>hello world!</h1>")
}
console.log(typeof f()) // undefined
console.log(typeof f)   // function

5、运算符

①加 +  减 -  乘 *  除 /  取余 %

console.log(2+3) // 5
console.log(3*2) // 6
console.log(11/2) // 5.5
console.log(11%2) // 1

②自增1: i++ ++i   自减1: i-- --i

var i =10
console.log(i++) // 10
console.log(++i) // 12

③比较运算符
大于 >   小于 <
大于或等于 >=   小于或等于 <=
赋值 =
等于 ==  不等于 !=
完全等 ===

var n = 5
console.log(n == 5) // true
console.log(n == "5") // true
console.log(n === "5") // false

比较运算符两侧如果一个是数字类型,一个是其他类型,会将其他类型转换为数字类型。
比较运算符两侧如果都是字符串类型,则从前往后按位比较字符对应的ascii码。

console.log(5>"3") // true
console.log("5">"31") // true

④NaN只要参与比较,布尔值一定是false,除非 !=

var n = NaN
console.log(n>5) // false
console.log(n<5) // false
console.log(n==5) // false
console.log(n==NaN) // false
console.log(n!=NaN) // true

⑤逻辑运算符
且 &&   或 ||   非 !
且 &&:
如果第一个操作数为真,返回第二个操作数。
如果第一个操作数为假,返回第一个操作数。
null,NaN,undefined,均为假

var x = 5, y = 0, z = true;

console.log(x && y) // 0
console.log(y && z) // 0
console.log(z && x) // 5

或 ||:
如果第一个操作数为真,返回第一个操作数。
如果第一个操作数为假,返回第二个操作数。

console.log(0 || 10) // 10
console.log(11 || 0) // 11

非 !:

console.log(!10) // false
console.log(!0) // true

⑥位运算符
左移 <<:按位左移,后面补0
右移 >>:按位右移,前面补0
按位取反 ~
按位与运算 &
按位或运算 |
按位异或运算 ^

console.log(3<<1) // 6
console.log(3>>1) // 1

console.log(~6) // -7

console.log(2&1) // 0
console.log(2|1) // 3
console.log(2^3) // 1

6、流程控制

(1)选择结构

if语句:

if (2>1){
    console.log(222)
}
if (2>10){
    console.log(222)
}else {
    alert(10)
}

此外,if语句还可以嵌套

switch语句:

var week=3;

switch (week){
   case 1:alert("星期一");break;
   case 2:alert("星期二");break;
   case 3:alert("星期三");break;
   case 4:alert("星期四");break;
   case 5:alert("星期五");break;
   case 6:alert("星期六");break;
   case 7:alert("星期日");break;
   default:alert("nothing");
}

(2)循环语句

for语句:
for (初始化; 条件;增量) {
  循环体
}

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

<p>hello1</p>
<p>hello2</p>
<p>hello3</p>
<p>hello4</p>

<script>

var elses_P = document.getElementsByTagName("p")
console.log(elses_P)

for (var i=0;i<elses_P.length;i++){
    console.log(i);
    console.log(elses_P[i]);
}

</script>

</body>
</html>

while语句:
while (条件) {
 循环体
}

var x = 0,i = 1;

while (i<=100) {
    x += i;
    i++
}

console.log(x) // 5050

7、异常处理

try {
    // 这段代码顺序执行,其中任何一个语句抛出异常,该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行
    // e是一个局部变量,用来指向Error对象,或者其他抛出的对象
}
finally {
    // 无论try中代码是否有异常抛出,甚至try代码块中有return语句,
    // finally代码块中始终会被执行。
}
// 主动抛出异常 throw Error("xxx")

例:

try {
    console.log(123)
    throw Error("define error")
}
catch (e) {
    console.log(e)
}
finally {
    console.log("finally")
}

8、函数

//定义函数
function f(){
    console.log(123)
}

//调用函数
f()

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

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

相关文章

优化扩散模型中的采样计划

在生成模型领域&#xff0c;扩散模型&#xff08;Diffusion Models, DMs&#xff09;因其卓越的生成质量而成为最新的技术趋势。但这些模型的一个关键缺点是它们的采样速度较慢&#xff0c;需要通过大型神经网络进行多次顺序函数评估。扩散模型通过一个称为采样计划的离散噪声水…

Elastic Search(ES)Java 入门实操(2)搜索代码

上篇解释了 ES 的基本概念和分词器。Elastic Search &#xff08;ES&#xff09;Java 入门实操&#xff08;1&#xff09;下载安装、概念-CSDN博客 Elastic Search&#xff08;ES&#xff09;Java 入门实操&#xff08;3&#xff09;数据同步-CSDN博客 这篇主要演示 Java 整合…

Day 42 LVS四层负载均衡

一&#xff1a;负载均衡简介 1.集群是什么 ​ 集群&#xff08;cluster&#xff09;技术是一种较新的技术&#xff0c;通过集群技术&#xff0c;可以在付出较低成本的情况下获得在性能、可靠性、灵活性方面的相对较高的收益&#xff0c;其任务调度则是集群系统中的核心技术 …

PyTorch深度学习实战(44)——基于 DETR 实现目标检测

PyTorch深度学习实战&#xff08;44&#xff09;——基于 DETR 实现目标检测 0. 前言1. Transformer1.1 Transformer 基础1.2 Transformer 架构 2. DETR2.1 DETR 架构2.2 实现 DETR 模型 3. 基于 DETR 实现目标检测3.1 数据加载与模型构建3.2 模型训练与测试 小结系列链接 0. 前…

windows安装tensorboard

要在Windows系统上使用TensorBoard来可视化你的TensorFlow模型训练过程&#xff0c;请按照以下步骤进行操作&#xff1a; 安装TensorFlow和TensorBoard 安装Python&#xff1a; 确保你已经安装了Python。你可以从Python官方网站下载并安装最新版本的Python。 安装TensorFlow&…

kafka-重试和死信主题(SpringBoot整合Kafka)

文章目录 1、重试和死信主题2、死信队列3、代码演示3.1、appication.yml3.2、引入spring-kafka依赖3.3、创建SpringBoot启动类3.4、创建生产者发送消息3.5、创建消费者消费消息 1、重试和死信主题 kafka默认支持重试和死信主题 重试主题&#xff1a;当消费者消费消息异常时&…

基于思通数科大模型的设备隐患智能检测:图像处理与声音分析的融合应用

在现代工业生产中&#xff0c;设备的稳定运行对保障生产效率和产品质量至关重要。然而&#xff0c;设备的老化、磨损以及异常状态的检测往往需要大量的人力和物力。思通数科大模型结合图像处理技术和声音分析技术&#xff0c;为设备隐患检测提供了一种自动化、高效的解决方案。…

源码、反码和补码

对于有符号数而言&#xff0c;原码就是一个数的二进制表示。二进制的最高位是符号位&#xff0c;0 表示正数&#xff0c;1 表示负数。 计算机用数的原码进行显示&#xff0c;数的计算和存储是用补码进行的。 正数的原码&#xff0c;反码和补码都一样&#xff0c;即正数三码合…

Matching Anything by Segmenting Anything

摘要 在复杂场景中跨视频帧稳健地关联相同对象是许多应用的关键&#xff0c;特别是多目标跟踪&#xff08;MOT&#xff09;。当前方法主要依赖于标注的特定领域视频数据集&#xff0c;这限制了学习到的相似度嵌入的跨域泛化能力。我们提出了MASA&#xff0c;一种新颖的方法用于…

JavaScript 动态网页实例 —— 图像显示

图像是网页设计中必不可少的内容之一,而图像的显示方式更是关系到网站的第一印象。本章介绍图像的显示,主要包括:图片的随机显示、图像的显示和隐藏、图像的滚动显示、图像的探照灯扫描显示、多幅图像的翻页显示、图像的水纹效果显示、全景图效果显示手电照射效果显示以及雷达…

揭秘800G以太网——简介

什么是800G以太网&#xff1f; 800G以太网是一种高带宽以太网标准&#xff0c;每秒可传输800 Gbps&#xff08;千兆位每秒&#xff09;的数据速率。它代表了以太网技术的又一进步&#xff0c;旨在满足不断增长的数据传输需求以及处理大量数据的能力。因此&#xff0c;800G以太…

杰理AC632N提升edr的hid传输速率, 安卓绝对坐标触摸点被识别成鼠标的修改方法

第一个问题: 首先修改edr的hid传输速率.修改你的板级配置,里面的一个地方给注释掉了,请打开那个注释就能提升edr的hid传输效率了 第二个问题: 修改632n系别把触摸板的hid报告描述符识别成鼠标点,修改如下: 注释掉上面的pnp,改成下面的

RocketMQ的安装

首先到RocketMQ官网下载页面下载 | RocketMQ (apache.org)&#xff0c;本机解压缩&#xff0c;作者在这里用的是最新的5.2.0版本。按照如下步骤安装。 1、环境变量配置rocket mq地址 ROCKETMQ_HOME D:\rocketmq-all-5.2.0-bin-release 在变量path中添加”%ROCKETMQ_HOME%\bi…

04 架构核心技术之分布式消息队列

本课时的主题是分布式消息队列&#xff0c;分布式消息队列的知识结构如下图。 本课时主要介绍以下内容。 同步架构和异步架构的区别。异步架构的主要组成部分&#xff1a;消息生产者、消息消费者、分布式消息队列。异步架构的两种主要模型&#xff1a;点对点模型和发布订阅模型…

RandomDate(接口参数化-随机生成日期)

目录 1、入口位置&#xff1a;2、验证函数生成值3、获取 年月日时分秒 的全随机4、时间函数 前言&#xff1a;有时候我们做性能测试或者接口测试时&#xff0c;参数需要传入日期格式&#xff0c;但是又不想每次都是用同一个日期&#xff0c;我们就可以使用Jmeter工具中函数助手…

[MQTT]服务器EMQX搭建SSL/TLS连接过程(wss://)

&#x1f449;原文阅读 &#x1f4a1;章前提示 本文采用8084端口进行连接&#xff0c;是EMQX 默认提供了四个常用的监听器之一&#xff0c;如果需要添加其他类型的监听器&#xff0c;可参考官方文档&#x1f517;管理 | EMQX 文档。 本文使用自签名CA&#xff0c;需要提前在L…

三次谐波式发电机定子单相接地保护Simulink仿真

在用于接地保护的发电机定子回路的仿真模型的基础上增加三次谐波电动势,得到用于仿真三次谐波式接地保护的发电机定子回路的Simulink仿真模型,如图1所示。 图 1发电机定子回路的Simulink仿真模型 发电机端和中性点侧的三次谐波电压的获取采用如图2所示的方法。 图 2 …

校园生活服务平台的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;用户管理&#xff0c;跑腿管理&#xff0c;文娱活动管理&#xff0c;活动申请管理&#xff0c;备忘录管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff…

使用wheelnav.js构建酷炫的动态导航菜单

目录 前言 一、WheelNav是什么 1、项目地址 2、关于开源协议 3、相关目录介绍 二、如何使用wheelnav.js 1、新建html页面 2、设置style样式 3、创建展示元素实现动态导航 三、参数即方法介绍 1、参数列表 2、运行方法 3、实际成果 四、总结 前言 用户体验永远是一…

数据结构和算法一轮

前言 本文参考《2025年数据结构考研复习指导&#xff08;王道论坛组编&#xff09;》和相关文章&#xff0c;为考试前复习而写。 目录 前言 第一章线性表 1.1顺序表 1.2单链表 1.3循环链表 ​1.4双向链表 第二章栈和队列 2.1栈 2.2共享栈 2.3链栈 2.4队列 2.5循环…