Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行JavaScript 代码。
JS 是Netscape 网景公司的产品,最早取名为LiveScript;为了吸引更多java 程序员。更名为JavaScript。JS 是弱类型,Java 是强类型。
特点:
方式一:
只需要在head 标签中,或者在body 标签中, 使用script 标签来书写JavaScript 代码
方式二:
使用script 标签引入单独的JavaScript 代码文件
JavaScript 的变量类型:
数值类型 | number |
---|---|
字符串类型 | string |
对象类型 | object |
布尔类型 | boolean |
函数类型 | function |
JavaScript 里特殊的值:
undefined | 未定义 |
---|---|
null | 空值 |
NaN | Not a Number 非数值。 |
JS 中的定义变量格式:
var 变量名;
var 变量名= 值;
等于: == 等于是简单的做字面值的比较
全等于: === 除了做字面值的比较之外,还会比较两个变量的数据类型
且运算: &&
或运算: ||
取反运算: !
在JavaScript 语言中,所有的变量,都可以做为一个boolean 类型的变量去使用。
0 、null、undefined、””(空串) 都认为是false;
&& 且运算:
|| 或运算:
JS 中数组的定义:
格式:
var 数组名= [ ]; // 空数组
var 数组名= [1 , ’abc’ , true]; // 定义数组同时赋值元素
如果我们通过数组下标给数组中的元素赋值,那么数组会自动扩容
比如:
<script type="text/javascript">
var arr=[];//定义一个空数组
alert(arr.length);// 空数组长度:0
arr[0] = 12;
alert(arr.length);//自动扩容至:1
arr[3] = "abc";
alert(arr.length);//自动扩容至:4
//数组的遍历
for (var i = 0 ; i < arr.length;i++){
alert(arr[i]);
}//12,undefined,undefined,"abc"
</script>
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
第一种
语法格式:
function 函数名(形参列表){
函数体
}
如果想定义带返回值的函数,直接在函数体内使用return 语句就行。
示例:
<script type="text/javascript">
//定义一个无参函数
function fun(){
alert("无参函数fun()");
}
//函数调用
fun();
//有参函数
function fun1(a,b){
alert("有参函数fun1()a:" + a + ",b:" + b);
}
fun1(1,"abc");
//定义带有返回值的函数
function sum(num1,num2){
var result = num1 + num2;
return result;
}
alert(sum(100,100));
</script>
第二种
语法格式:
function 函数名(形参列表){
函数体
}
实例:
<script type="text/javascript">
var fun = function(){
alert("无参函数");
}
fun();
var fun1 = function (a, b) {
alert("有参函数a = " + a + ",b = " + b);
}
fun1(1,2);
var fun2 = function (num1,num2){
return num1 + num2;
}
alert(fun2(1,2));
</script>
注:js中不允许函数重载,如果函数名相同,就只能调用最后声明的函数。
含义:在function 函数中不需要定义,但却可以直接用来获取所有参数的变量。就是你可以给函数传入多个参数,即使它是无参。
<script type="text/javascript">
function fun() {
alert(arguments);//[object Arguments]
alert(arguments.length);//查看参数个数
alert(arguments[0]);
alert(arguments[1]);
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);
}
alert("无参函数fun()");
}
fun(1,"adc");
//需求:要求编写一个函数。用于计算所有参数相加的和并返回
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, 5, "abc", 67, 2, 12, ""));//15abc67212
alert(sum(1, 2, 3, 4, 5, "abc", 67, 2, 12, ""));//96
</script>
事件是电脑输入设备与页面进行交互的响应。
常用的事件:
onload 加载完成事件: 页面加载完成之后,常用于做页面js 代码初始化操作
onclick 单击事件: 常用于按钮的点击响应操作。
onblur 失去焦点事件: 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件: 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件: 常用于表单提交前,验证所有表单项是否合法。
其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。
通过html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。
是指先通过js 代码得到标签的dom 对象,然后再通过dom 对象.事件名= function(){} 这种形式赋于事件响应后的代码,叫动态注册。
动态注册基本步骤:
1、获取标签对象
2、标签对象.事件名= fucntion(){}
注:动态注册(window.onload)的内容会在页面加载完之后执行
以onblur实例动态的静态注册(其他事件步骤一样):
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>onblur</title>
<script type="text/javascript">
//静态注册失去焦点事件
function onblurFun(){
//console是控制台对象,是由JavaScript语言提供,专门用来向浏览器的控制器打印输出,用于测试使用
//log()是打印的方法。
console.log("静态注册失去焦点事件");
}
//动态注册 onblur事件
window.onload = function (){
//1.获取标签对象
var passwordObj = document.getElementById("password");
alert(passwordObj);//[object HTMLInputElement]
//2.通过标签对象.事件名 = function(){}
passwordObj.onblur = function (){
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type = "text" onblur="onblurFun()"> <br/>
密码:<input type="text" id="password"> <br/>
</body>
</html>
DOM(Document Object Model)文档对象模型。就是把文档中的标签,属性,文本,转换成为对象来管理。
Document 对象的理解:
第一点:Document 它管理了所有的HTML 文档内容。
第二点:document 它是一种树结构的文档。有层级关系。
第三点:它让我们把所有的标签都对象化。
第四点:我们可以通过document 访问所有的标签对象。
元素:页面中所有的标签,元素—element, 标签----元素—对象
以getElementById来示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementById</title>
<script type="text/javascript">
/*
* 需求:当用户点击了校验按钮,要获取输入框里的内容。然后验证其是否合法。
* 验证的规则是:必须由,字母,数字,下划线组成。并且长度是5-18位。
* */
function onclickFun(){
//1.当我们要操作一个标签是,一定要获取这个标签的对象。
var usernameObj = document.getElementById("username");
alert(usernameObj);//[object HTMLInputElement]就是dom对象
alert(usernameObj.value);//就是输入框的内容
var usernameTest = usernameObj.value;
//如何验证字符串,符合某些规则,需要使用正则表达式
var patt = /^\w{5,18}$/;
/*
test()方法用于测试某个字符串,是不是匹配我的规则,
匹配就返回true,不匹配犯规false
*/
var usernameSpanObj = document.getElementById("usernameSpan");
//innerHTML 表示其实标签和结束标签中的内容
//innerHTML 这个属性可读,可写,有标签效果
usernameSpanObj.innerHTML="不合法就是不合法";
// alert(usernameSpanObj.innerHTML);
if (patt.test(usernameTest)){
// alert("用户名合法");
// usernameSpanObj.innerHTML="用户名合法";//改过HTML内容后直接显示在span的位置上,不要alert 不好
usernameSpanObj.innerHTML="
";
}else {
// alert("用户名不合法!");
// usernameSpanObj.innerHTML="用户名不合法";
usernameSpanObj.innerHTML="
";
}
}
</script>
</head>
<body>
用户名:<input type = "text" id = "username" value="hah"/>
<span style = "color:red" id="usernameSpan"></span>
<button onclick="onclickFun()">校验</button>
</body>
</html>
注:
document 对象的三个查询方法,如果有id 属性,优先使用getElementById 方法来进行查询如果没有id 属性,则优先使用getElementsByName 方法来进行查询如果id 属性和name 属性都没有
最后再按标签名查getElementsByTagName以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。
document.createElement( tagName)方法,通过给定的标签名,创建一个标签对象。tagName 是要创建的标签名
<script type="text/javascript">
window.onload = function () {
//现在需要我们使用js代码来创建html标签,并显示在页面上
//显示的标签内容: 标签文本
var divObj = document.createElement("div");//在内存中
//方式一:创建文本节点对象
var textNodeObj = document.createTextNode("标签文本");
divObj.appendChild(textNodeObj);// 标签文本
//方式二:直接给innerHTML属性赋值
// divObj.innerHTML = '标签文本';// 标签文本 ,但是,还只在内存中
//给body添加子元素
document.body.appendChild(divObj);//添加到了body对象中,也就是添加到了页面中
}
</script>
概念:页面中所有的内容包括标签,属性,文本,甚至注释,空格
但一般来说节点就指标签对象(我们能操控的)。
方法:
通过具体的元素节点调用
getElementsByTagName() | 获取当前节点的指定标签名孩子节点 |
---|---|
appendChild( ChildNode ) | 可以添加一个子节点,ChildNode 是要添加的孩子节点 |
属性:
childNodes | 获取当前节点的所有子节点 |
---|---|
firstChild | 获取当前节点的第一个子节点 |
lastChild | 获取当前节点的最后一个子节点 |
parentNode | 获取当前节点的父节点 |
nextSibling | 获取当前节点的下一个节点 |
previousSibling | 获取当前节点的上一个节点 |
className | 用于获取或设置标签的class 属性值 |
innerHTML | 表示获取/设置起始标签和结束标签中的内容 |
innerText | 表示获取/设置起始标签和结束标签中的文本 |