Web前端 Javascript笔记1
为什么学习 JavaScript?
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门:
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 控制了网页的行为
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript是弱数据语言
JavaScript 用法
- HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
- Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中
1、<head> 中的 JavaScript 函数
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>
2、<body> 中的 JavaScript 函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//表达式,表达式最后都会算出一个值//语句</script>
</body>
</html>
3、 外部的 JavaScript
可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js
<!DOCTYPE html>
<html>
<body>
<script src="xxx.js"></script>
</body>
</html>
JavaScript 输出
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
- 括号里面可以识别html的标签
window.alert() ,window可以忽略不写
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1><p>我的第一个段落。</p><script>window.alert(5 + 6);
</script></body>
</html>
document.write()
<!DOCTYPE html><html>
<body><h1>我的第一个 Web 页面</h1><p>我的第一个段落。</p><script>document.write(Date());
</script></body>
</html>
innerHTML
<!DOCTYPE html><html>
<body><h1>我的第一个 Web 页面</h1><p id="demo">我的第一个段落</p><script>document.getElementById("demo").innerHTML = "段落已修改。";
</script></body>
</html>
console.log()
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
let c=5;
console.log(c);
</script></body>
</html>
JavaScript 注释
单行注释是以"//"开头的句子
多行注释以 /* 开始,以 */ 结尾。
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>//我是JavaScript注释/*多行注释多行注释多行注释*/</script><!--我是一般网页注释--></body>
</html>
JavaScript 字母大小写
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的
JavaScript声明变量
表达式,表达式最后都会算出一个值
JavaScript 使用关键字 var/let 来定义变量, 使用等号来为变量赋值
变量赋值:let /var 变量名=值
var允许重复声明,而let不允许重复声明,基于
let等重新声明就会报错
- let声明的变量不可以在声明之前进行使用,但是var可以,这是不合理的,不合适由上至下运行代码
- var存在变量提升的问题
- var不存在块级作用域
let的出现是为了解决var的问题
console.log(1) // => 这行代码就已经不会执行了
let a = 12
console.log(a)
let a = 13 // => 此行出错:SyntaxError: Identifier 'a' has already been declared
console.log(a)
console.log(a)
let a = 13
var a = 12 // => SyntaxError: Identifier 'a' has already been declared
console.log(a)
JavaScript 变量(存储数据的容器)
JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)。
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。
int a=123 a是容器,123是数据
- 命名里具有数字、字母、下划线 $,不以数字开头
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头
- 变量名称对大小写敏感(y 和 Y 是不同的变量)
- 不能使用关键字保留字
-
js严格区分字母的大小写,html不区分大小写
-
起名最好具有意义的
遵循小驼峰命名法:findAgeByNmae
JavaScript 数据类型
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。
引用数据类型(对象类型):对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)。
- 其中
NaN较为特殊,js规定它与任何数据比较均为false,包括其本身
console.log(NaN == NaN) // false
console.log(NaN == 1) // false
- typeof()判断数据类型
- 引用类型可以看作是数组啊什么的,与+运算符基本一致,需注意当与
引用类型+时是看做字符串的拼接,但是-运算符只会视为计算,故与引用类型-时,只会返回NaN
JavaScript可以用强制类型转换
1、隐式转换:
当运算符两端的数据类型不一致,会触发隐式转换
①、有字符串的时候:
console.log("22"+11) //2211 若是加号两边有一边是字符串,加号会把其他数据类型变成字符串
console.log("21"-11) //10 除了加号,其余其余运算符会把字符串转换成数字类型
②、没有字符串的时候:
非Number数据先调用Number()转成数字 再进行运算
Boolean中true为1,false为0
Null强制转换后为0
console.log(1 + true) // 2 console.log(1 + null) // 1
console.log(1 + false) // 1 console.log(1 + undefined) // NaN
2、显示转换
1、Number():
Number()可以把任意值转换成数值,如果要转换的字符串中有一个不是数值的字符,返回NaN
console.log(Number("345678pp"))//NaN
console.log(Number("345678"))//345678
如果该值无法转换为合法数字,则返回 NaN
console.log(true)//1console.log(False)//0console.log(new Date())//1712857336953console.log( "999")//999console.log( "999 888")//NaN
2、parseInt():
- 如果第一个字符是数字,会解析直到遇到非数字结束
- 如果第一个字符不是数字或者符号就返回NaN.
- 允许前导和尾随空格。
console.log(parseInt("345678upp"))//345678
console.log(parseInt("upp3"))//NaN
如果字符串以 "0x" 开头,则基数为 16(十六进制)
- 如果字符串以 "0" 开头,则基数为 8(八进制)。此特性已弃用
var a = parseInt("10") + "<br>";//10var b = parseInt("10.00") + "<br>";//10var c = parseInt("10.33") + "<br>";//10var d = parseInt("34 45 66") + "<br>";//34var e = parseInt(" 60 ") + "<br>";//60var f = parseInt("40 years") + "<br>";//40var g = parseInt("He was 40") + "<br>";//NaNvar h = parseInt("10", 10)+ "<br>";//10var i = parseInt("010")+ "<br>";//10var j = parseInt("10", 8)+ "<br>";//8var k = parseInt("0x10")+ "<br>";//16var l = parseInt("10", 16)+ "<br>";//16
3、parseFloat()
- 此函数确定指定字符串中的第一个字符是否为数字。如果是,它会解析字符串直到到达数字的末尾,并将数字作为数字而不是字符串返回。
- 注释:如果第一个字符不能转换为数字,
parseFloat()返回 NaN。 -
允许前导和尾随空格。
console.log(parseFloat("10"))//10
console.log(parseFloat("10。00"))//10
console.log(parseFloat("10.33"))//10.33
console.log(parseFloat("34 45 66"))//34
console.log(parseFloat(" 60 "))//60
console.log(parseFloat("40 years"))//40
console.log(parseFloat("He was 40 "))//NaNconsole.log(parseFloat(8))//8
4、字符串转化
String()
String(Boolean(0))//false
String(Boolean(1))//true
String(new Date())//Fri Apr 12 2024 01:48:15 GMT+0800 (中国标准时间)
string("12345")//12345
string (1234)//1234
toString()
变量.toString(进制)
let num = 15;
console.log(num.toString())//15
不同进制
var num = 15;
var a = num.toString();//15
var b = num.toString(2);//1111
var c = num.toString(8);17
var d = num.toString(16);//f
js d的符号
算数运算符: + - * / %
赋值运算符: += -= *= /= %=
比较运算符:< > <= >= == === !==
2=="2" true,只会判断值是否相同
2==="2" false 会判断数据类型与值是否会相同=== 判断两边数据是否
全等,即数据类型与值均相等,而隐式转换是在两者数据类型不同时才触发的。而 == 只判断值是否相等
console.log([] == []) // false,返回false,因为引用数据类型比较的是地址
console.log([] == {}) // false
console.log([] == true) // false
console.log([1,2] == "1,2") // true
console.log([1] == 1) // true
String 中的内容为字母、符号等编码
若为等长字母
console.log("a" > "b") // false
若为不等长字母,比较同位置字母大小,根据ACSII码直至做出判断
console.log("ab" > "b") // false
console.log("abc" > "abb") // true
符号同理,都是根据ACSII码进行判断
console.log(":" > "?")//false
一元运算符:
i++ 赋值运算符的优先级大于,先赋值运算,
++i 前加加>赋值运算符,先加加
let a=2
let k=a++
console.log(a,k)
let j=++k
console.log(k,j)
运行结果:
3 2
3 3
逻辑运算符:&& || !
JavaScript流程控制
//顺序、选择,循环
//顺序:代码自上而下,从左到右
//选择(分支):面对不同条件,来执行不同的代码
//条件只要最终返回的是布尔值就好了
1、条件选择
//if(条件){
//满足条件时所执行的代码
//}
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let age = Number(prompt("enter the age="))if(age>=18){console.log("adault!!!!")document.write("adault!!!!")}else{document.write("<h1>unadault!!!!</h1>")}</script>
</body>
</html>
多条件
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let t = Number(prompt("enter the time="))if(t<=4 &&t>=0){document.write(`现在是凌晨${t}点`)}else if(t>4 &&t<=11){document.write(`现在是上午${t}点`)}else if(t>11 &&t<=13){document.write(`现在是中午${t}点`)}else if(t>13 &&t<=17){document.write(`现在是下午${t}点`)}else{document.write(`现在是晚上${t}点`)}</script>
</body>
//三目运算符:条件?满足条件时执行的的代码:不满足条件时执行的代码
<script>//let a=21//age>18?document.write("成年了"):document.write("未成年")let shu = Number(prompt("enter the time="))shu>10?document.write(`${shu}`):alert("0"+shu)</script>
练习
<script>let y=Number(prompt("请输入年份以此判断是闰年还是平年="))if((y%4==0 &&y%100!=0)|| y%400==0){document.write(`<h1>佳人们${y}是闰年!!</h1>`)}else{document.write(`<h1>佳人们${y}是平年!!</h1>`)}</script>
2、循环
while循环
/* let i=0
while(i<=10){//终止条件
//初始值变化
document.write(i)
i++
}*/
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let sum=0let i=0while (i<=100){sum+=ii++}document.write(sum)let s=0//打印偶数和let j=0while(j<=100){if(j%2==0){s+=j}else{continue}j=j+1}document.write("<br/>"+s)//break,continue</script>
</body>
</html>
for循环
//for(声明临时变量;循环条件;变化值{
//}
// for(let i=1;i<=100;i++){
// document.write("-"+2)
// }
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>s=0for(let i=1;i<=100;i++){if(i%2===0){s+=i}}</script>
</body>
</html>
do while 语句
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let i=1do{document.write("hello jjss")i++}while(i<1)</script>
</body>
</html>
嵌套循环
九九乘法表:
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>span{text-align: center;height: 50px;width: 100px;line-height: 50px;background-color: pink;border-radius: 10px;display: inline-block;margin: 2px;}</style>
</head>
<body><script>for(let i=1;i<=9;i++){for(let j=1;j<=i;j++){document.write(`<span>${j}*${i}=${j*i}</span>`)}document.write("<br/>")}}</script></body>
</html>

3、switch语句
switch(n)
{case 1:执行代码块 1break;case 2:执行代码块 2break;default:与 case 1 和 case 2 不同时执行的代码
}
var d=new Date().getDay();
switch (d)
{case 6:x="今天是星期六";break;case 0:x="今天是星期日";break;default:x="期待周末";
}
document.getElementById("demo").innerHTML=x;
相关文章:
Web前端 Javascript笔记1
为什么学习 JavaScript? JavaScript 是 web 开发人员必须学习的 3 门语言中的一门: HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 控制了网页的行为 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后,可由所有的现代浏…...
Git回滚版本并push到远端master
1、查看日志 git log 2、还原最近的版本 () --git reset --hard commit-id 如:git reset --hard d84da14bf2743683eca7a015f56114faaa344f42 3、覆盖分支版本 git push -f origin dev 回滚本地master完成后,将回滚后的代码push到远端master…...
MAC: 自己制作https的ssl证书(自己签发免费ssl证书)(OPENSSL生成SSL自签证书)
MAC: 自己制作https的ssl证书(自己签发免费ssl证书)(OPENSSL生成SSL自签证书) 前言 现在https大行其道, ssl又是必不可少的环节. 今天就教大家用开源工具openssl自己生成ssl证书的文件和私钥 环境 MAC电脑 openssl工具自行搜索安装 正文 1、终端执行命令 //生成rsa私钥&…...
mac配置Jmeter环境
mac配置Jmeter环境 一、安装jmeter二、Jmeter目录结构三、汉化Jmeter四、改变主题外观五、jmeter安装第三方插件六、jmeter基础入门案例 一、安装jmeter 第一步先自行配置好电脑的jdk环境 1、官网下载jar包 https://jmeter.apache.org/download_jmeter.cgi 2、解压到软件你自己…...
Linux虚拟化————KVM
1、安装kvm虚拟化套件 [rootbogon ~]# yum -y install virt* 2、启动服务 [rootbogon ~]# systemctl start libvirtd [rootbogon ~]# systemctl status libvirtd ● libvirtd.service - Virtualization daemonLoaded: loaded (/usr/lib/systemd/system/libvirtd.service; di…...
【b站李同学的Lee】Part 2 模块化开发 NodeJS+Gulp基础入门+实战
课程地址:【NodeJSGulp基础入门实战】 https://www.bilibili.com/video/BV1aE411n737/?share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 目录 4 Node.js模块化开发 4.1 JavaScript开发弊端 4.1.1 文件依赖 4.1.2 命名冲突 4.2 生活中的…...
AI大模型日报#0415:贾佳亚团队新作王炸、马斯克首款多模态大模型、ChatGPT to B
导读: 欢迎阅读《AI大模型日报》,内容基于Python爬虫和LLM自动生成。目前采用“文心一言”生成了每条资讯的摘要。标题: 融合ChatGPTDALLE3,贾佳亚团队新作开源:识图推理生图一站解决 摘要: 贾佳亚团队推出了多模态模型Mini-Gem…...
基于GRU实现评论文本情感分析
一、问题建模 在线评论的细粒度情感分析对于深刻理解商家和用户、挖掘用户情感等方面有至关重要的价值,并且在互联网行业有极其广泛的应用,主要用于个性化推荐、智能搜索、产品反馈、业务安全等。此博文,共包含6大类20个细粒度要素的情感倾…...
【C 数据结构】线性表
文章目录 【 1. 线性表 】【 2. 顺序存储结构、链式存储结构 】【 3. 前驱、后继 】 【 1. 线性表 】 线性表,全名为线性存储结构,线性表结构存储的数据往往是可以依次排列的(不考虑数值大小顺序)。 例如,存储类似 {1…...
C++初级----list(STL)
1、 list介绍 1.1、 list介绍 1.list是可以在常数范围内在任意位置进行插入和删除的序列式容器,并且该容器可以前后双向迭代。 1. list的底层是双向链表结构,双向链表中每个元素存储在互不相关的独立节点中,在节点中通过指针指向 其前一…...
web安全学习笔记(9)
记一下第十三课的内容。 准备工作:在根目录下创建template目录,将login.html放入其中,在该目录下新建一个reg.html。在根目录下创建一个function.php 一、函数声明与传参 PHP中的函数定义和其他语言基本上是相同的。我们编辑function.php …...
【Python-基础】字符串合集
字符串格式化 f # 例如: # f{train_path}/{f}: 将train_path字符串和f字符串结合 # f{root}.csv:将root字符串和.csv字符串结合判断字符串是否以…结尾 root.endswith(".csv") # True未待完续…...
Scala之List
列表 不可变列表(List) 在Scala中,通过List来定义不可变列表,需要注意的是,List本身是一个抽象类,所以并不能直接使用List来构建对象,需要使用它的伴生对象来构建 package com.fesco.listimport scala.::object ListD…...
Springboot+Vue项目-基于Java+MySQL的在线视频教育平台系统(附源码+演示视频+LW)
大家好!我是程序猿老A,感谢您阅读本文,欢迎一键三连哦。 💞当前专栏:Java毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀 Python毕业设计 &…...
Java IO流-字节流
简介 IO流的输入与输出,都在站在内存的角度来看的,因为毕竟是和内促你打交道的嘛! 分类 IO流是可以根据方向,或者最小单位进行划分的 上述两两结合一下,就得到四种大的分类 IO流的继承体系 字节输入流InputStream 创建…...
第十五届蓝桥杯复盘python大学A组——试题B 召唤数学精灵
按照正常思路解决,由于累乘消耗大量时间,因此这不是一个明智的解决方案。 这段代码执行速度非常慢的原因在于它试图计算非常大的数的阶乘(累乘),并且对于每一个i的值都执行这个计算。阶乘的增长是极其迅速的ÿ…...
网络通信——常见结构及强联网游戏和弱联网游戏区别
声明:本文为个人笔记,用于学习研究使用非商用,内容为个人研究及综合整理所得,若有违规,请联系,违规必改。 网络通信——常见结构及强联网游戏和弱联网游戏区别 文章目录 网络通信——常见结构及强联网游戏和…...
如何安装PyFluent
0.什么是PyFluent? 官方介绍如下: PyFluent 是 PyAnsys 生态系统的一部分, 允许您在所选的 Python 环境中结合使用 Fluent 与其他 PyAnsys 库和外部 Python 库一起使用。 PyFluent 实现了客户端-服务器体系结构。它使用谷歌遥控器 过程调用或 gRPC 接…...
Qt 2 QMapQHashQVector类实例
1. QMap // 1:QMap的使用// 创建一个QMap 实例 key 为 QString value 为 intQMap<QString,int> Grade;// 插入方式有两种插入方式// 1.map[key] valueGrade["语文"] 90;Grade["数学"] 120;// 2.map.insert(key,value);Grade.insert("英语&qu…...
使用Git将文件夹上传到Github以及使用Git LFS上传大文件
使用Git将文件夹上传到Github以及使用Git LFS上传大文件...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为:煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例,提供抽象制作饮品基类,提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题: 下面创建一个简单的Flask RESTful API示例。首先,我们需要创建环境,安装必要的依赖,然后…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...
