共计 3134 个字符,预计需要花费 8 分钟才能阅读完成。
1 概述
JavaScript 是嵌入在网页中执行的脚本语言,专门实现网页的交互。
劣势:
1,良好的交互性
2,肯定的安全性
3,跨平台性,有浏览器就能够应用 js
1.1CS 和 BS 架构
CS(Client/Server):客户端 —- 服务器构造。C/ S 构造在技术上很成熟,它的次要特点是交互性强、具备平安的存取模式、网络通信量低、响应速度快、利于解决大量数据。因为客户端要负责绝大多数的业务逻辑和 UI 展现,又称为胖客户端。它充分利用两端硬件,将任务分配到 Client 和 Server 两端,升高了零碎的通信开销。C/ S 构造的软件须要针对不同的操作系统零碎开发不同版本的软件,加之产品的更新换代非常快,曾经很难适应百台电脑以上局域网用户同时应用。
BS(Browser/Server):浏览器 —- 服务器构造,是目前利用零碎的倒退方向。BS 是随同着 Internet 技术的衰亡,对 C / S 架构的改良,为了区别于传统的 C /S 模式,特意称为 B / S 模式。在这种构造下,通过 W3 浏览器来进入工作界面,极少局部事务逻辑在前端(Browser)实现,次要事务逻辑在服务器端(Server)实现,造成三层(3-tier)构造。这样使得客户端电脑负荷大大简化(因而被称为瘦客户端),加重了系统维护、降级的收入老本,升高了用户的总体老本(TCO)。
2 在 html 中引入 js
第一种:在 script 标签外部能够书写 JS 代码:
<script>
/* 在 script 标签外部能够书写 JS 代码和 JS 正文 */
alert("引入 JS 的第 1 种形式....");
</script>
第二种、通过 script 标签引入内部的 JS 文件
<!-- 引入 JS 的第二种形式: 引入内部的 JS 文件 -->
<script src="demo.js"></script>
留神:尽量不自闭;标签内不编辑 js 代码;引入文件搁置 head 或 boby 内。
3js 语法
3.1 数据类型
1,数据类型(number)
js 中的数据类型在底层都是浮点型,但在须要时会主动的和整型之间进行转换。
2.4+3.6 后果是 6,而不是 6.0;Infinity 正无穷大
-Infinity 负无穷大
NaN 非数据
2,字符串(string)
JS 中字符串属于根本数据类型,并且 JS 中的字符串类型能够应用单引号或者双引号引起来
var str3="Hel1o JS";// typeof str3--string
var str4=new String("Hello JS");// typeof str4--Object
var aa;
var bb=3;cc='good';
var dd=ee=100;
3,布尔类型(boolean)
值 true 和 false
4,undefined 和 null
undefined 类型的值只有一个,就是 undefined,变量被定义,但未赋值
null 空值,能够用于函数的返回值,示意函数返回的是一个空的对象
5,数组和对象
[] 数组 object
{}对象 object
3.2js 语句
if 分支构造:
if (条件 1){当条件 1 为 true 时执行的代码}else if (条件 2){当条件 2 为 true 时执行的代码}else{当条件 1 和 条件 2 都不为 true 时执行的代码
switch 分支构造:
switch(n){
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
for 循环构造:
for (语句 1; 语句 2; 语句 3){被执行的代码块}
while 循环构造:
while (条件){须要执行的代码}
3.3js 数组
js 数组用于在单个的变量中存储多个值(其实就是一个容器)
js 中的数组能够存储:数值,字符串,布尔值,undefined,null,对象,函数
申明形式一:(1)申明一个空数组
var arr1 = [];
(2)申明一个指定初始值的数组
var arr2 = [88, "Hello", true, 123];
申明形式二:
(3)通过 Array 函数创立一个空数组
var arr3 = new Array();
(4)申明一个指定初始值的数组
var arr4 = new Array(88, "Hello", true, 123);
3.4js 函数
// 定义函数
function add(a, b){return a+b;}
var funName = function ([参数 1, 参数 2,…]){须要执行的代码}
4js 组成
- ECMAScript 形容了 javascript 语言的语法和根本对象
- 文档对象模型 DOM(Document Object Model)与 HTML 网页 API 接口
- 浏览器对象模型 BOM(Browser Object Model),与浏览器进行交互的 API 接口
4.1DOM 树
DOM 是一项 W3C (World Wide Web Consortium) 规范,DOM(Document Object Model)文档对象模型为 JS 操作 html 文档所提供的一套 API,通过这套 API 能够很不便的对 html 元素进行拜访及增删改查操作。
4.2window 对象
window 对象代表浏览器中一个关上的窗口
window.alert("text") 提示信息会话框
window.confirm("text") 确认会话框
window.prompt("text") 键盘输入会话框
window.setIntervel(func, time) 每隔指定工夫 (毫秒) 执行,重复执行
window.clearInterval() 革除工夫距离
window.setTimeout(action,time) 期待指定工夫 (毫秒) 后再执行,执行一次
window.open() 关上新的窗口
window.close() 敞开窗口
window.event 事件对象
window.document 文档对象
window.history 历史对象
window.history.length 浏览过的页面数
window.history.back() 后退
window.history.forward() 后退
window.history.go(i) 后退或后退 i 个页面(i>0 后退,i<0 后退
4.3Document 对象
document 代表整个 HTML 文档,可用来拜访页面中的所有元素
document.URL 在同一窗口关上另一网页
document.fileCreatedDate 文件建设日期,只读属性
document.fileModifiedDate 文件批改日期,只读属性
document.fileSize 大小,只读属性
document.cookie 设置和读出 cookie
document.charset 字符集
document.write() 动静向页面写入内容
document.createElement(tag) 创立指定标签的元素
document.getElementById(id) 取得指定 id 值的元素
document.getElementsByName(name) 取得指定 Name 值的元素
document.getElementsByClassName(name) 通过类名来查找元素
document.body 文档主体,等价于 <body></body>
学会简略应用,前期被 jQuery 封装,在前期被 Vue 框架封装
5 事件
onclick 用户点击 HTML 元素
ondblclick 用户双击 HTML 元素
onchange 内容扭转事件,特地罕用于下拉框
onmouseover 鼠标挪动到 HTML 元素上
onmouseout 鼠标移开 HTML 元素
onkeydown 用户按下键盘按键
onkeyup 用户松开键盘按键
onload 浏览器曾经实现页面加载
onunload 浏览器敞开时执行,但通常无用,用户间接敞开浏览器甚至中断