jScript
1.简介
-
js面向对象
- js是解释性语言:边执行边解释
- js是弱类型语言[java是强类型语言]
- js是动态类型语言[java是静态语言]
-
js组成
- ECMScript : ECMAScript是一个标准，而这需要由各厂商去实现
- DOM : Js中通过DOM来对HTML文档进行操作
- BOM: 想在浏览器中使用JavaScript,必须使用bom(浏览器对象模型)
-
js嵌入方式:
-
行内
<button id="btn02" onclick="alert('HelloJs2')">SayHello2</button> -
内部
<script type="text/javascript" src="demo.js"> // 通过js获取标签对象 window.onclick = function () { var elementById = document.getElementById("btnId"); // 通过标签对象.事件名 = function(){} elementById.onclick = function () { alert("onclick 单击事件"); //alert()是javaScript语言提供的一个函数.它是一个警告框函数 } } </script> -
外部
<script type="text/javascript" src="demo.js"> // src: 是地址 </script>
-
2.基础语法
JavaScript的数据此类型:
-
基本数据类型
- 数值类型 : number
- 字符串类型 : string
- 对象类型: object
- 布尔类型: boolean
- 函数类型: function
JavaScript里特殊的值:
- undefined : 未定义的,指所有变量没有赋予初始化的时候,值为undefined
- null: 空值,付了值,是空值
- NaN: not a number 非数字 非数值
// 变量的定义格式: var 变量名 ; var 变量名 = 值; var i; i = 12; alert(typeof(i)); // 用于获取变量的数据类型 -
引用数据类型
- 函数
- 数组
- 一般对象
关系(比较)运算符
等于 : ==
全等于: ===
<script type="text/javascript">
var a = 12;
var b = "12";
// 关于js的关系运算,js的解释器会先两个变量都转换为number类型.然后做比较
// 等于运算只是简单的做字面值的比较
alert(a == b); // true
// 全等于,不仅做字面值的比较,还要检查两个变量的数据类型是否一致
alert(a === b);
</script>
逻辑运算符:
且运算： &&
或运算： ||
取反运算： !
&& : 且运算
有两种情况:
① 当表达式都为真的时候返回最后一个表达式的值
② 当表达式都为假的时候.返回第一个为假的表达式的值
|| 或运算
① 当表达式全为假时，返回最后一个表达式的值
② 只要有一个表达式为真。就会把回第一个为真的表达式的值
并且 && 与运算 和 ||或运算 有短路。
短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行
三元运算符:
分支结构:
数组(重点):
<script type="text/javascript">
/**
* js中数组的定义格式:
* var 数组名 = [];
* var 数组名 = [1,"abc",false];
* @type {Array}
*/
// var arr = []; // 空数组
var arr = [true,false];
arr[0] = 11;
arr[2] = "abc";
for (var i = 0;i < arr.length ;i++) {
alert(arr[i]);
}
</script>
3.函数
函数定义格式:
<script type="text/javascript">
/**
* 第一个种定义格式:
* function 函数名 (参数列表) {
* 函数体
* }
*
* 第二种定义格式:
* var 变量名 = function() {
* 函数体
* }
*
*
* 调用格式:
* 函数名(实参列表);
*/
function fun01() {
alert("无参函数()");
}
// fun01();
function fun02(a,b) {
alert("有参函数a==>" + a + ",b==>" + b);
}
// fun02(1,4);
function age() {
return 18;
}
alert(age()); // 带有返回值的函数
var fun10 = function () {
alert("第二种定义方式:无参函数");
}
fun10();
</script>
js函数中重载会直接覆盖掉上一次的定义
<script type="text/javascript">
/**
* ：在Java中函数允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义
*/
function fun() {
alert("无参函数 fun()");
}
function fun(a,b) {
alert("有参函数fun(a,b)");
}
fun();
</script>
注意:
函数调用:
1 形参 < 实参:
自动忽略多个参数
2 形参 > 实参:
实参数据类型是number: 返回NaN
实参数据类型是String: 返回 数值+undefined
4.js中自定义对象
<script type="text/javascript">
/**
* js中自定义对象(扩展)
*
* Object形式的自定义对象:
*
* var 变量名 = new Object();
* 变量名.属性名 = 值; // 添加一个属性
* 变量名.函数名 = function(){} // 定义一个函数
*
*
*
* {} 定义自定义对象格式:
* var 变量名 = {
* 属性名 : 值, // 添加一个属性
* 函数名:function() {} // 添加一个方法
* };
*
* 对象的访问:
* 变量名.属性名/函数名(实参);
*/
var obj = new Object();
obj.name = "大码";
obj.age = 18;
obj.fun = function () {
alert("姓名:" + this.name + ",年龄" + this.age);
}
// obj.fun();
var objs = {
name : "比卡丘",
age : 18,
fun : function () {
alert("姓名:" + this.name + ",年龄:"+ this.age);
}
};
objs.fun();
</script>
5.事件
事件:事件是电脑输入设备与页面进行交互的响应
注册方式:
静态注册事件:
是在标签的事件属性上直接赋于事件响应后的js代码,这种方式我们称之为静态注册
动态注册事件:
是指通过js代码先获取标签对象( dom对象 ).然后再通过标签对象.事件名 = function(){}.这种方式我们称之为动态注册.
一般动态注册分为以下几个步骤:
window.onload = function(){
//1 通过js代码获取标签对象
//2 通过标签对象.事件名 = function(){}
}
注意:
调用函数时,注意事项:
函数名:使用函数的引用
函数名(): 直接调用[触发]函数
-
onload:加载完成事件:
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /*// 动态注册事件 window.onload = function () { alert("动态注册事件"); }*/ </script> </head> <!-- 静态注册onload事件 --> <body onload="alert('静态注册事件')"></body> <body> 页面出来了 </body> -
onclick单击事件:
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> // 静态注册 function onclickFun() { alert("onclick静态1"); alert("onclick静态2"); } window.onload = function () { // 1通过js获取标签对象 var elementById = document.getElementById("btn02"); // 通过标签对象.事件名 = function(){} elementById.onclick = function () { alert("onclick 动态注册 1 "); alert("onclick 动态注册 2 "); } } </script> </head> <body> <!-- 静态注册onclick事件 --> <button onclick="onclickFun()">按钮1</button> <br> <!-- 动态注册 --> <button id="btn02">按钮2</button> <br> </body> -
onblur失去焦点事件
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function onblurFun() { /** * console 控制台: * log() 是一个方法,用于向管制台打印输出, * console 对象一般用于调试程序 */ console.log("静态注册onblur事件") } window.onload = function () { // 1通过js获取标签对象 var elementById = document.getElementById("password"); // 2 通过标签对象.事件名 = function(){} elementById.onblur = function () { console.log("动态注册onblur事件") } } </script> </head> <body> <!-- 静态注册失去焦点事件onblur --> 用户名：<input type="text" onblur="onblurFun()"/><br/> 密码：<input id="password" type="password"/><br/> </body> -
onchange 内容发生改变事件:
<script type="text/javascript"> function onchangeFun() { alert("选择时的内容发生了改变 == 静态注册"); } window.onload =function () { // 1 通过js获取标签对象 var elementById = document.getElementById("sel01"); // 2 通过标签对象.事件名= function() {} elementById.onchange = function () { alert("选择时的内容发生了改变 == 动态注册") } } </script> <body> 请选择你心中的女神： <select onchange="onchangeFun()"> <option>--选择女神--</option> <option>朱茵</option> <option>邓紫棋</option> <option>迪丽热巴</option> <option>关晓彤</option> </select><br/> 请选择你心中的男神： <select id="sel01"> <option>--选择男神--</option> <option>刘德华</option> <option>周杰伦</option> <option>莫言</option> </select> </body> -
onsubmit 表单提交事件:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function onsubmitFun() {
alert("验证码表单项是否合法");
alert("发现不合法,就阻止提交");
return false;
}
window.onload = function () {
var elementById = document.getElementById("form01");
elementById.onsubmit =function () {
alert("动态 验证表单项是否合法!");
alert("动态 发现不合法,就阻止提交!");
// 想阻止就return false;
return false;
}
}
</script>
</head>
<body>
<!--
静态注册 onsubmit 事件
-->
<form action="http://www.baidu.com" onsubmit="return onsubmitFun()">
<input type="submit" value="静态onsubmit"/>
</form>
<form id="form01" action="http://www.baidu.com" id="form01">
<input type="submit" value="动态onsubmit"/>
</form>
</body>
5.嵌入方式
window.onload事件:当前文档完全加载后执行[触发]
完全加载:当前文档中所有的资源全部加载.[图片][音频]…
6.DOM
DOM:DOM 全称是Document Object Model 文档对象模型
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对象中的三个查询方法优先顺序:
-
如果只查找一个 优先 getElementById
-
如果只查找多个个 优先 使用name属性值
-
如果没有name属性,最后使用标签名
- 注意: 以上查询都是在页面加载完成之后才能使用.
节点的常用属性和方法
方法:
通过具体的元素节点调用
getElementsByTagName()
方法，获取当前节点的指定标签名孩子节点
appendChild( oChildNode )
方法，可以添加一个子节点，oChildNode是要添加的孩子节点
属性：
childNodes
属性，获取当前节点的所有子节点
firstChild
属性，获取当前节点的第一个子节点
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个节点
previousSibling
属性，获取当前节点的上一个节点
className
用于获取或设置标签的class属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容
innerText
属性，表示获取/设置起始标签和结束标签中的文本
7.正则表达式
<script type="text/javascript">
// 要求,当点击了[验证]按钮之后,我们要获取输入框里用户名的内容,然后验证其是否合法,
// 而且用户名必须由字母,数字,下划线组成.并且长度是5,到12位
function checkUsername() {
// 获取输入框里面的内容
var usernameObj = document.getElementById("username");
// 查看标签里面的内容
// alert(usernameObj);
// 通过输入框标签对象.获取输入框里的内容
var usernameText = usernameObj.value;
// alert(usernameText)
var spanObj = document.getElementById("usernameSpan");
spanObj.innerHTML = "思密达";
//使用正则表达式：验证字符串只能是由字母、数字、下划线组成。并且长度是5到12位
var usernamePatt = /^\w{5,12}$/;
if (usernamePatt.test(usernameText)) {
// alert("用户名合法");
spanObj.innerHTML = "";
} else {
// alert("用户名不合法");
spanObj.innerHTML = "用户名不合法";
}
}
</script>
</head>
<body>
用户名: <input type="text" id="username" value="abc">
<span style="color: red" id="usernameSpan">
</span>
<button onclick="checkUsername()">按钮</button>
</body>
586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
