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

文章目录

  • 一、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.mfbz.cn/a/689287.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据结构与算法笔记：基础篇 - 散列表（下）：为什么散列表和链表经常会一起使用？

数据结构与算法笔记：基础篇 - 散列表（下）：为什么散列表和链表经常会一起使用？

概述 已经学习了这么多章节了&#xff0c;你有没有发现&#xff0c;两种数据结构&#xff0c;散列表和链表&#xff0c;经常会被放在一起使用。你还记得&#xff0c;前面的章节中都有哪些地方讲到散列表和链表的组合使用吗&#xff1f; 在链表那一节&#xff0c;我讲到如何用…
阅读更多...
MAVEN：自定义模板Archetype的创建

MAVEN：自定义模板Archetype的创建

目录 一、简介 二、具体步骤 三、 vscode通过模板创建项目 四、通过IDEA创建 一、简介 有时候MAVEN自带的模板库并不能满足我们创建项目的需求&#xff0c;为了能够快速创建项目&#xff0c;免去每次复杂的配置&#xff0c;所以我们需要自定义模板库&#xff0c;本次操作基于…
阅读更多...
nss刷题（4）

nss刷题（4）

1、[SWPUCTF 2021 新生赛]easyrce <?php error_reporting(0); highlight_file(__FILE__); if(isset($_GET[url])) { eval($_GET[url]); } ?> if(isset($_GET[url])) isset函数用来检测url变量是否存在&#xff1b;$_GET函数获取变量数据 eval($_GET[url]); eval函数用…
阅读更多...
数据挖掘--数据预处理

数据挖掘--数据预处理

数据清理 缺失值 如果数据集含有分类属性&#xff0c;一种简单的填补缺失值的方法为&#xff0c;将属于同一类的对象的该属性值的均值赋此缺失值&#xff1b;对于离散属性或定性属性&#xff0c;用众数代替均值。更复杂的方法&#xff0c;可以将其转换为分类问题或数值预测问…
阅读更多...
Liunx环境下redis主从集群搭建（保姆级教学）02

Liunx环境下redis主从集群搭建（保姆级教学）02

Redis在linux下的主从集群配置 本次演示使用三个节点实例一个主节点&#xff0c;两个从节点&#xff1a;7000端口&#xff08;主&#xff09;&#xff0c;7001端口&#xff08;从&#xff09;&#xff0c;7002端口&#xff08;从&#xff09;&#xff1b; 主节点负责写数据&a…
阅读更多...
[译文] LLM安全：3.网络LLM攻击及提示注入知识普及（PortSwigger）

[译文] LLM安全：3.网络LLM攻击及提示注入知识普及（PortSwigger）

这是作者新开的一个专栏&#xff0c;主要翻译国外知名安全厂商的技术报告和安全技术&#xff0c;了解它们的前沿技术&#xff0c;学习它们威胁溯源和恶意代码分析的方法&#xff0c;希望对您有所帮助。当然&#xff0c;由于作者英语有限&#xff0c;会借助LLM进行校验和润色&am…
阅读更多...
SpringBoot+Vue幼儿园管理系统（前后端分离）

SpringBoot+Vue幼儿园管理系统（前后端分离）

技术栈 JavaSpringBootMavenMyBatisMySQLVueElement-UI 系统角色 教师用户管理员 功能截图
阅读更多...
Plotly : 超好用的Python可视化工具

Plotly : 超好用的Python可视化工具

文章目录 安装&#xff1a;开始你的 Plotly 之旅基本折线图&#xff1a;简单却强大的起点带颜色的散点图&#xff1a;数据的多彩世界三维曲面图&#xff1a;探索数据的深度气泡图&#xff1a;让世界看到你的数据小提琴图&#xff1a;数据分布的优雅展现旭日图&#xff1a;分层数…
阅读更多...
立创小tips

立创小tips

立创小tips 原理图中 1-修改图纸属性 保存完&#xff0c;绘制原理图的界面就出现了&#xff0c;然后我们鼠标点击原理图的边缘变成红色就可以高边表格的属性了。 2-鼠标右键可以移动整个原理图 3-查看封装 点击任意一个元器件&#xff0c;在右侧就会显示封装属性&#xff…
阅读更多...
[word] word图片环绕方式怎么设置？ #经验分享#笔记#媒体

[word] word图片环绕方式怎么设置？ #经验分享#笔记#媒体

word图片环绕方式怎么设置&#xff1f; 在文档中图片排版是很常见的&#xff0c;在图片排版的过程中我们如何利用小技巧快速处理呢&#xff1f;下面给大家分享word图片环绕方式怎么设置的操作方法&#xff0c;一起来学习下吧&#xff01; 1、修改图片环绕方式 在Word文档中图…
阅读更多...
【背包-BM70 兑换零钱(一)】

【背包-BM70 兑换零钱(一)】

题目 BM70 兑换零钱(一) 描述 给定数组arr&#xff0c;arr中所有的值都为正整数且不重复。每个值代表一种面值的货币&#xff0c;每种面值的货币可以使用任意张&#xff0c;再给定一个aim&#xff0c;代表要找的钱数&#xff0c;求组成aim的最少货币数。 如果无解&#xff0c;…
阅读更多...
python数据分析-心脏瓣膜手术风险分析与预测

python数据分析-心脏瓣膜手术风险分析与预测

研究背景 人的心脏有四个瓣膜&#xff0c;主动脉银、二尖、肺动脉和三尖源 不管是那一个膜发生了病变&#xff0c;都会导致心脏内的血流受到影响&#xff0c;这就是通常所说的心脏期膜病&#xff0c;很多是需要通过手术的方式进行改善的。随着人口老龄化的加剧,&#xff0c;心…
阅读更多...
[word] word批注怎么删除 #学习方法#媒体

[word] word批注怎么删除 #学习方法#媒体

word批注怎么删除 word批注怎么删除&#xff1f;Word批注主要是用注释和评论文档内容&#xff0c;不管是学习上还是职场上都会用到批注&#xff0c;现在就来教大家快速删除批注的技巧。 1.删除一条批注&#xff1a;选中要删除的批注后&#xff0c;点击【批注】下的删除按钮&a…
阅读更多...
277 基于MATLAB GUI火灾检测系统

277 基于MATLAB GUI火灾检测系统

基于MATLAB GUI火灾检测系统&#xff0c;可以实现图片和视频的火苗检测。火焰识别的三个特征&#xff1a;1个颜色特征&#xff0c;2个几何特征颜色特征&#xff1a;HSV颜色空间下&#xff0c;对三个通道值进行阈值滤波&#xff0c;几何特征1&#xff1a;长宽比&#xff0c;几何…
阅读更多...
高考志愿填报选专业，兴趣、擅长、热门就业怎么选？

高考志愿填报选专业，兴趣、擅长、热门就业怎么选？

高考成绩发布后&#xff0c;接下来的重任就是填报志愿&#xff0c;在有限的时间里&#xff0c;选择好学校&#xff0c;选个专业确实不容易。很多人都说填报志愿要从兴趣方面来着手....那么兴趣靠谱吗&#xff1f; 选专业可以根据兴趣吗&#xff1f; 在应试教育的大环境中&…
阅读更多...
Java学习-JDBC(一)

Java学习-JDBC(一)

JDBC 概念 JDBC(Java Database Connectivity)Java数据库连接JDBC提供了一组独立于任何数据库管理系统的APIJava提供接口规范&#xff0c;由各个数据库厂商提供接口的实现&#xff0c;厂商提供的实现类封装成jar文件&#xff0c;也就是我们俗称的数据库驱动jar包JDBC充分体现了…
阅读更多...
AIGC+营销：AI在营销领域的演变与营销人员的新角色

AIGC+营销：AI在营销领域的演变与营销人员的新角色

一、AI在营销领域的演变 随着AI技术的不断发展&#xff0c;营销领域也迎来了新的变革。从目前的“AI Copilot”阶段&#xff0c;到未来的“AI Agent”和“AI自主营销团队”阶段&#xff0c;AI的角色将逐渐从辅助人类到独立承担更多职责。 AI Copilot&#xff08;副驾驶&#…
阅读更多...
MATLAB算法实战应用案例精讲-【数模应用】因子分析（附MATLAB和python代码实现）

MATLAB算法实战应用案例精讲-【数模应用】因子分析（附MATLAB和python代码实现）

目录 前言 算法原理 SPSS因子分析 操作步骤 结果分析 SPSSAU 因子分析案例 1、背景 2、理论 3、操作 4、SPSSAU输出结果 5、文字分析 6、剖析 疑难解惑 同源方差或共同方法变异偏差，Harman单因子检验？ 提示出现奇异矩阵？ 因子得分和综合得分？ 因子分析计…
阅读更多...
19、Go Gin框架集成Swagger

19、Go Gin框架集成Swagger

介绍&#xff1a; Swagger 支持在 Gin 路由中使用一系列注释来描述 API 的各个方面。以下是一些常用的 Swagger 注释属性&#xff0c;这些属性可以在 Gin 路由的注释中使用&#xff1a; Summary: 路由的简短摘要。Description: 路由的详细描述。Tags: 用于对路由进行分类的标…
阅读更多...
人类语言处理nlp部分笔记——四、GPT3

人类语言处理nlp部分笔记——四、GPT3

参考自李宏毅课程-人类语言处理 四、GPT3 1. 介绍 GPT-3是一个language model&#xff0c;它的参数量相当巨大&#xff0c;是ELMO的2000倍。 2. GPT-3的野心 虽然GPT-3和BERT等模型一样&#xff0c;但是GPT-3是不需要针对特定的task做finetune的&#xff0c;也就是说GPT-3…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站