技术标签: css html5 前端 html javascript
HTML
是一种标记语言,用来结构化我们的网页内容并赋予内容含义,例如定义段落、标题和数据表,或在页面中嵌入图片和视频。CSS
是一种样式规则语言,可将样式应用于 HTML 内容,例如设置背景颜色和字体,在多个列中布局内容。JavaScript 最初被称为 LiveScript,由 Netscape(Netscape Communications Corporation,网景通信公司)公司的布兰登·艾奇(Brendan Eich)在 1995 年开发(这哥们在两周之内设计出了JavaScript语言。你没看错,这哥们只用了10天时间。)。在 Netscape 与 Sun(一家互联网公司,全称为“Sun Microsystems”,现已被甲骨文公司收购)合作之后将其更名为了 JavaScript。
图:布兰登·艾奇,JavaScript 创始人
之所以将 LiveScript 更名为 JavaScript,是因为 JavaScript 是受 Java 的启发而设计的,因此在语法上它们有很多相似之处 ,JavaScript 中的许多命名规范也都借鉴自 Java,还有一个原因就是为了营销,蹭 Java 的热度。
同一时期,微软和 Nombas(一家名为 Nombas 的公司)也分别开发了 JScript 和 ScriptEase 两种脚本语言,与 JavaScript 形成了三足鼎立之势。它们之间没有统一的标准,不能互用。为了解决这一问题,1997 年,在 ECMA(欧洲计算机制造商协会)的协调下,Netscape、Sun、微软、Borland(一家软件公司)组成了工作组,并以 JavaScript 为基础制定了 ECMA-262 标准(ECMAScript)。第二年,ISO/IEC(国际标准化组织及国际电工委员会)也采用了 ECMAScript 作为标准(即 ISO/IEC-16262)。
JavaScript与ECMAScript的关系:
本质上都跟一门语言有关,一个是语言本身的名字,一个是语言的约束条件,后者是前者的规格,前者是后者的一种实现。
ECMAScript
: 构成了JS的核心语法
BOM
:Browser Object Model【浏览器对象模型】,用来操作浏览器上的对象
DOM
:Document Object Model【文档对象模型】,用来操作网页中的元素
ECMAScript
: 定义了javascript的语法规范,描述了语言的基本语法和数据类型BOM
(Browser Object Model): 浏览器对象模型
DOM
(Document Object Model): 文档对象模型
总结
: JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果
在 HTML 中使用 JS 可以用以下几种方式实现:
行内式,可以在 html 元素中直接用使用 js 语句,但是一般都是调用函数或简短的语句。
<input type="button" value="Click" onclick="alert('Hellow World')">
内嵌式,一般用于实现比较小的功能,代码不长的情况
<script>
alert('Hello World');
</script>
外部JS文件,最常见的方式
<script src="js路径"></script>
// 单行注释
/* 多行注释 */
alert(msg) // 浏览器弹出框
console.log(msg) // 浏览器控制台打印输出信息
prompt(info) // 浏览器弹出输入框,用户可以输入
confirm()
onclick
鼠标点击左键ondbclick
鼠标双击oncontextmenu
鼠标点击右键mousedown
鼠标按键被按下mouseup
松开鼠标按键onselect
文本被选中oncopy
元素内容被复制onmouseenter
鼠标移动到事件监听的元素内(不区分子元素)onmouseover
鼠标移动到有事件监听的元素或它的子元素内onmouseleave
鼠标离开元素外(不区分子元素)onmouseout
鼠标离开元素,或它的子元素外onfocus
获得鼠标焦点(点击input输入框)onblur
失去鼠标焦点(进入其他input输入框)onmousemove
鼠标移动onmouseup
鼠标弹起onmousedown
鼠标按下
HTML DOM 能够通过 JavaScript 进行访问(也可以通过其他编程语言)。在 DOM 中,所有 HTML 元素都被定义为对象。我们可以通过 Javascript 对这些对象操作,改变 HTML 元素的内容。
可以通过标签中的id属性来获取这个标签中的值
<div id="a">This is new Element</div>
<script>
// 页面文档从上往下加载,需要将 script 代码写在下边
var dom = document.getElementById('a');
// 显示id为new的对象中内容
console.log(dom);
// 可以打印我们返回的元素对象,更好的查看里边的属性和方法
console.dir(dom);
</script>
ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。
变量是程序在内存中申请的一块用来存放数据的空间。通过变量名称我们可以使用或修改保存在系统中的对应的数据。
Js 是一种弱类型或者说动态语言,不用提前声明变量的类型,变量的类型会自动判断。即使赋值之后,变量的类型根据重新赋值的数据类型同样进行改变。
var a; // 声明一个名称为a的变量
a= 12; // 给a这个变量赋值为12
var age = 12
var name = 'Tom'
name = 'OO' // 再次给相同变量赋值则不用 var 进行初始化
var name = prompt('请输入你的名字')
alert(name)
myName
//利用js输出语句进行打印
//F12在控制台上查看
console.log(变量名);
NaN
非数字 Not a Number
var a="字符串";
//字符串转义符
\n //换行
\r //回车
\\
\'
\"
\t
\b // 空格
\xnn // 16进制字符,如 \x41 代表 'A'
\unnn // 16进制 unicode 字符, 如 \u03a3 代表∑
//字符串长度
变量名.length
布尔型 Boolean 只有两个值,一个是 true,代表1; 一个是 false,代表0
一个声明后没有被赋值的变量会有一个默认值 undefined
变量被声明了,但没有赋值时,就等于undefined。
调用函数时,应该提供的参数没有提供,该参数等于undefined。
对象没有赋值的属性,该属性的值为undefined。
函数没有返回值时,默认返回undefined。
undefined 和 null 的区别
只设置了null作为表示"无"的值。根据C语言的传统,null被设计成可以自动转为0。JavaScript的最初版本是这样区分的:null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。
typeof()//查看数据类型
null //返回object类型
toString()//转换为字符串类型
parseInt()//转换为数字类型
parseFont()//转换浮点型
Number()//强制转换
//隐性转换,可以用 - * / (加号正能用作正负值将字符串转为数字型,如果用在变量后边则变为拼接字符串)
Boolen()//转换为布尔类型
表达式:任何能代表值的式子
+ - * / %
浮点数运算精度问题,尽量避免用浮点数直接进行运算
++i; // 前置递增(先自加后返回)
--i; // 前置递减
i++; // 后置递增(先返回值,后自增)
i--; // 后置递减
比较运算符,是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false)作为运算结果。
// 普通比较运算符
<
>
>=
<=
== // 不会比较数据类型 (1 == '1' 为真)
=== // 会比较数据类型
!=
!== // 全不等(包括数据类型)
- 比较运算符两侧表达式先转为布尔型再进行比较
- ‘0’ 用 Boolen() 做判断的时候是 true,但是用 == 比较运算符和布尔值比较的时候 ‘0’ 是 false,但 ‘0’ == 0 是真
- undefined 和 null 在 Boolen() 做判断的时候是 flase,但是用 == 比较的时候他们不等于 false
- NaN 和任何值都不相等,包括它本身,即 NaN == NaN 为假
&& 与
\|\| 或
! 非
+=
-=
*=
/=
.、[ ]、( ) 从左到右
++、--、-、!、new、typeof 从右到左
*、/、% 从左到右
+、- 从左到右
<、<=、>、>=、in、instanceof 从左到右
==、!=、===、!== 从左到右
&& 从左到右
II 从左到右
?: 从右到左
=、*=、/=、%=、+=、-=、&=、^=、!= 从右到左
, 从左到右
if(条件表达式){
//执行代码
}
//双开分支
if(){
}else{
}
///多分支
if(){
}else if(){
}else{
}
如果条件表达式结果为真,则返回表达式1,的值,否则返回表达式2的值
条件表达式 ? 表达式1 : 表达式2
switch(表达式){
case value1:
// 执行语句1
break;
case value2:
// 执行语句2
break;
default:
// 如果无条件满足,最终执行语句
}
开发中表达式通常写为变量,变量值需要和 case 的 value 值全匹配,值和数据必须完全一致
Switch 与 IF 区别
for(初始化变量; 条件表达式; 操作表达式){
// 循环体
}
// 初始化变量: 用 var 声明的一个普通变量,通常用于计数器使用
// 条件表达式: 用来判断每一次循环是否继续执行,是终止的条件
// 操作表达式: 是每次循环最后执行的代码,经常用于计数器变量的更新(递增或递减)
for (外层循环初始化变量; 外层循环表条件达式; 外层操作表达式){
for(内层循环初始化变量; 内层循环表条件达式; 内层操作表达式){
// 循环代码
}
}
while(条件表达式){
// 循环体
}
// while 循环一般需要配一个计数器,然后再循环体内设置一个终止循环,否则会陷入死循环
do {
// 循环体
} while(条件表达式)
//和 while 循环比,do while 循环至少需要执行一次,然后进行判断是否终止循环。
在 Chrome 中 F12 进入调试模式,进入 Sources,在代码行数下断点,然后刷新则会进入到断点
数组可以把一组相关的数据一起存放,并提供方便的访问方式。
// 利用对象创建数组
var list= new Array();
// 利用 [] 快捷创建数组
var list= [];
var list = [1, 2, 3, 'Pink', True];
数组可以通过索引来访问、设置、修改对应的数组元素,可以通过 “数组名[索引]“ 的方式来获取数组中的元素。
var list= ['张三', '李四', '王五'];
// 索引号: 0 1 2
console.log(list); // 输出整个数组所有元素
console.log(list[0]); // 使用 数组名[索引号] 获取数组数组内指定元素的值
list= ['a', 'b', 'c', 'd'];
for (var i = 0; i <= 3; i++) {
console.log(list[i]);
}
arr= ['a', 'b', 'c', 'd'];
console.log(arr.length); // 输出4
var arr = [5, 4, 3, 2, 1];
for (var i = 0; i < arr.length - 1; i++) {
// 外层循环
for (var j = 0; j <= arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
// 声明函数
function 函数名(){
// 函数内部代码,又称为函数体
}
// 调用函数
函数名();
全局变量:
<script>
标签之内,或者是一个单独js文件局部变量:
变量声明在函数内部
函数的形参也可以看做是局部变量
函数执行完毕就会销毁
链式作用域:
var num = 10;
function fn(){
var num = 20;
function fun(){
console.log(num); // 链式作用域,找父集中的变量,如果没有再找上级
}
}
文章浏览阅读6.2k次,点赞6次,收藏26次。我是一个深度学习代码小白,请你用中文写上注释,能让我能轻松理解下面这段代码。注意包含所有函数、调用和参数的注释。以同样的python代码块样式返回你写的代码给我。代码看累了,就看《动手学深度学习》文档:基于PyTorch框架,从底层函数实现基础功能,再到框架的高级功能。努力上路的小白一枚,麻烦路过的大佬指导一二,同时希望能和大家交流学习~争取更新学习这个文档的专栏,记录学习过程。量身定做了一套话术hhh,亲身测试还不错。这个感觉更浅一点儿,之后复习看吧。20天吃掉那只Pytorch。_深度学习程序怎么读
文章浏览阅读2.7w次,点赞126次,收藏1.2k次。耗废1024根秀发,Java学习路线图来了,整合了自己所学的所有技术整理出来的2022最新版Java学习路线图,适合于初、中级别的Java程序员。_java学习路线
文章浏览阅读4.4k次。1.7-savingPNG介绍代码详情函数详解savePNGFile()源码savePNGFile()源码提示savePNGFile()推荐用法处理结果代码链接介绍PCL提供了将点云的值保存到PNG图像文件的可能性。这只能用有有序的云来完成,因为结果图像的行和列将与云中的行和列完全对应。例如,如果您从类似Kinect或Xtion的传感器中获取了点云,则可以使用它来检索与该云匹配的640x480 RGB图像。代码详情#include <pcl / io / pcd_io.h>#incl_pcl::io:savepng
文章浏览阅读936次。吸引妹子的关键点不在于喝什么咖啡,主要在于竖立哪种男性人设。能把人设在几分钟内快速固定下来,也就不愁吸引对口的妹子了。我有几个备选方案,仅供参考。1. 运动型男生左手单手俯卧撑,右手在键盘上敲代码。你雄壮的腰腹肌肉群活灵活现,简直就是移动的春药。2.幽默男生花 20 块找一个托(最好是老同学 or 同事)坐你对面。每当你侃侃而谈,他便满面涨红、放声大笑、不能自已。他笑的越弱_咖啡厅写代码
文章浏览阅读1.2w次,点赞5次,收藏5次。今天 (应该是昨天了,昨晚太晚了没发出去)下午参加了腾讯WXG的面委会面试。前面在牛客上搜索了面委会相关的面经普遍反映面委会较难,因为都是微信的核心大佬,问的问题也会比较深。昨晚还蛮紧张的,晚上都没睡好。面试使用的是腾讯会议,时间到了面试官准时进入会议。照例是简单的自我介绍,然后是几个常见的基础问题:例如数据库索引,什么时候索引会失效、设计模式等。这部分比较普通,问的也不是很多,不再赘述。现在回想下,大部分还是简历上写的技能点。接下来面试官让打开项目的代码,对着代码讲解思路。我笔记本上没有这部分代码,所_腾讯面委会面试是什么
文章浏览阅读382次,点赞3次,收藏4次。AI绘画自动生成器是一种利用人工智能技术,特别是深度学习算法,来自动创建视觉艺术作品的软件工具。这些工具通常基于神经网络模型,如生成对抗网络(GANs),通过学习大量的图像数据来生成新的图像。AI绘画自动生成器作为艺术与科技结合的产物,正在开启艺术创作的新篇章。它们不仅为艺术家和设计师提供了新的工具,也为普通用户提供了探索艺术的机会。随着技术的不断进步,我们可以预见,AI绘画自动生成器将在未来的创意产业中发挥越来越重要的作用。
文章浏览阅读1.7k次。理解为ListView 的三种形式吧ListView 默认构造但是这种方式创建的列表存在一个问题:对于那些长列表或者需要较昂贵渲染开销的子组件,即使还没有出现在屏幕中但仍然会被ListView所创建,这将是一项较大的开销,使用不当可能引起性能问题甚至卡顿直接返回的是每一行的Widget,相当于ios的row。行高按Widget(cell)高设置ListView.build 就和io..._flutter listview.separated和listview.builder
文章浏览阅读1.4k次,点赞4次,收藏14次。废话不多说直接上干货1.js运行机制JavaScript单线程,任务需要排队执行同步任务进入主线程排队,异步任务进入事件队列排队等待被推入主线程执行定时器的延迟时间为0并不是立刻执行,只是代表相比于其他定时器更早的被执行以宏任务和微任务进一步理解js执行机制整段代码作为宏任务开始执行,执行过程中宏任务和微任务进入相应的队列中整段代码执行结束,看微任务队列中是否有任务等待执行,如果有则执行所有的微任务,直到微任务队列中的任务执行完毕,如果没有则继续执行新的宏任务执行新的宏任务,凡是在..._前端面试
文章浏览阅读1k次。(3)若没有查到,则将请求发给根域DNS服务器,并依序从根域查找顶级域,由顶级查找二级域,二级域查找三级,直至找到要解析的地址或名字,即向客户机所在网络的DNS服务器发出应答信息,DNS服务器收到应答后现在缓存中存储,然后,将解析结果发给客户机。(3)若没有查到,则将请求发给根域DNS服务器,并依序从根域查找顶级域,由顶级查找二级域,二级域查找三级,直至找到要解析的地址或名字,即向客户机所在网络的DNS服务器发出应答信息,DNS服务器收到应答后现在缓存中存储,然后,将解析结果发给客户机。_linux
文章浏览阅读7.9k次,点赞26次,收藏66次。HTML DOM——文档元素的操作1、通过id获取文档元素任务描述相关知识什么是DOM文档元素节点树通过id获取文档元素代码文件2、通过类名获取文档元素任务描述相关知识通过类名获取文档元素代码文件3、通过标签名获取文档元素任务描述相关知识通过标签名获取文档元素获取标签内部的子元素代码文件4、html5中获取元素的方法一任务描述相关知识css选择器querySelector的用法代码文件5、html5中获取元素的方法二任务描述相关知识querySelectorAll的用法代码文件6、节点树上的操作任务描述相关_javascript学习手册十三:html dom——文档元素的操作(一)
文章浏览阅读132次。《LeetCode学习》172. 阶乘后的零(java篇)_java 给定一个整数n,返回n!结果尾数中零的数量
文章浏览阅读426次。请注意,本文将要给大家分享的并不是开启公众号的安全操作风险提醒,而是当公众号粉丝给公众号发消息的时候,公众号的管理员和运营者如何能在手机上立即收到消息通知,以及在手机上回复粉丝消息。第一步:授权1、在微信中点击右上角+,然后选择“添加朋友”,然后选择“公众号”,然后输入“微小助”并关注该公众号。2、进入微小助公众号,然后点击底部菜单【新增授权】,如下图所示:3、然后会打开一个温馨提示页面。请一定要..._php微信公众号服务提示