三大门户网站,苏州建站公司 诚找苏州聚尚网络,微信到wordpress,国外的哪个网站可以做跳转简介
js是解释型语言#xff0c;虽然名字有java#xff0c;但和java#xff0c;c等编译型语言不同#xff0c;它是解释型的#xff0c;类似perl#xff0c;py
历史
90年代最早js 1.0版本是网景navigator2引入的
然后欧洲计算机制造商协会#xff08;ECMA#xff09… 简介
js是解释型语言虽然名字有java但和javac等编译型语言不同它是解释型的类似perlpy
历史
90年代最早js 1.0版本是网景navigator2引入的
然后欧洲计算机制造商协会ECMA制定ECMASript规范
然后微软开发自己的javascript jScript
90年代后期网景navigator4和IE4都支持js但各自的实现方式不同规范也不同让开发者感到复杂。然后W3C通过DOM规范各厂商对界面操作的规范
dom
浏览器加载页面有一个页面结构的内部体系存在内存里叫DOM是树形结构可通过js方便操作dom。
树形结构顶层对象是window对象它也是全局对象具有全局作用域window四个子对象是document locationhistorynavigator。html界面都在document对象下document对象用的也比较多如果需要对document对象操作直接执行document.getElementByNames(...)也可以带全局对象操作window.document.getElementByNames(...)
document有属性document.write(text)但这个好像会覆盖document下其他元素不推荐推荐用dom操作页面对象
如何定义js脚本
两种方法一种是写到html标签里一种是写在js文件里然后在html里用script标签的src属性引入自定义的js文件
// test/test.js
function () {alert(hello world);}
scriptfunction() {alert(hello world);}/script
script src/test/test.js/script
注意如果用src引入外部js文件则html的script标签里不能有任何内容
虽然js文件后缀是.js但浏览器其实可以无视后缀即你后缀不对但文件内容对也能加载出来
创建简单脚本
思考1 js定义在html还是js脚本
js如果在html定义放在head还是body
如果放在body会解释执行但是是按顺序的如果dom没加载出来但js访问了那就会报错所以如果要定义在body需要把script放在body末尾
如果放在head当在body调用时body肯定都已经加载完了放在head更易读也避免了放在body元素未加载完调用js报错问题
思考2 js关于大小写
html不区分大小写 js区分大小写 xhtml区分大小写
注释
单行注释// this is a note
多行注释: /* this is \n another note */
文件大小
带注释的js文件会稍微大点一般生产环境部署会压缩js文件压缩后文件后缀一般是xxx.min.js
关于事件
js用事件处理器处理事件常见的有onClickonMouseOveronMouseOut等这三个几乎可以用于任何html元素
关于空行
html不会处理空行除非你用转义字符表示空行
函数
尝试一下 script
function buttonReport(buttonId, buttonName, buttonValue) {var a button id: buttonId \n;var b button name: buttonName \n;var c button value: buttonValue \n;alert(a b c);
}
/script
div classtestbinput idabc namedef valueghi onclickbuttonReport(this.id, this.name, this.value)/test/div
返回值
函数没返回值的话则是undefined
匿名函数
看个例子 script
var sayHello function () {alert(hello world);};
/script
div classtestbp onclicksayHello()test/p/div
更多函数知识
变量作用域
js有 全局作用域 函数作用域 块级作用域
var可声明全局作用域和函数作用域块级作用域需要用let声明 块的定义可以理解为一个大括号
函数内部如果调用函数外同名变量如果没有在函数里重新用var声明则调用的是全局变量即函数外的变量在函数内改变这个变量外部变量也会改变因为改的是全局变量是全局作用域
如果在函数内部用var重新声明了外部同名变量这时这个变量就是函数作用域的了
用let声明的是块级作用域
this
html标签里调用时使用this表示调用当前的标签对象需注意的是this后加的属性需要元素拥有才能调用否则报错注意注意在注意
如果在js函数内部调用this则this表示的是调用这个函数的父对象
const
用const可以声明常量用const声明的常量不能修改值也不能重新用var定义也不能重新用const定义为其他常量
箭头函数
可以理解为匿名函数的另一种简便写法
var sayHello () alert(hello world)
默认参数
默认参数一般放在参数列表的末尾顺序不能错类似py
dom对象和内置对象
常见用户交互对象方法
alert 类似py的print
confirm 弹出一个模态框 有ok cancel按钮 文本是confirm传入的参数 var sayHello () {confirm(hello world);};
prompt 和confirm类似弹出一个模态框有一个输入框最后的值是你输入的值还提供第二个参数作为输入框里的默认值 var sayHello () {prompt(hello world);}; var sayHello () {prompt(hello world, hello kitty);};
常用元素属性方法
根据id或name访问元素即document.getElementById 注意该方法和document.getElementsByName的区别一个获取的是单元素一个获取的是多元素多元素拿到要再通过下标访问
interHTML闭合标签夹着的内容可通过修改元素的interHTML属性来修改实现
window.history
可通过history的方法forward backward go三个方法访问历史url三个方法执行结果分别为前进后退按执行参数前进或后退n个页面
window.location
该属性包含了当前页面url信息
应用
href可以设为location.href实现访问
location.reload()表示刷新页面
window.navigator
保存浏览器本身数据 这个数据长让人捉摸不透 感觉书里不很建议用这个属性
日期和时间
var abc new Date();
var year abc.getFullYear();
var month abc.getMonth();
var date abc.getDate();
var day abc.getDay();
var hour abc.getHours();
var minutes abc.getMinutes();
var seconds abc.getSeconds();
with
类似py例如调用某个模块math的方法使用with省去了对模块名的访问
数字和字符串
全局方法
toString
将一个数字转化为字符串 toFixed
将数组按指定小数位返回 toExponential
将数字按指数表示法返回
Number.isNaN Number.parseFloat Number.parseInt
将字符串解析为整数或浮点数还可以指定数字的基默认是十进制也可以指定解析为八进制十六进制等
Number.isFinite
判断数字是否无穷 字符串操作
可以用单引号或双引号定义字符串类似于py单引号字串可以包含双引号反之亦然
length属性
length属性表示字符串长度这是一个只读属性无法给他赋值即使赋值了length也保持不变
模板字符串
类似py 或 perl的模板字符串用反引号定义反引号内的转义字符无需加反斜杠表示 数组
创建数组
两种方法1 var test new Array(); 2 var test []; 一个注意点超过列表范围的赋值前面会自动填充undefined类似py但py会报错 常用方法 遍历数组
foreach map for of 三点操作符
类似py的解包 可能都是解释型语言吧 js事件处理
常见事件
鼠标事件
onclick onmousedown onmouseenter onmouseleave onmousemove onmouseover oncontextmenu ondblclick
键盘事件
onkeydown onkeypress onkeyup
dom事件
onerror onload onresize onscroll
表单事件
onblur onchange onfocus onreset onselect onsubmit
事件处理器
内联事件处理器
即内联在html元素里的事件处理器需要注意不同元素支持的事件不同内联定义需要定义元素支持的事件处理器
事件处理函数作为dom属性赋值给事件处理器
即先获取元素再元素.onclick function () {alert(9);}这种形式
addEventListener
先获取元素再element.addEventListener(click, function () {alert(666);})
删除事件监听器element.removeEventListener(click, func_name)
注意如果需要对一个事件添加多个处理器如果
element.onclick funca; element.onclick funcbfuncb会覆盖funca
如果用addEventListener则不会覆盖
event对象
addEventListener时监听处理函数需要定义一个参数表示事件对象。事件对象有很多方法 不知道不提供事件参数可不可以 没试过
阻止默认行为
e.preventDefault()阻止事件的默认行为如果只alert事件还是会正常发生
事件冒泡与捕获
addEventListener第三个参数接受布尔值参数表示是否事件冒泡捕获。一般事件触发先出发内层元素事件然后逐步触发外层元素事件这个默认第三个参数是false会有这现象如果为true当事件产生时会先触发和最外层元素关联的事件处理器最后触发和最内层元素相关的事件处理器
通过e.stopPropagation()方法可组织事件进一步冒泡
通过e.target属性可看到事件最早是再哪个元素触发的
这个属性可用于事件捕获 你想 这个元素事件触发了但最先触发的是内层元素的事件最后才会触发本元素事件 如果想本元素先触发 就需要捕获模式 第三个参数设为true
思考1 鼠标事件顺序
先后mousedown mouseup click
思考2 匿名事件处理器如何删除
删除不了 如果要删 必须具名函数
控制语句
只判断值是否相等 判断值和类型是否同时相等 循环
while, do...while, for, for... in四种
定时器
setTimeout用来在指定时间后执行动作从动作触发到动作发生这段事件如果想取消动作可以调用cleartimeout方法参数传递用setTimeout的返回值
setInterval是周期任务如果想取消也是先保存setinterval的值调用clearInterval取消定时任务
面向对象编程
创建对象几种方法1 new Object() 2 定义函数function test() {this.info 666}; var a new test() 3 通过prototype继承或扩展。注意继承让子类的prototype等于一个父类对象新建的实例即可
对象进阶
和上一章相比可以用关键字class代替函数式创建实例。区别class省去了很多function关键字用属性和方法取而代之可以理解为一种语法糖class还有构造函数constructor产生对象的调用方式一样直接new
constructor构造函数在class不可缺省 constroctor构造函数也不支持多态 只能有一个
getter和setter symbol
一种js数据类型特点是独立比如1212为true但Symbol(12)Symbol(12)为false class继承
class关键字继承语法为class son extends parent {constroctor...}
子类调用父类方法直接用super关键字
功能检测
可使用if来检测函数是否存在判别条件为document.func_name就行用自身的逻辑值
或者也可以用typeof document.func_namea function判别
dom脚本编程
