前端三大件速成 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) // 1console.log(~6) // -7console.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.rhkb.cn/news/344913.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

轻松构建聊天机器人,大模型 RAG 有了更强大的AI检索器

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学。 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 合集&#x…

每日两题6

文章目录 删除并获得点数粉刷房子 删除并获得点数 分析 class Solution { public:int deleteAndEarn(vector<int>& nums) {const int N 10001;// 预处理int arr[N] {0};for (int& e : nums)arr[e] e;// 在 arr 上进行 打家劫舍 问题vector<int> f(N),…

《2024年网络安全预测:未来规划深度洞察》

2024 年打击网络对手的计划。 阅读报告&#xff0c;了解我们的专家对 2024 年网络安全行业的预测&#xff0c;包括&#xff1a; 攻击者将人工智能融入其行动中&#xff0c;防御者利用它来加强检测和响应 民族国家继续开展网络行动以实现其地缘政治目标 攻击者继续利用零日漏洞…

Git从入门到放弃

由于我的Git学的不太好&#xff0c;所以为了能够将以后我的学习笔记能够整理的更好&#xff0c;我先要系统的学习一下git&#xff0c;文章由此产生。 文章笔记源自尚硅谷Git入门到精通全套教程视频内容 1 进入官网 学习新技术的第一步需要熟悉官网&#xff0c;Git也不例外。ht…

Java 环境配置 -- Java 语言的安装、配置、编译与运行

大家好&#xff0c;我是栗筝i&#xff0c;这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 002 篇文章&#xff0c;在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验&#xff0c;并希望进…

为什么要做与运算?网关如何和ip做与运算?

在计算机网络中&#xff0c;“与运算”是一个基本而重要的概念&#xff0c;尤其在IP地址和子网掩码的处理中起着关键作用。本文将解释为什么要进行与运算&#xff0c;以及网关如何和IP地址进行与运算。 为什么要做与运算&#xff1f; 1. 确定网络地址 与运算&#xff08;AND…

自然语言处理:第三十二章HippoRAG:性能提高20% - 受海马体启发的RAG

文章链接: HippoRAG: Neurobiologically Inspired Long-Term Memory for Large Language Models 项目地址: OSU-NLP-Group/HippoRAG: HippoRAG is a novel RAG framework inspired by human long-term memory that enables LLMs to continuously integrate knowledge across e…

二分+模拟,CF1461D - Divide and Summarize

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1461D - Codeforces 二、解题报告 1、思路分析 我们发现每次分裂操作结果都是固定的 我们从初始序列分裂出两个确定的子序列&#xff0c;两个确定的子序列又分裂出4个确定的子序列 那么也就是说…

实验二、网络属性设置《计算机网络》

精神状态 be like&#xff1a;边写边崩溃&#xff0c;越写越得劲儿。 目录 一、实验目的&#xff1a; 二、实验内容 三、实验步骤&#xff1a; 四、实验小结 一、实验目的&#xff1a; 掌握 IP 地址、子网掩码等网络属性的设置。 二、实验内容 预备知识&#xff1a; 1、…

android集成百度文心一言实现对话功能,实战项目讲解,人人都能拥有一款ai应用

大家好&#xff0c;今天给大家讲解下如何实现一个基于百度文心一言的app功能&#xff0c;app内部同时集成了讯飞的语音识别。本文适用于有android基础的小伙伴阅读&#xff0c;文章末尾放上本项目用到的全部实例代码&#xff0c;在使用前请务必看完本文章。 先来给大家看看效果…

php质量工具系列之PHPCPD

PHPCPD 用于检测重复代码&#xff0c;直观的说就是复制粘贴再稍微改改 该工具作者已经 停止维护 安装 composer global require --dev sebastian/phpcpd执行 phpcpd --log-pmd phpcpd_result.xml ./app参数介绍 --log-pmd 将结果保存在phpcpd_result.xml 中 ./app 是phpcpd扫…

编译原理-词法分析(实验 C语言)

编译原理-词法分析 1. 实验目的 设计、编写并调试一个词法分析程序&#xff0c;加深对词法分析原理的理解 2. 实验要求 2.1 待分析的简单语言的词法 关键字&#xff1a;begin&#xff0c;if&#xff0c;then&#xff0c;while&#xff0c;do&#xff0c;end 所有关键字都是…

DevOps入门

DevOps: 让技术团队、运维、测试等团队实现一体式流程自动化 CICD: CI:持续集成 CD:持续交付持续集成:从编码、编译、测试、发布项目到仓库的自动化流程持续交付:包含持续集成&#xff0c;并且增加将项目部署到对应的环境的自动化流程 传统项目闭环流程: DevOps闭环流程…

基于非下采样小波包分析的滚动轴承故障诊断(MATLAB R2021B)

小波变换具有良好的时频局部化特性和多分辨率特性&#xff0c;可准确定位信号的突变点并可在不同尺度上描述信号的局部细节特征&#xff0c;被广泛应用于信号降噪。但标准正交小波变换不具有平移不变性&#xff0c;采用标准正交小波对信号消噪后&#xff0c;会在脉冲尖峰处产生…

VSCode调试揭秘:Live Server助力完美测试Cookie与Session,远超“Open in Browser“!

文章目录 一、项目场景&#xff1a;二、问题描述1. open in browser&#xff1a;2. open with live server 三、原因分析&#xff1a;先了解一下open in browser和open with live server的区别两者的优缺点open in browseropen with live server 四、解决方案&#xff1a;总结 …

Java开发-面试题-0005-==和String的equals()和String的intern()方法的区别

Java开发-面试题-0005-和String的equals()和String的intern()方法的区别 更多内容欢迎关注我&#xff08;持续更新中&#xff0c;欢迎Star✨&#xff09; Github&#xff1a;CodeZeng1998/Java-Developer-Work-Note 技术公众号&#xff1a;CodeZeng1998&#xff08;纯纯技术…

前端多人项目开发中,如何保证CSS样式不冲突?

在前端项目开发中&#xff0c;例如突然来了一个大项目&#xff0c;很可能就需要多人一起开发&#xff0c;领导说了&#xff0c;要快&#xff0c;要快&#xff0c;要快&#xff0c;你们给我快。然后下面大伙就一拥而上&#xff0c;干着干着发现&#xff0c;一更新代码&#xff0…

转型AI产品经理(5):“锚定效应”如何应用在Chatbot产品中

锚定效应是认知心理学中一个重要的概念&#xff0c;它描述了人们在进行判断或决策时&#xff0c;往往过于依赖最先接收到的信息或数字&#xff08;即“锚点”&#xff09;&#xff0c;即使后续信息与初始锚点无关甚至相反&#xff0c;这个初始信息也会显著地影响最终的判断结果…

【下篇】从 YOLOv1 到 YOLOv8 的 YOLO 物体检测模型历史

YOLO 型号之所以闻名遐迩,主要有两个原因:其速度和准确性令人印象深刻,而且能够快速、可靠地检测图像中的物体。上回我解释了YoloX, 今天从Yolov6开始。 YOLOv6:面向工业应用的单级物体检测框架 美团视觉人工智能事业部(Meituan Vision AI Department)于 2022 年 9 月在…

拯救者Legion Y9000X IRX9 2024(83FD)原装出厂Windows11系统镜像下载

lenovo联想2024款拯救者Y9000X IRX9 笔记本电脑【83FD】OEM预装Win11系统安装包&#xff0c;恢复开箱状态&#xff0c;自带恢复重置还原功能 链接&#xff1a;https://pan.baidu.com/s/1i_sVcnXF4qgsuj02rebe-Q?pwdyefp 提取码&#xff1a;yefp 联想原装WIN11系统自带所有…