宁波网站推广方案,汉中微信网站建设推广,网站建设存在的问题有哪些,外贸工厂网站做seo多吗文章目录JavaScript 简介JavaScript 发展史ECMAScript基本语法与 HTML 结合方式数据类型类型转换非 number 转成 number非 boolean 转成 boolean特殊语法变量运算符双等号#xff08;#xff09;全等号#xff08;#xff09;流程控制语句switch...casewhilefor 循环对象Fu…
文章目录JavaScript 简介JavaScript 发展史ECMAScript基本语法与 HTML 结合方式数据类型类型转换非 number 转成 number非 boolean 转成 boolean特殊语法变量运算符双等号全等号流程控制语句switch...casewhilefor 循环对象Function创建函数JS 函数奇葩的特点Array创建数组特点RegExp创建正则对象GlobalDOM核心 DOMDocument 文档对象Element 元素对象Text 文本对象Node 节点对象Node 节点共有的方法事件事件的概念关于事件对象的概念常用的事件绑定事件注册事件处理程序HTML DOMBOMNavigatorWindow 窗口对象ScreenHistoryLocationJavaScript 简介
JavaScript 是一门客户端脚本语言运行在客户端浏览器中的。每一个浏览器都有 JavaScript 的解析引擎 注脚本语言不需要编译直接就可以被浏览器解析执行了。
JavaScript 可以用来增强用户和 html 页面的交互过程可以来控制 html 元素让页面有一些动态的效果增强用户的体验。
JavaScript 发展史
1.1992年 Nombase公司开发出第一门客户端脚本语言专门用于表单的校验。命名为C-- 后来更名为ScriptEase 2.1995年Netscape(网景)公司也开发了一门客户端脚本语言 LiveScript。后来请来SUN公司的专家修改LiveScript命名为JavaScript 3.1996年 微软抄袭JavaScript开发出JScript语言 4.1997年ECMA(欧洲计算机制造商协会)制定出客户端脚本语言的标准 ECMAScript就是统一了所有客户端脚本语言的编码方式。
JavaScript ECMAScript JavaScript自己特有的东西(BOMDOM)
ECMAScript
基本语法
与 HTML 结合方式
1.内部 JS 定义 script 标签标签体内容就是 JS 代码
2.外部 JS 定义 script 标签通过 src 属性引入外部的 JS 文件
注意 1.script 标签可以定义在 HTML 页面的任意地方但是定义的位置会影响执行的顺序。 2.script 标签可以定义多个
数据类型
1.基本数据类型 也叫原始数据类型。
1.1.number 数字 整数、小数、NaN
NaNnot a number一个不是数字的数字类型。 NaN 和任何数运算得到的还是 NaN。
1.2.string 字符串 单引号和双引号都可以“abc”“a”‘a’
1.3.boolean true or false
1.4.null 一个对象为空的占位符
1.5.undefined 未定义 如果一个变量没有给初始化值则被默认赋值为 undefined
2.引用数据类型 对象
类型转换
非 number 转成 number
正号与负号会自动类型转换即将非 number 的字面值自动转换成 number 类型的数值。
1.string ➜ number 按字面值转换如果字面值不是数字则转成 NaN。 例如
var a 123; // 正号会让后面的字符串“123”自动转换成number类型因为“123”的字面量是数字所以会得到数字类型的值123var b abc; // 字符串“abc”不是数字所以会转成 NaN2.boolean ➜ number true 转成 1false 转成 0。
var f1 true; // 1
var f2 false; // 0非 boolean 转成 boolean
1.number ➜ boolean number0或NaN转成false其它转成true。
例如
var num 2;
document.write(!num); // 数字2转成true那么!true就是false2.string ➜ boolean 空字符串转成 false其它非空字符串转成 true。
3.null 和 undefined 转成 false
4.对象 ➜ boolean 所有对象都是 true。
特殊语法
1.语句以 ; 结尾如果一行只有一条语句则 ; 可以省略(不建议)
2.变量的定义使用 var 关键字也可以不使用 用定义的变量是 局部变量 不用定义的变量是全局变量(不建议)
变量
变量一小块存储数据的内存空间
Java语言是强类型语言而JavaScript是弱类型语言。
强类型在开辟变量存储空间时定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。
弱类型在开辟变量存储空间时不定义空间将来的存储数据类型可以存放任意类型的数据。
语法
var 变量名 初始化值;运算符
双等号
字符串的比较是按字符的 askii 码按位逐一比较直到得出大小为止。
全等号
全等号在比较之前会先判断类型如果类型不同直接返回 false。
document.write(123 123); // 字符串“123”先转换成number类型的123结果返回true
document.write(123 123); // 全等号要求类型和数值都相同才会返回true而这里类型不同则返回false流程控制语句
switch…case
switch(被检测量){
case 常量1:
语句1;
break;
case 常量2:
语句2;
break;
...
deault:
语句N;
break;
}1.在 Java 中被检测量允许的数据类型byte、short、int、char、枚举(1.5)、String(1.7)
2.在 JS 中被检测量允许任何的原始数据类型。
while
var sum 0;
var num 1;
while (num 100) {sum num;num;
}for 循环
var sum 0;
for (var i 1; i 100; i) {sum i;
}
alert(sum);对象
Function
JS 中的函数其实就是一个对象称为函数对象用来描述函数的对象。
创建函数
创建方式一构造器
var 变量名称即函数名称 new Function(参数列表,方法体);例如
// 创建函数对象
var fun1 new Function(a,b,alert(a););
// 调用函数
fun1(3,4);创建方式二声明定义
function 函数名称(参数列表) {方法体
}例如
// 定义函数
function fun2(a,b) {alert(a b);
}
// 调用函数
fun2(3,4);创建方式三匿名函数
var 变量名称即函数名称 function(形式参数列表) {方法体
}例如
// 定义函数
var fun1 function (a, b) {alert(a b);
};
// 调用函数
fun1(3, 4);JS 函数奇葩的特点
1.JS 函数的声明定义不需要声明参数的数据类型也不需要声明返回值类型
2.无论哪种方式创建的函数其实都是在创建函数对象
3.声明定义函数时允许函数名和参数列表完全相同JS会覆盖前面的函数使用最新定义的函数
4.JS函数的调用其实和函数的参数无关只和函数名称有关。函数声明了参数在实际调用时你可以不传任何参数传参时实参的个数可以少于形参的个数也可以多于形参的个数
例如
// 声明定义函数 fun1
var fun1 function (a, b) {alert(a b);
}// 声明定义相同名称的函数
var fun1 function (a, b) {alert(a - b);
}
// 调用函数 fun1
fun1(3, 4); // 结果是 -15.JS 函数中有一个内置的隐藏对象是一个名称为 arguments 的数组封装了所有的实参作用类似 Java 中的可变参数
例如
/*** 声明定义一个可以计算任意个整数的总和的函数*/
function fun2() {var sum 0;for (let i 0; i arguments.length; i) {sum arguments[i];}return sum;
}// 调用函数
var sum fun2(1, 3, 4);
alert(sum);Array
数组对象
创建数组
创建方式一
var arr new Array(元素列表);创建方式二
var arr new Array(默认长度);创建方式三
var arr [元素列表];示例代码
var array new Array(1,2,3);
var array1 new Array(5);
var array2 [1,2,3];特点
1.数组元素可以任意数据类型且数组元素的数据类型可以不一致
var array3 [1, abc, true, undefined];2.数组长度可变
RegExp
创建正则对象
创建方式一
var reg new RegExp(正则表达式);创建方式二
var reg /正则表达式/;示例代码
// 匹配6个到12个的单词字符并且匹配整个字符串
// 创建正则表达式对象方式一
var reg1 new RegExp(^\\w{6,12}$);
// 创建正则表达式对象方式二
var reg2 /^\w{6,12}$/;
var userName liaowenng;
var flag reg2.test(userName);
document.write(flag); // true正则表达式可以添加修饰符例如
var reg /[0-9]/g; g 表示全字符串扫描i 表示不区分大小写。
Global
全局函数 1.decodeURI() 解码 URI。
2.decodeURIComponent() 解码 URI 组件。
3.encodeURI() 对 URI 进行编码。
4.encodeURIComponent() 对 URI 组件进行编码。
5.escape() 在 1.5 版中已弃用。请使用 encodeURI() 或 encodeURIComponent() 代替。
6.eval() 评估字符串并像脚本代码一样执行它。
7.isFinite() 确定值是否是有限的合法数。
8.isNaN() 确定值是否是非法数字。
9.Number() 将对象的值转换为数字。
10.parseFloat() 解析字符串并返回浮点数。
11.parseInt() 解析字符串并返回整数。
12.String() 将对象的值转换为字符串。
点击查看详情。
DOM
DOM 是 Document Object Model 的首字母缩写译为文档对象模型。将标记语言文档的各个组成部分封装为对象。可以使用这些对象对标记语言文档进行 CRUD 的动态操作即控制 HTML 文档的内容。
如下代码所示获取一个元素对象然后设置元素的内容
// 获取元素对象
var element document.getElementById(ID值);
// 设置元素对象的属性值
element.innerHTML Hello World!;W3C DOM 标准被分为3个不同的部分
1.核心 DOM针对任何结构化文档的标准模型
Document文档对象 Element元素对象 Attribute属性对象 Text文本对象 Comment注释对象 Node节点对象其他5个的父对象
2.XML DOM针对XML文档的标准模型
3.HTML DOM针对HTML 文档的标准模型
核心 DOM
Document 文档对象
Document 对象是 DOM 对象也是节点对象叫文档节点对象。不是元素对象。
获取文档对象
window.document
document获取元素对象 document.getElementById()根据 id 属性值获取元素对象 document.getElementByTagName()根据元素名称获取元素对象返回值是一个数组 document.getElementByClassName()根据 Class 属性值获取元素对象返回值是一个数组 document.getElementByName()根据 name 属性值获取元素对象返回值是一个数组
创建其它 DOM 对象 createAttribute(name) createComment() createElement() createTextNode()
Element 元素对象
在 HTML DOM 中Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
元素也可以拥有属性。属性是属性节点。
Text 文本对象
创建文本节点对象
document.createTextNode();Node 节点对象
所有 DOM 对象都可以认为是一个节点。Node 相当于是 Element 的父类。所以 Node 定义的方法 Element 对象都可以使用。
在 HTML DOM 文档对象模型中每个部分都是节点
1.文档本身是文档节点 2.所有 HTML 元素是元素节点 3.所有 HTML 属性是属性节点 4.HTML 元素内的文本是文本节点 5.注释是注释节点
Node 节点共有的方法
增删改查 DOM 树 appendChild()向节点的子节点列表的结尾添加新的子节点 removeChild()删除并返回当前节点的指定子节点 replaceChild()用新节点替换一个子节点
事件
某些组件被执行了某些操作后触发某些代码的执行。
事件某些操作例如单击、双击、键盘按下、鼠标移动等
事件源发生事件的组件例如按钮、文本输入框等
监听器事件处理程序例如一个函数、一段代码等
注册监听器将事件源、事件、监听器绑定在一起。当某个事件源发生了某个事件则会触发执行对应的监听器。
点击查看更多关于事件的内容。 点击查看更多关于事件的内容。
事件的概念
HTML 事件是发生在 HTML 元素上的“事情”。HTML 事件可以是浏览器或用户做的某些事情。
HTML DOM 事件允许 JavaScript 在 HTML 文档中的元素上注册不同的事件处理程序。
通过 JavaScript 代码HTML 允许您向 HTML 元素添加事件处理程序。
JavaScript 允许在事件被侦测到时执行代码。
当在 HTML 页面中的元素发生事件时JavaScript 能够“应对”这些事件。
关于事件对象的概念
当 HTML 中发生事件时该事件属于某个事件对象例如鼠标单击事件属于 MouseEvent 对象。
所有事件对象均基于 Event 对象并继承其所有属性和方法。也就是说 Event 所有事件对象的父对象。
特别强调下这里说的 Event 对象有点类似于 Java 中类的概念。鼠标单击事件相当于一个具体的事件实例属于 MouseEvent 这个类其实 MouseEvent 类有很多事件实例例如onmousedown、onmouseenter、onmouseleave 等在 w3school 中称之为事件类型。
区别在于发生了某个事件会产生事件所属的事件对象例如发生了 click 事件会产生 MouseEvent 对象发生 mousedown 事件也会产生 MouseEvent 对象但是这两种事件所产生的 MouseEvent 对象不是同一个因为读取事件对象的属性 type 获得的值不同。说明发生了 click 事件会产生一个属于 MouseEvent 类型的对象这个对象就是 MouseEvent 的实例按理应该叫 click 事件对象只是属于 MouseEvent 类型而已。
常用的事件
1.点击事件 1.1.onclick 单击事件 1.2.ondblclick 双击事件
2.焦点事件 2.1.onblur 失去焦点事件。一般用于表单校验 2.2.onfocus 获得焦点事件
3.加载事件 3.1.onload 在对象已加载时发生此事件
页面加载完后再执行 JS 代码。
例如页面全部加载完后再给元素注册事件监听器 // 页面加载完之后再给元素注册事件监听器
window.onload function () {var div1 document.getElementById(div1);// 注册事件监听器div1.onclick function () {// 设置元素的class属性值div1.className d1;};
};4.鼠标事件 4.1.mousedown 当用户在元素上按下鼠标按钮时发生此事件。 4.2.mouseenter 当指针移动到元素上时发生此事件。 4.3.mouseleave 当指针从元素上移出时发生此事件。 4.4.mousemove 当指针在元素上方移动时发生此事件。 4.5.mouseout 当用户将鼠标指针移出元素时发生此事件。 4.6.mouseover 当指针移动到元素时发生此事件。 4.7.mouseup 当用户在元素上释放鼠标按钮时发生此事件。 4.8.mousewheel 不推荐使用。请改用 wheel 事件。
5.键盘事件 5.1.keydown 当用户正在按下键时发生此事件。 5.2.keypress 某个键盘按键被按下并松开发生此事件 5.3.keyup 当用户松开键时发生此事件。
6.选中和改变 6.1.change 当form元素的内容、选择的内容或选中的状态发生改变时发生此事件 6.2.select 用户选择文本后对于input和textarea发生此事件
7.表单事件 7.1.submit 提交按钮被点击时发生此事件。在提交表单时发生此事件。
特别注意事件源不是提交按钮而是表单元素 from。也就是说提交按钮被点击时表单元素 form 发生了 submit 事件所以应该是在表单元素上注册提交事件监听器。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript !srcfunction checkForm() {// 返回true才会真正提交表单项的数据返回false则不会提交return true;}/script
/head
body
!--
JS 引擎会将属性 onsubmit的装入到一个内部的函数体中
function () {return checkForm();
}
所以必须加上return那么内部函数才能返回true或false。否则没有返回值则会提交表单。注意onsubmit属性没有值或者值为true会提交表单数据
--
form actionhttps://www.baidu.com onsubmitreturn checkForm();姓名input nameusername typetext年龄input nameage typetextinput typesubmit value提交/form
/body
/html7.2.reset 重置按钮被点击发生此事件。重置表单时发生此事件。
绑定事件注册事件处理程序
方式一 直接在 HTML 标签上指定事件属性属性值就是 JS 代码。 缺点HTML 标签与事件属性、JS 代码耦合不利于维护。
方式二 通过 JS 获取元素对象再对元素对象中事件属性赋值。 注意JS 代码的执行必须在 HTML 标签加载后执行。所以 JS 代码需要写在 HTML 文档的最后面比较稳妥。
演示代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDOM的演示代码/title
/head
body
img idtx1 srcimage/tx01.jpeg alt头像
!-- 绑定事件方式一--
img idtx2 srcimage/tx01.jpeg alt头像 onclickthis.src image/tx02.jpeg;
script// 绑定事件方式二// 1.先定义函数function fun() {tx1.src image/tx02.jpeg;}// 2.获取图像元素对象var tx1 document.getElementById(tx1);// 3.注册点击事件处理程序tx1.onclick fun;// 只能指定函数对象/script
/body
/htmlHTML DOM
1.innerHTML 属性。
例如给 id 值为 div1 的 div 元素内部添加一个输入框
var div1 document.getElementById(div1);
div1.onclick function () {div1.innerHTML input typetext;
};2.样式控制
2.1.使用元素对象的 style 属性来控制样式。
例如将 id 值为 div1 的 div 元素的边框设置为 2px solid red
var div1 document.getElementById(div1);
div1.onclick function () {div1.style.border 2px solid blue;
};2.2.先通过类选择器设置好样式然后通过元素对象的 className 属性设置 class 属性的值从而达到元素样式的控制。
例如
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/*先通过类选择器设置好样式*/.d1 {border: 1px solid red;width: 200px;height: 200px;}/style
/head
body
div iddiv1div
/div
script !srcvar div1 document.getElementById(div1);div1.onclick function () {// 设置元素的class属性值div1.className d1;};/script
/body
/htmlBOM
BOM 是 Browse Object Model 的首字母缩写译为浏览器对象模型。 将浏览器各个组件封装成对象。
Navigator
浏览器对象。
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。
虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器但其他实现了 JavaScript 的浏览器也支持这个对象。
Navigator 对象的实例是唯一的可以用 Window 对象的 navigator 属性来引用它。
Window 窗口对象
特点 1.Window 对象不需要创建可以直接使用 window 引用window.方法名();。
2.对象名称 window 可以省略即 window 引用可以省略。
方法 1.与弹出框有关的方法: 1.1.alert() 显示带有一段消息和一个确认按钮的警告框。 1.2.confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 1.2.1.如果用户点击确定按钮则方法返回 true 1.2.2.如果用户点击取消按钮则方法返回 false 1.3.prompt() 显示可提示用 户输入的对话框。 1.3.3.返回值获取用户输入的值
2.与打开关闭有关的方法 2.1.close() 关闭浏览器窗口。 谁调用我我关谁
2.2.open() 打开一个新的浏览器窗口 返回新的Window对象
3.与定时器有关的方法 3.1.setTimeout() 定时任务 在指定的毫秒数后调用函数或计算表达式。 返回值是一个唯一的 ID 值。
示例代码
// var t1 setTimeout(fun();, 2000);
var t2 setTimeout(fun, 2000);
function fun() {alert(boom~~);
}3.2.clearTimeout() 取消任务 取消由 setTimeout() 方法设置的timeout。
示例代码
var t2 setTimeout(fun, 2000);
function fun() {alert(boom~~);
}
// 取消定时任务
clearTimeout(t2);4.4.setInterval() 周期任务 按照指定的周期(以毫秒计)来调用函数或计算表达式。 返回值是一个唯一的 ID 值。
4.5.clearInterval() 取消周期任务 取消由 setInterval() 设置的 timeout。
Screen
显示器屏幕对象
History
历史记录对象
Location
地址栏对象。
1.获取 Location 对象
1.1.window.location 1.2.location
2.方法 2.1.reload() 重新加载当前文档
点击查看详情
