赞
踩
JavaScript是由Netscape(网景)公司研发出来的一种在它的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脚本的网页时,效果会有一定的差距,有时甚至会显示不出来。
区别1:公司不同,前身不同
JavaScript是Netscape公司的产品,是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言,它的前身是Live Script;
Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发; 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>

单行注释 //
多行注释 /* */
数值型:整数和浮点数统称为数值。例如85或3.1415926等。
字符串型:由0个,1个或多个字符组成的序列。在JavaScript中,用双引号或单引号括起来表示,如"您好"、'学习JavaScript' 等。
逻辑(布尔)型:用true或false来表示。
空(null)值:表示没有值,用于定义空的或不存在的引用。要注意,空值不等同于空字符串""或0。
未定义(undefined)值:它也是一个保留字。表示变量虽然已经声明,但却没有赋值。
JavaScript还支持复合数据类型,包括对象和数组两种。
声明变量
声明一个变量: var a;
同时声明多个变量:var b, c;
变量赋值
a = 10;
B = "abc"; c = true;
声明同时完成赋值
var d = ”js“;
1.类型运算符
2.算数运算符
3. 赋值运算符
4.比较运算符
注意:
==和===的区别
等于判断(==):先判断类型,类型一致则直接比较内容,如果类型不一致,转换为数字类型后再比较内容
等值判断(===):先判断类型,类型不一致则直接false,类型一致则继续比较内容,内容一致则true,不一致则false
boolean类型
参与计算或比较时,true转换为1,false转换为0。
5.逻辑运算符
分支语句:if、switch
循环语句:while循环、do-while循环、for循环、for-each循环
终止循环:break、continue、return
//js中的对象
var stu = {"id":1,"name":"zs","age":18};
引入外部CSS文件一样,也同样可以引入外部的JavaScript文件。
格式为:<script src="文件路径" type="text/javascript"></script>
Global中的函数是全局函数
JavaScript 全局函数,直接使用方法名就可以调用
JavaScript中提供了很多对象,比如String、Math、Date等,和Java中的使用基本相同
语法格式
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>

事件是可以被 JavaScript 侦测到的行为。
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onclick(单击) 事件来触发某个函数 。
属性 | 说明 |
---|---|
onerror | 当加载图像时发生错误 |
onload | 页面被完成加载 |
onresize | 窗口或框架被调整尺寸 |
onmouseover | 鼠标移入 |
onmousemove | 鼠标移动 |
onmouseout | 鼠标移出 |
onmousedown | 某个鼠标按键被按下 |
onmouseup | 某个鼠标按键被松开 |
onclick | 鼠标单击 |
ondbclick | 鼠标双击 |
onkeydown | 某个键盘的键被按下 |
onkeyup | 某个键盘的键被松开 |
onfocus | 元素获得焦点 |
onblur | 元素失去焦点 |
onchange | 用户改变域中内容 |
onselect | 文本被选定 |
onreset | 重置按钮被点击 |
onsubmit | 提交按钮被点击 |
BOM是Browser Object Model的简写,即浏览器对象模型。
BOM由一系列对象组成,是访问、控制、修改浏览器的属性的方法
BOM没有统一的标准(每种客户端都可以自定标准)。
BOM的顶层是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>

属性 | 描述 |
---|---|
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>

超链接和表单都可以进行跳转。跳转属于他们的默认功能。
一般在他们触发的一个事件中,我们可以通过返回false,来阻止他们的跳转!
- function fun5(){
- alert('超链接被点击了!');
- return false;
- }
-
- function f() {
- alert("阻止表单提交");
- return false;
- }
-
- <a href="https://www.baidu.com" onclick="return fun5()">超链接</a>
- //阻止提交
- <a href="javascript:void(0)">我是超链接</a>
-
- <form action="http://www.baidu.com" onsubmit="return f()">
- <input type="submit">
- </form>

DOM是document object model,也就是文档对象模型。
我们可以将HTML页面看做一个文档,在js眼中就是一个document对象。
这个document对象中就包含了页面中的所有元素。
元素节点(element node)
属性节点(attribute node)
文本节点(text node)
直接获取指定节点的方法:
getElementById():根据元素id返回一个节点对象
getElementsByName():根据元素name返回多个节点(节点数组)
getElementsByClassName():根据class属性值返回多个节点(节点数组)
getElementsByTagName():根据标签名返回多个节点(节点数组)
间接根据层次关系获取节点:
1.父节点
parentNode:表示该元素的父节点
2.孩子节点
childNodes:表示该元素的所有子节点的集合,数组对象
firstElementChild:第一个儿子节点
lastElementChild:最后一个儿子节点
3.兄弟节点
nextElementSibling:该元素后一个兄弟元素节点
previousElementSibling:该元素前一个兄弟元素节点
对于<p></p>、<hn></hn>、<div></div>、<span></span>
等标签,操作内部文本使用innerHTML或者innerText
对于img等单标签,不涉及文本
innerHTML 指的是从元素内部的起始位置到终止位置的全部内容, 包括其内部的Html标签
innerText 指的是从元素内部起始位置到终止位置的文本内容, 不包含内部的Html标签
方法1:setAttribute(属性名,属性值) 和getAttribute(属性名)
方法2: .属性名
说明:方法1可以对自定义属性进行操作;但是方法2只能对标准属性进行操作。
创建节点的方法 document.createElement(“div")
加入孩子节点的方法
parentNode.appendChild(childElement):末尾追加方式插入节点
parentNode.insertBefore(newNode,beforeNode):在指定节点前插入新节点
删除节点的方法 parentNode.removeChild(childNode)
替换节点的方法 parentNode.replaceChild(newNode, oldNode)
使用style对象操作CSS
对于单个单词的css属性,在style对象中的属性名称不变。
对于多单词的属性改写为小驼峰写法。例如:css中的font-size对应style属性为fontSize.
注意:是JavaScript的style对象,不是HTML标签的style属性。
使用className属性操作CSS
节点的className属性对应于css中的类选择器
注意:不是this.class = "out"; 是this.className = "out";
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。