7免费网站建站,可以做头像的网站有哪些,php网站开发范例,淄博网站制作定制品牌JavaScript 简介
JavaScript#xff0c;简称 js#xff0c;是一种基于对象#xff08;object-based#xff09;和事件驱动#xff08;Event Driven#xff09;的简单的并具有安全性能的脚本语言。
JavaScript 特性 JavaScript 是解释性语言#xff0c;而不是编译性语言…JavaScript 简介
JavaScript简称 js是一种基于对象object-based和事件驱动Event Driven的简单的并具有安全性能的脚本语言。
JavaScript 特性 JavaScript 是解释性语言而不是编译性语言 在支持 JavaScript 的浏览器中运行的过程中没有编译过程而是逐行解释执行。 JavaScript 是一种轻量级的脚本语言script language。 不具备开发操作系统的能力只能用来编写控制其他大型应用程序比如浏览器的脚本。 Javascript 是一种嵌入式语言本身不提供任何 I/O 相关的 API主要通过调用宿主环境host的 API 来工作。 JavaScript 是可插入 HTML 页面的编程代码。插入 HTML 页面后可由所有的现代浏览器执行。
JavaScript 组成 ECMAScriptJavaScript 的核心语法格式使用方法 文档对象模型DOMdocument object modelDOM文档对象模型是 HTML 和 XML 的应用程序接口API。 DOM 将把整个页面规划成由节点层级构成的文档 document 对象 有 一个一个的元素element 浏览器对象模型BOMbrowser object model对浏览器窗口进行访问和操作
JavaScript 特点 脚本语言脚本语言是一种简单的程序是由一些 ASCII 字符构成可以使用任何一种文本编辑器编写。 一些程序语言如 C、C、Java 等都必须经过编译将源代码编译成二进制的可执行文件之后才能运行而脚本语言不需要事先编译只要有一个与其相适应的解释器就可以执行。 脚本语言是指在 web 浏览器内有解释器解释执行的编程语言每次运行程序的时候解释器会把程序代码翻译成可执行的格式。 基于对象的语言非面向对象 面向对象有三大特点封装继承多态缺一不可。 通常基于对象是使用对象但无法利用现有对象模板产生新的对象类型也就是说基于对象没有继承的特点。 注意目前的 js 脚本已经支持创建自定义类继承等 事件驱动在网页中执行了某种操作的动作被称为事件(Event) 比如按下鼠标、移动窗口、选择菜单等都可以视为事件。 当事件发生后可能会引起相应的事件响应。 简单性 变量类型是采用弱类型并未使用严格的数据类型。 安全性JavaScript 不能访问本地的硬盘不能将数据存入到服务器上不能对网络文档进行修改和删除只能通过浏览器实现信息浏览或动态交互 跨平台系统性JavaScript 依赖于浏览器本身与操作平台无关。 只要计算机安装了支持 JavaScript 的浏览器装有JavaScript 解释器JavaScript 程序就可以正确执行。
缺点 部分浏览器兼容性不好 各种浏览器支持 JavaScript 的程度是不一样的支持和不完全支持 JavaScript 的浏览器在浏览同一个带有 JavaScript 脚本的网页时效果会有一定的差距有时甚至会显示不出来。
JavaScript 的版本 ES6 全称 ECMAScript 6.0 是 JavaScript 的下一个版本标准2015.06 发版。 ES6 主要是为了解决 ES5 的先天不足比如 JavaScript 里并没有类的概念但是目前浏览器的 JavaScript 是 ES5 版本大多数高版本的浏览器也支持 ES6不过只实现了 ES6 的部分特性和功能。 ES6 的语法传送门 JavaScript 基础语法
js 在 html 中的引入方式
JS 在 html 中两种引入方式 方式1内嵌式内部脚本在 html 中创建一个 script 标签在标签中写 js 代码 格式 script typetext/javascriptjs代码;
/script方式2外联式外部脚本在 html 页面中使用 script 标签引入外部的 js 文件 一个 js 文件可以被多个 html 页面同时引入 script typetext/javascript src外部js文件的路径/script注意 JavaScript 代码必须位于 script 与 /script 标签之间 一个 HTML 文档中可以出现多个 script 标签 JavaScript 代码的出现次序就是 JavaScript 的执行顺序 如果一个 script 标签引入了外部 js 文件那么这个标签中就不能写 js 代码了会失去作用 如果想要再写 js 代码需要重新创建一个 script 标签 理论上 script 标签可以写在 html 页面中的任意位置在不影响功能的前提下尽量把 script 标签写在页面的下边让浏览器先解析出页面给用户展示再执行 js 的代码页面显示速度快
示例 主 js 文件 !DOCTYPE html
html langen
headmeta charsetUTF-8titleJS两种引入方式/title!--1.内嵌式(内部脚本)--script typetext/javascript//全局函数alert(数据);可以在页面中弹出一个对话框,输出指定的数据alert(1);/script!--2.外联式(外部脚本)--script srcjs/1.js/script
/head
body
/body
/html1.js文件 alert(你好);js 在 js 中的导出导入方式 JavaScript 中模块是一种可重用的代码块它将一些代码打包成一个单独的单元并且可以在其他代码中进行导入和使用。 在导入模块时JavaScript中有两种常用的方式import 和 require import 是 ES6 引入的新特性它允许以声明式的方式导入其他模块中的内容require 是 Node.js 中的特性它允许使用一个函数来加载和导入其他模块 import 和 require 的区别 导入方式 import 导入的方式是使用关键字 import 加上大括号如果需要导入的内容是命名导出的话再加上模块名的方式进行导入。例如 import {func1, func2 } from ./myModule;require 导入的方式是使用 require 函数将需要导入的模块路径作为参数传递给该函数。例如 const myModule require(./myModule);文件类型 import 只能导入 ES6 模块或者使用 Babel 等工具转化为 ES6 模块的代码。require 则可以导入 CommonJS 模块、AMD 模块、UMD 模块以及 Node.js 内置模块等多种类型的模块。 变量提升 在 ES6 中import 语句是静态执行的意味着它们在模块内部的顶层执行并且在模块内部创建一个局部作用域。这意味着导入的变量只在模块内部可见并且不会影响模块外部的变量。因此使用 import 导入的变量是不会被提升的。require 函数是动态执行的这意味着它在运行时执行并且不会在模块内部创建一个局部作用域。因此使用 require 导入的变量是可以被提升的。 注如何理解 import 语句是静态执行的和 require 函数是动态执行的 理解 import 语句是静态执行的和require函数是动态执行的需要先了解这两个概念的含义。 静态执行是指在编译阶段就能够确定其执行结果的代码执行方式。 在 JavaScript 中import 语句属于静态执行的代码也就是说当 JavaScript 引擎执行代码时会在编译阶段对 import 语句进行静态分析确定所导入的模块并在运行时加载这些模块。 动态执行是指在运行时才能确定其执行结果的代码执行方式。 在 JavaScript 中require 函数属于动态执行的代码也就是说当 JavaScript 引擎执行代码时会在运行时动态地确定所需的模块并加载这些模块。 因此可以理解为 import 语句是静态执行的因为在编译阶段就能够确定所导入的模块从而在运行时快速加载这些模块。require 函数是动态执行的因为在运行时才能够确定所需的模块需要动态地加载这些模块。 注意由于 import 语句是静态执行的因此在代码中不能使用变量或表达式作为模块路径只能使用字符串字面量。而 require 函数则可以接受变量或表达式作为模块路径从而动态地确定所需的模块。 导出方式 import 使用ES6的导出方式可以使用命名导出和默认导出两种方式进行导出。例如 // 命名导出
export function func1() {}
// 默认导出
export default {}而 require 使用 CommonJS 的导出方式只能使用默认导出方式进行导出。例如 module.exports {};require 除了可以使用 module.exports 导出模块还可以使用 exports 对象。 实际上exports 对象是 module.exports 的一个引用。 当使用 exports 导出时实际上是向 module.exports 对象添加属性和方法。 模块作用域 在 JavaScript 中每个模块都有自己的作用域模块之间的变量是互相隔离的不会相互干扰。这也是模块化编程的一个主要特点。 在使用 import 导入模块时实际上是在模块内部创建了一个指向被导入模块的引用而不是直接复制模块中的变量。因此当不同的文件中使用 import 导入相同的模块时它们实际上是共享了同一个模块实例所以可以访问和修改同一个模块中的变量。在使用 require 导入模块时实际上是将导入模块中的变量直接复制到可以理解为浅拷贝当前模块的作用域中。因此当不同的文件中使用 require 导入相同的模块时它们实际上是拥有各自独立的模块实例彼此之间不会共享模块中的变量。 需要注意的是如果使用 require 导入的模块中含有可变状态的对象那么在不同文件中修改该对象的变量会相互影响。这也是 require 在某些情况下会产生一些难以预测的副作用的原因之一。而使用 import 导入的模块由于是共享同一个模块实例相对来说更容易管理和控制。 如果使用 require 导入的模块中含有可变状态的对象比如一个对象的属性值可以被修改那么当在不同的文件中修改这个对象中变量时由于 require 会将导入的模块中的变量直接复制到当前模块的作用域中类似于浅拷贝模块中的普通变量例如字符串、数字等是非共享的而对象的变量则是能被修改共用的因此会导致这个对象的变量在不同文件中的值相互影响。 需要注意的是这种影响是由于模块之间共享同一个对象的引用造成的而不是模块本身的问题。因此在编写模块时需要谨慎地处理可变状态的对象尽量避免在不同模块之间共享同一个对象的引用以避免出现不可预测的副作用。 举个例子假设有一个 config.js 模块其中定义了一个可变的对象 config并且在 main.js 和 app.js 两个文件中使用了 require 导入该模块 config.js let config {env: dev,port: 3000
}
module.exports config;main.js const config require(./config.js);
// 修改config对象的属性值
config.port 4000;
console.log(config.port in main.js: ${config.port});app.js const config require(./config.js);
console.log(config.port in app.js: ${config.port});当执行 main.js 和 app.js 时它们都会通过 require 导入 config.js 模块并且 main.js 中修改了 config 对象的 port 属性值。那么当 app.js 输出 config.port 时它实际上输出的是被 main.js 修改后的 port 属性值而不是 config.js 模块原本定义的值。这就是因为 require 导入的模块中含有可变状态的对象或变量在不同文件中修改该对象或变量会相互影响的原因。 js 的三种输出方式 方式1把数据输出到浏览器的控制台console.log(“hello”); 注按 F12 调出控制台 方式2输出到 html 页面的 body 中document.writeln(“200”); 方式3浏览器弹出对话框输出alert(“你好”);
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJS三种输出方式/title
/head
bodyscript//JS三种输出方式//1.把数据输出到浏览器的控制台console.log(hello);//2.输出到html页面的body中document.writeln(200);//3.浏览器弹出对话框输出alert(你好);/script
/body
/htmljs 的变量 js 语言弱类型语言。给变量赋什么类型的值那么这个变量就是什么类型 定义变量 在使用每种数据的时候都可以使用关键字 vares5 特性或 letes6 特性来定义变量 var定义全局变量 作用域在这个 script 标签中都有效作用域大可以先使用变量再定义变量 var 变量名; // 变量没有赋值有默认值undefined
var 变量名a, 变量名b; // 同时声明多个变量
var 变量名 数据值; // 定义变量的同时给变量进行初始化赋值let定义局部变量 只在局部的位置自己所在的块级有效 任何一对花括号 { } 中的语句都属于一个块在花括号里面用 let 定义的所有变量在花括号外都是不可见的称之为块级作用域 必须先定义后使用 let 变量名; // 变量没有赋值有默认值undefined
let 变量名a, 变量名b; // 同时声明多个变量
let 变量名 数据值;定义常量 在 js 中可以使用关键字 const 定义常量常量的值是不能改变的 const 常量名 数据值;常量和变量的命名 以字母下划线或者 $ 开头并且以字母下划线$数字组成 不能使用 关键字 和 保留字 !-- 关键字 --
break/case/catch/continue/debugger/default/in/do/else/finally/for/function/if/try
/instanceof/new/return/switch/this/throw/typeof/var/void/while/with/delete!-- 保留字 --
abstract/enum/int/short/boolean/export/interface/static/byte/extends/long/super/Char
/final/native/synchronized/Class/float/package/throws/Const/goto/private/transient
/debugger/implements/protected/volatile/double/import/public字母的大小写敏感 js 的运算符 类型运算符 typeof返回变量的类型instanceof返回对象是否对象类型的实例 算数运算符 加法。注意字符串数字 表现为拼接而不是将字符串类型转换成数字相加- 减法* 乘法/ 除法% 取模余数 递加-- 递减 赋值运算符 将等号左侧的值或变量值赋值给等号右侧的变量示例x y 先加再赋值左侧示例x y 等价于 x x y- 先减再赋值左侧示例x - y 等价于 x x - y* 先乘再赋值左侧示例x * y 等价于 x x * y/ 先除再赋值左侧示例x / y 等价于 x x / y% 先取模再赋值左侧示例x % y 等价于 x x % y 比较运算符 等于 等值等型! 不相等! 不等值或不等型 大于 小于 大于或等于 小于或等于? 三元运算符 注意 和 的区别 等于判断先判断类型类型一致则直接比较内容如果类型不一致转换为数字类型后再比较内容 等值判断先判断类型类型不一致则直接 false类型一致则继续比较内容内容一致则 true不一致则 false boolean 类型 参与计算或比较时true 转换为 1false 转换为 0 逻辑运算符 逻辑与|| 逻辑或! 逻辑非 条件运算符三目运算符、双元运算符 // 语法
变量名 (condition) ? value1 : value2
// 示例
var a (11 5) ? b : cjs 的布尔运算规则
可以使用一些非布尔类型的值作为布尔值来使用
boolean 类型 true真false假undefined 类型 作为 falsenull 类型作为 falsestring 类型 “”空字符串作为 false非空的字符串作为 truenumber 类型 0 或 0.0 作为 false 使用非 0 的数字作为 trueobject 类型 所有的对象都可以作为 true js 的流程控制语句
分支语句if、switch if 语句 if 语句 - 只有当指定条件为 true 时使用该语句来执行代码if…else 语句 - 当条件为 true 时执行代码当条件为 false 时执行其他代码if…else if…else 语句- 使用该语句来选择多个代码块之一来执行 switch 语句使用该语句来选择多个代码块之一来执行 格式 var 变量n 变量值;
switch(变量n):case 值1:逻辑代码break;case 值2:逻辑代码break;...default:逻辑代码break;代码解释 计算一次 switch 表达式把表达式的值与每个 case 的值进行对比如果存在匹配则执行关联代码 工作原理 首先设置表达式 n通常是一个变量随后表达式的值会与结构中的每个 case 的值做比较如果存在匹配则与该 case 关联的代码块会被执行请使用 break 来阻止代码自动地向下一个 case 运行 break 关键字的作用 如果 js 遇到 break 关键词它会跳出 switch 代码块。即停止 switch 代码块中更多代码的执行以及 case 测试。如果找到匹配并完成任务则随即中断执行break无需更多测试。break 能够节省大量执行时间因为它会“忽略” switch 代码块中的其他代码的执行。switch 代码块中的最后一个 case 可以省略 break 因为代码块在此处会自然结束不必 break 来中断 default 关键字的使用使用 default 关键词来规定匹配不存在时做的事情 循环语句while、do-while、for、for-each while 循环 如果条件为真的话就会重复循环执行大括号包裹的代码块 语法 while (条件){代码块
};do-while 循环 do-while 循环是 while 循环的变体。 该循环会在检查条件是否为真之前执行一次代码块然后如果条件为真的话就会重复这个循环 语法 do {需要执行的代码
} while (条件);for 循环 语法 for (进入循环前执行的语句; 进入循环的条件; 每次循环后执行的语句){ 被执行的代码块
}// 示例
var arr [1,2,3,a,b,c,true,false,1.1,2.2,3.3];
for(var i0; iarr.length; i){console.log(arr[i]);
}增强 for 循环 for-in 格式获取的是数组的索引 for(let i in 数组){ // 使用变量i接收数组的索引值。i是变量名可自定义let 变量名 数组[i]); // 获取数组元素并赋值给变量
}// 示例
var arr [1, 2, 3];
for(let i in arr){console.log(arr[i]); // 打印数组元素
}for-of 格式获取的是数组中的元素 for(let 变量名 of 数组){console.log(变量名);
}// 示例
var arr [1, 2, 3];
for(let v in arr){console.log(v);
}注也可以用 var 定义变量但是推荐使用 let因为 var 定义的是全局变量let 定义的是局部变量 终止循环break、continue、return break 语句立即跳出整个循环即终止循环 continue 语句立即跳出本次循环然后开始循环的一次新迭代 return 语句用于终止函数的执行并指定函数返回的值。return 语句只能出现在函数体内 在函数体内的循环中使用 return 语句终止了整个函数的执行当然也就终止了函数体内的循环 js 的函数 JavaScript 使用关键字 function 定义函数。 函数可以通过声明定义也可以是一个表达式匿名函数 声明定义函数 定义格式 function 函数名(参数列表){函数体;return 返回值;
}注意 函数是没有返回值类型的在函数中写 return 就有返回值不写 return 没有返回值 只写 return 不写具体的返回值则 return 的作用就是结束函数 函数的参数列表不能写数据类型直接写变量名即可 (var a, var b) // 错误
(a,b) // 正确使用格式 // 有返回值的函数:
var 变量 函数名(参数);
// 没有返回值的函数
函数名(参数);匿名函数没有名字的函数 定义格式 function (参数列表){函数体;return 返回值;
}使用格式 可以把匿名函数赋值给一个变量变量名就相当于是函数的名字通过变量名就可以调用函数在 js 中有一些函数的参数需要传递其他的函数就可以使用匿名函数传递例如定时器 js 的事件
事件概述
js 的事件是 js 不可或缺的组成部分。
几个概念
事件源被监听的 html 元素事件某类动作例如点击事件移入移出事件敲击键盘事件等事件与事件源的绑定在事件源上注册上某事件事件触发后的响应行为事件触发后需要执行的代码一般使用函数进行封装 常用的事件
事件名描述onload某个页面或图像被完成加载onreset重置按钮被点击onsubmit提交按钮被点击注意事件源是表单 formonchange用户改变域中内容onclick鼠标点击某个对象ondblclick鼠标双击某个对象onblur元素失去焦点onfocus元素获得焦点onchange用户改变域的内容onmouseover鼠标移入鼠标被移到某元素之上onmouseout鼠标移出鼠标从某元素移开onmousemove鼠标移动onmousedown某个鼠标按键被按下onmouseup某个鼠标按键被松开onkeydown某个键盘的键被按下onkeypress某个键盘的键被按下或按住onkeyup某个键盘的键被松开onselect文本被选定onerror当加载图像时发生错误 事件的基本使用
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejs中的事件/titlescript//定义按钮发生鼠标点击事件的响应函数function butOnclick() {//事件的处理逻辑alert(就点你咋地!);}//定义图片鼠标移入事件的响应函数function imgOnmouseover() {alert(鬼子又来抢花姑娘了!);}//定义文本框修改域内容事件的响应函数function textOnchange() {alert(haha);}/script
/head
body!--按钮发生了点击事件事件源: input typebutton/ 按钮事件: 鼠标点击事件 onclick把事件和事件源绑定到一起: 在按钮标签上,添加一个onclick属性,属性值调用一个函数事件触发之后的响应行为: 定义一个函数,在函数中处理按钮的鼠标点击事件--input typebutton value没事别点我 onclickbutOnclick()/!--鼠标移入事件事件源: dev标签事件: 鼠标移入事件 onmouseover把事件和事件源绑定到一起: 在标签上,添加一个onmouseover属性,属性值调用一个函数事件触发之后的响应行为: 定义一个函数,在函数中处理图片鼠标移入事件--dev width150px height200px styleborder-style:solid onmouseoverimgOnmouseover()鼠标移入就弹窗/dev!--文本框改变域内容事件事件源: 文本框 input typetext/事件: 改变域内容事件 onchange把事件和事件源绑定到一起: 在文本框上,添加一个onfocus属性,属性值调用一个函数事件触发之后的响应行为: 定义一个函数,在函数中处理文本框获取焦点事件--input typeoftext placeholder请输入你想输入的内容 onchangetextOnchange()/
/body
/html页面加载事件onload
onload 事件会在页面或图像加载完成后立即发生。
onload 通常用于 body 元素在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
语法实际使用中以下两种方式二选一 在 HTML 中在 body 标签绑定事件 onload 并指定响应函数 body onloadSomeJavaScriptCode()在 JavaScript 中 window.onloadfunction(){*SomeJavaScriptCode*};
