1、JavaScript 介绍
Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行 JavaScript 代码。
JS是Netscape网景公司的产品,最早取名为LiveScript;为了吸引更多java程序员。更名为JavaScript。和java没有关系。
JS是弱类型,Java是强类型。
特点: 1. 交互性(它可以做的就是信息的动态交互) 2. 安全性(不允许直接访问本地硬盘) 3. 跨平台性(只要是可以解释JS的浏览器都可以执行,和平台无关)
2.与html结合使用
1.只需要在 head 标签中,或者在 body 标签中, 使用 script 标签 来书写 JavaScript 代码
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
</head>
<body >
<script type="text/javascript">
alert("hello javaScript!");
</script>
</body>
</html>
2.使用 script 标签引入 单独的 JavaScript 代码文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-现在需要使用 script 引入外部的 js 文件来执行 src 属性专门用来引入 js 文件路径(可以是相对路径,也可以是绝对路径)
script 标签可以用来定义 js 代码,也可以用来引入 js 文件 但是,两个功能二选一使用。不能同时使用两个功能
-->
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript">
alert("国哥现在可以帅了");
</script>
</head>
<body>
</body>
</html>
注意,不能在一个标签里面同时使用1,2两种方式
4、变量
什么是变量?变量是可以存放某些值的内存的命名。
JavaScript 的变量类型:
数值类型: number (包括int,byte,double,long)
字符串类型: string
对象类型: object
布尔类型: boolean
函数类型: function
JavaScript 里特殊的值:
undefined:未定义,所有 js 变量未赋于初始值的时候,默认值undefined。
null: 空值。
NaN 全称是:NotaNumber。
非数字:非数值。
JS 中的定义变量格式:var 变量名; var 变量名 = 值;
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
</head>
<body >
<script type="text/javascript">
var a=12;
var b="abc";
alert(a*b);
</script>
</body>
</html>
这里会输出NAN
5.比较:
关系(比较)运算
等于: == 等于是简单的做字面值的比较
全等于: === 除了做字面值的比较之外,还会比较两个变量的数据类型
例子:
alert( a == b ); // true
alert( a === b ); // false
6.逻辑运算
null, 0, “”(空字符串,不能有空格),undefined 这些都是false
&& 且运算。
有两种情况:
第一种:当表达式全为真的时候。返回最后一个表达式的值。
第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值
|| 或运算
第一种情况:当表达式全为假时,返回最后一个表达式的值
第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值
7.1、数组定义方式
JS 中 数组的定义:
格式: var 数组名 =[];
// 空数组 var 数组名 =[1,’abc’,true];
// 定义数组同时赋值元素
<script type="text/javascript">
var arr=[true,1];
arr[0]=12;
arr[2]="abc";
for(var i=0;i<arr.length;i++)
{
alert(arr[i]);//输出12,1,abc
}
</script>
通过数组下标赋值,那么最大下标值会自动做扩容操作。
8.函数
第一种
可以使用 function 关键字来定义函数。
使用的格式如下:
function 函数名(形参列表){ 函数体 }
var fun2 = function (a,b)
{
alert("有参函数 a=" + a + ",b=" + b);
}
fun2(1,2);
在 JavaScript 语言中,如何定义带有返回值的函数? 只需要在函数体内直接使用 return 语句返回值即可
函数的第二种定义方式,格式如下:
使用格式如下:
var 函数名 =function(形参列表)
{
函数体
}
var fun3 = function (num1,num2)
{
return num1 + num2;
}
alert( fun3(100,200) );
重载
javascript不支持重载
在 JS 中函数的重载会直接覆盖掉上一次的定义。
8.2、函数的 arguments 隐形参数(只在 function 函数内)
就是在 function 函数中不需要定义,但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。 隐形参数特别像 java 基础的可变长参数一样。 public void fun(Object…args);
可变长参数其他是一个数组。
那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。
例子:
function fun(a)
{ alert( arguments.length );// 可 看 参 数 个 数
for (var i = 0; i < arguments.length; i++)
{
alert( arguments[i] );
}
}
fun(1,2,3);
function sum(num1,num2)
{
var result = 0;
for (var i = 0; i < arguments.length; i++)
{
if (typeof(arguments[i]) == "number")
{
result += arguments[i];
}
}
return result;
}
alert( sum(1,2,3,4,"abc",5,6,7,8,9) );
如果不写
if (typeof(arguments[i]) == "number")
那么会输出
10abc56789
因为abc是字符串,abc之后就拼接了。
9.对象的定义方式
对象的定义:
第一种定义方式:
var 变量名 =newObject(); // 对象实例(空对象)
变量名.属性名 = 值;
定义一个属性
变量名.函数名 =function(){} // 定义一个函数
对象的访问: 变量名.属性 / 函数名();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
<script type="text/javascript">
var obj = new Object();
obj.name = "华仔";
obj.age = 18;
obj.fun = function ()
{
alert("姓名:" + this.name + " , 年龄:" + this.age);
} // 对 象 的 访 问 : // 变 量 名 . 属 性 / 函 数 名 (); // alert( obj.age );
obj.fun();
</script>
</head>
<body >
</body>
</html>
第二种定义方式
var obj =
{
name:"国哥",
age:18,
fun : function ()
{
alert("姓名:" + this.name + " , 年龄:" + this.age);
}
};
obj.fun();
10 事件
什么是事件?事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
onload 加载完成事件:
页面加载完成之后,常用于做页面 js 代码初始化操作。
onclick 单击事件: 常用于按钮的点击响应操作。
onblur 失去焦点事件: 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件: 常用于下拉列表和输入框内容发生改变后操作。
onsubmit 表单提交事件: 常用于表单提交前,验证所有表单项是否合法。
事件的注册又分为静态注册和动态注册两种:
什么是事件的注册(绑定)? 其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。
静态注册事件:通过 html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。
动态注册事件:是指先通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 =function(){} 这种形式赋于事件
响应后的代码,叫动态注册。
动态注册基本步骤:
1、获取标签对象
2、标签对象.事件名 =fucntion(){}
静态onload的示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
<script type="text/javascript">
function onloadFun()
{
alert('静态注册 onload 事件,所有代码');
}
</script>
</head>
<body onload="onloadFun();">
</body>
</html>
这里不用再写body后面的标签了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
<script type="text/javascript">
window.onload = function ()
{
alert("动态注册的 onload 事件");
}
</script>
</head>
<body>
</body>
</html>
onclick 单击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
<script type="text/javascript">
function onclickFun()
{
alert("静态注册 onclick 事件");
}
window.onload = function ()
{
var btnObj = document.getElementById("btn01");
btnObj.onclick = function () {
alert("动态注册的 onclick 事件");
}
}
</script>
</head>
<body>
<button onclick="onclickFun();"> 按钮</button>
<button id="btn01">按钮 2</button>
</body>
</html>
获 取 标 签 对 象
- document
是 JavaScript
语 言 提 供 的 一 个 对 象 ( 文 档 ) - get
获 取 - Element
元 素 ( 就 是 标 签 ) - By
通 过 。 。 由 。 。 经 。 。 。 * Id
id 属 性 * * getElementById 通 过 id 属 性 获 取 标 签 对 象 **/
onblur失去焦点事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
<script type="text/javascript">
function onblurFun() { // console 是 控 制 台 对 象 , 是 由 JavaScript
console.log("静态注册失去焦点事件");
}
window.onload = function ()
{ //1 获 取 标 签 对 象
var passwordObj = document.getElementById("password"); //
passwordObj.onblur = function ()
{
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text" ><br/>
</body>
</html>
onchanged内容用来修改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
<script type="text/javascript">
function onchangeFun()
{ alert("女神已经改变了"); }
window.onload = function ()
{ //1 获 取 标 签 对 象
var selObj = document.getElementById("sel01");
//2 通 过 标 签 对 象 . 事 件 名 = function(){}
selObj.onchange = function ()
{
alert("男神已经改变了");
}
}
</script>
</head>
<body>
<select onchange="onchangeFun();">
<option>--女神--</option>
<option>芳芳</option>
<option>佳佳</option>
<option>娘娘</option>
</select>
<select id="sel01">
<option>--男神--</option>
<option>国哥</option>
<option>华仔</option>
<option>富城</option>
</select>
</body>
</html>
onsubmit事件,验证表单是否合法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert 标题 here</title>
<script type="text/javascript">
function onsubmitFun(){ // 要 验 证 所 有 表 单 项 是 否 合 法 , 如 果 , 有 一 个 不 合 法 就 阻 止 表 单 提 交 alert("静态注册表单提交事件----发现不合法");
return flase;
}
window.onload = function ()
{ //1 获 取 标 签 对 象
var formObj = document.getElementById("form01"); //2 通 过 标 签 对 象 . 事 件 名 = function(){}
formObj.onsubmit = function () { // 要 验 证 所 有 表 单 项 是 否 合 法 , 如 果 , 有 一 个 不 合 法 就 阻 止 表 单 提 交
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
</script>
</head>
<body>
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册"/>
</form>
</form>
</body>
</html>
10、DOM 模型
DOM 全称是 DocumentObjectModel 文档对象模型
大白话,就是把文档中的标签,属性,文本,转换成为对象来管理。 那么 它们是如何实现把标签,属性,文本转换成为对象来管理呢。这就是我们马上要学习的重点。
10.1、Document 对象(*****重点)
Document 对象的理解: 第一点:Document 它管理了所有的 HTML 文档内容。 第二点:document 它是一种树结构的文档。有层级关系。 第三点:它让我们把所有的标签 都 对象化 第四点:我们可以通过 document 访问所有的标签对象。
什么是对象化?? 我们基础班已经学过面向对象。请问什么是对象化? 举例: 有一个人有年龄:18 岁,性别:女,名字:张某某 我们要把这个人的信息对象化怎么办!
ClassPerson{
privateintage; privateStringsex; privateStringname;
}
10.4、Document 对象中的方法介绍(*****重点)
document.getElementById(elementId) 通过标签的 id 属性查找标签 dom 对象,elementId 是标签的 id 属性值
document.getElementsByName(elementName) 通过标签的 name 属性查找标签 dom 对象,elementName 标签的 name 属性值
document.getElementsByTagName(tagname) 通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement( tagName) 方法,通过给定的标签名,创建一个标签对象。tagName 是要创建的标签名
注: document 对象的三个查询方法,如果有 id 属性,优先使用 getElementById 方法来进行查询 如果没有 id 属性,则优先使用 getElementsByName 方法来进行查询 如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。