一、JS定义和特点
-
JavaScript是由***scape(网景)公司研发出来的一种在它的Navigator浏览器上执行的程序语言。
-
JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。
-
JavaScript组成
-
ECMAScript:JavaScript的核心,语法格式,使用方法
-
文档对象模型(DOM,document object model):DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档 document对象 有 一个一个的元素(element)
-
浏览器对象模型(BOM,browser object model)对浏览器窗口进行访问和操作 window对象扩展:JScript:微软推出的类似JavaScript的语言
特点:
-
脚本语言
脚本语言是一种简单的程序,是由一些ASCII字符构成,可以使用任何一种文本编辑器编写。一些程序语言(如C、C++、Java等)都必须经过编译,将源代码编译成二进制的可执行文件之后才能运行,而脚本语言不需要事先编译,只要有一个与其相适应的解释器就可以执行。
脚本语言是指在web浏览器内有解释器解释执行的编程语言,每次运行程序的时候,解释器会把程序代码翻译成可执行的格式。
-
基于对象的语言 非面向对象 ,面向对象有三大特点(封装,继承,多态)缺一不可。
通常"基于对象"是使用对象,但无法利用现有对象模板产生新的对象类型,也就是说"基于对象"没有继承的特点。
注意:目前的js脚本已经支持创建自定义类,继承等
-
事件驱动 在网页中执行了某种操作的动作,被称为"事件"(Event),比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。
-
简单性 变量类型是采用弱类型,并未使用严格的数据类型。
var a,b,c; a=123; b="abc"; c=true;
-
安全性 JavaScript不能访问本地的硬盘,不能将数据存入到服务器上,不能对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互
-
跨平台(系统)性 JavaScript依赖于浏览器本身,与操作平台无关, 只要计算机安装了支持JavaScript 的浏览器(装有JavaScript解释器),JavaScript 程序就可以正确执行。
缺点 (浏览器兼容性不好!)
各种浏览器支持JavaScript的程度是不一样的,支持和不完全支持JavaScript的 浏览器在浏览同一个带有JavaScript脚本的网页时,效果会有一定的差距,有时甚至会显示不出来。
二、JavaScript和Java的区别
区别1:公司不同,前身不同
JavaScript是***scape公司的产品,是为了扩展***scape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言,它的前身是Live Script;
Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Inter***应用程序开发; Java的前身是Oak(橡树)语言。
区别2:基于对象和面向对象
JavaScript是脚本语言,是一种基于对象的语言。本身提供了非常丰富的内部对象供设计人员使用,但不支持继承和多态。
Java是面向对象的,是一种真正的面向对象的语言,支持封装、继承和多态。
区别3:变量类型强弱不同
Java采用强类型变量检查,即所有变量在编译之前必须声明为某一指定类型。如: int x=1234;
JavaScript中是弱类型变量。统一采用var声明,可赋各种数据类型值。
三、引入方式
-
可以在HTML文档中直接嵌入JavaScript代码
-
JavaScript 代码必须位于
<script>
与</script>
标签之间 -
一个HTML文档中可以出现多个
<script>
标签 -
JavaScript代码的出现次序就是JavaScript的执行顺序
-
标签
<script>
可出现在HTML文档的任何位置,但一般放在<head>
内部,可以早于<body>
部分执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
//1.使用浏览器弹出提示框
alert("提示框");
//2.在浏览器页面输出
document.write("在浏览器页面输出");
//3.在浏览器控制台输出
console.log("在浏览器控制台输出");
</script>
</head>
<body>
</body>
</html>
四、基本语法
(1)注释
-
单行注释 //
-
多行注释 /* */
(2)数据类型
-
数值型:整数和浮点数统称为数值。例如85或3.1415926等。
-
字符串型:由0个,1个或多个字符组成的序列。在JavaScript中,用双引号或单引号括起来表示,如"您好"、'学习JavaScript' 等。
-
逻辑(布尔)型:用true或false来表示。
-
空(null)值:表示没有值,用于定义空的或不存在的引用。要注意,空值不等同于空字符串""或0。
-
未定义(undefined)值:它也是一个保留字。表示变量虽然已经声明,但却没有赋值。
-
JavaScript还支持复合数据类型,包括对象和数组两种。
(3)变量使用
-
声明变量
-
声明一个变量: var a;
-
同时声明多个变量:var b, c;
-
-
变量赋值
-
a = 10;
-
B = "abc"; c = true;
-
-
声明同时完成赋值
-
var d = ”js“;
-
(4)运算符
1.类型运算符
2.算数运算符
3. 赋值运算符
4.比较运算符
注意:
-
==和===的区别
等于判断(==):先判断类型,类型一致则直接比较内容,如果类型不一致,转换为数字类型后再比较内容
等值判断(===):先判断类型,类型不一致则直接false,类型一致则继续比较内容,内容一致则true,不一致则false
-
boolean类型
参与计算或比较时,true转换为1,false转换为0。
5.逻辑运算符
(5)流程控制
-
分支语句:if、switch
-
循环语句:while循环、do-while循环、for循环、for-each循环
-
终止循环:break、continue、return
-
(6)创建对象
//js中的对象
var stu = {"id":1,"name":"zs","age":18};
五、引入外部的JS文件 ※
-
引入外部CSS文件一样,也同样可以引入外部的JavaScript文件。
-
格式为:
<script src="文件路径" type="text/javascript"></script>
六、 函数
(1)全局函数
-
Global中的函数是全局函数
-
JavaScript 全局函数,直接使用方法名就可以调用
(2)对象中的函数
-
JavaScript中提供了很多对象,比如String、Math、Date等,和Java中的使用基本相同
(3)自定义函数
-
语法格式
function 函数名(参数1,参数2,… ) { JavaScript代码; }
var 函数名 = function (参数1,参数2,… ) { JavaScript代码; }
-
自定义函数不会自动执行,需要调用才会执行
-
不需要指明参数类型,因为变量都可以使用var类型
-
无论是否有返回值,都无需指定返回值类型。
七、数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//创建数组的方式一
var str = [1, 2, 3];
//创建数组的方式二
var str1 = new Array();
var str2 = new Array(10);
//foreach获取的是每个元素的脚标
for(var s in str){
console.log(str[s]);
}
//数组的脚标也可以是其他类型的
var arr = new Array();
arr["李"] = "四";
console.log(arr["李"]);
</script>
<body>
</body>
</html>
八、 事件event
事件是可以被 JavaScript 侦测到的行为。
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onclick(单击) 事件来触发某个函数 。
属性 | 说明 |
---|---|
onerror | 当加载图像时发生错误 |
onload | 页面被完成加载 |
onresize | 窗口或框架被调整尺寸 |
onmouseover | 鼠标移入 |
onmousemove | 鼠标移动 |
onmouseout | 鼠标移出 |
onmousedown | 某个鼠标按键被按下 |
onmouseup | 某个鼠标按键被松开 |
onclick | 鼠标单击 |
ondbclick | 鼠标双击 |
onkeydown | 某个键盘的键被按下 |
onkeyup | 某个键盘的键被松开 |
onfocus | 元素获得焦点 |
onblur | 元素失去焦点 |
onchange | 用户改变域中内容 |
onselect | 文本被选定 |
onreset | 重置按钮被点击 |
onsubmit | 提交按钮被点击 |
九、 BOM
-
BOM是Browser Object Model的简写,即浏览器对象模型。
-
BOM由一系列对象组成,是访问、控制、修改浏览器的属性的方法
-
BOM没有统一的标准(每种客户端都可以自定标准)。
-
BOM的顶层是window对象
(1)Window对象方法
函数 | 描述 |
---|---|
alert() | 显示带有一段消息和一个确认按钮的警告框。 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
prompt() | 显示可提示用户输入的对话框。 |
open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
close() | 关闭浏览器窗口。 |
setInterval() | 按照指定周期(以毫秒计)来调用函数或计算表达式。 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
clearInterval() | 取消由 setInterval() 设置的 timeout。 |
clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* BOM : 浏览器对象模型
* Window对象在使用时可以省略
* */
function f() {
//1.显示一个带有确定按钮和一段消息的警告框
alert("按钮被点击了");
//2.显示一个带有一段消息以及确认按钮和取消按钮的对话框
//点击确认返回true,点击取消返回false
var b = confirm("确认删除");
//3.显示一个用户输入的对象框
//返回用户输入的内容
var s = prompt("密码");
//4.打开一个新的浏览器窗口
open("index.html");
//5.关闭一个页面
close();
//6.只执行一次的执行计划
var timeout = setTimeout(function () {
var date = new Date();
console.log(date.toLocaleString());
},5000);//5秒之后调用此方法
//7.按照指定周期执行方法的执行计划
var interval = setInterval(function () {
var date = new Date();
console.log(date.toLocaleString());
},1000);
//8.取消执行一次的执行计划
clearTimeout(timeout);
//9.取消周期执行的执行计划
clearInterval(interval);
}
</script>
</head>
<body>
<button onclick="f()">按钮</button>
</body>
</html>
(2)Window对象属性
属性 | 描述 |
---|---|
history | 客户访问过的URL的信息 |
navigator | 浏览器基本信息 |
document | 文档对象。后续详细讲解 |
location | 当前 URL 的信息 |
screen | 客户端的屏幕信息 |
1. location对象:代表当前打开窗口的URL
* 主机名: location.hostname;
* 端口名:location.port;
* 主机名+端口名:location.host;
* 当前文档URL: location.href;
* 刷新页面:location.reload();
2. history对象:有关客户访问过的URL的信息
* back() 后退到前一个页面 go(-1)
* forward() 前进到后一个页面 go(1)
* go(n) 直接前进到第n个页面
* go(-n) 直接后退到第n个页面
3. navigator对象:管理浏览器基本信息
* 浏览器名称: navigator.appName
* 浏览器版本: navigator.appVersion
* 浏览器类型: navigator.userAgent
4. screen屏幕对象:screen
- 宽像素:screen.width
- 高像素:screen.height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//获取IP
console.log(location.hostname);
//获取端口号
console.log(location.port);
//获取IP+端口号
console.log(location.host);
//获取URL
console.log(location.href);
//刷新页面
console.log(location.reload());
</script>
</head>
<body>
</body>
</html>
(3)超链接与表单的跳转控制
超链接和表单都可以进行跳转。跳转属于他们的默认功能。
一般在他们触发的一个事件中,我们可以通过返回false,来阻止他们的跳转!
function fun5(){
alert('超链接被点击了!');
return false;
}
function f() {
alert("阻止表单提交");
return false;
}
<a href="https://www.baidu.***" onclick="return fun5()">超链接</a>
//阻止提交
<a href="javascript:void(0)">我是超链接</a>
<form action="http://www.baidu.***" onsubmit="return f()">
<input type="submit">
</form>
十、DOM
-
DOM是document object model,也就是文档对象模型。
-
我们可以将HTML页面看做一个文档,在js眼中就是一个document对象。
-
这个document对象中就包含了页面中的所有元素。
(1)DOM中的节点分类
-
元素节点(element node)
-
属性节点(attribute node)
-
文本节点(text node)
(2)获取元素
直接获取指定节点的方法:
-
getElementById():根据元素id返回一个节点对象
-
getElementsByName():根据元素name返回多个节点(节点数组)
-
getElementsByClassName():根据class属性值返回多个节点(节点数组)
-
getElementsByTagName():根据标签名返回多个节点(节点数组)
间接根据层次关系获取节点:
1.父节点
parentNode:表示该元素的父节点
2.孩子节点
childNodes:表示该元素的所有子节点的集合,数组对象
firstElementChild:第一个儿子节点
lastElementChild:最后一个儿子节点
3.兄弟节点
nextElementSibling:该元素后一个兄弟元素节点
previousElementSibling:该元素前一个兄弟元素节点
(3)操作文本
-
对于
<p></p>、<hn></hn>、<div></div>、<span></span>
等标签,操作内部文本使用innerHTML或者innerText -
对于img等单标签,不涉及文本
-
innerHTML 指的是从元素内部的起始位置到终止位置的全部内容, 包括其内部的Html标签
-
innerText 指的是从元素内部起始位置到终止位置的文本内容, 不包含内部的Html标签
(4)操作属性
-
方法1:setAttribute(属性名,属性值) 和getAttribute(属性名)
-
方法2: .属性名
-
说明:方法1可以对自定义属性进行操作;但是方法2只能对标准属性进行操作。
(5)操作元素
-
创建节点的方法 document.createElement(“div")
-
加入孩子节点的方法
-
parentNode.appendChild(childElement):末尾追加方式插入节点
-
parentNode.insertBefore(newNode,beforeNode):在指定节点前插入新节点
-
-
删除节点的方法 parentNode.removeChild(childNode)
-
替换节点的方法 parentNode.replaceChild(newNode, oldNode)
(6)操作CSS
使用style对象操作CSS
对于单个单词的css属性,在style对象中的属性名称不变。
对于多单词的属性改写为小驼峰写法。例如:css中的font-size对应style属性为fontSize.
注意:是JavaScript的style对象,不是HTML标签的style属性。
使用className属性操作CSS
节点的className属性对应于css中的类选择器
注意:不是this.class = "out"; 是this.className = "out";