JavaScript基础
文章目录
- JavaScript
-
- 1.介绍
- 2.JavaScrip和HTML的结合
- 3.变量
- 4.关系运算
- 5.逻辑运算
- 6.数组
- 7.函数
- 8.自定义对象
- 9.事件
- 10.DOM模型
- 11.DOM对象的方法属性
JavaScript
1.介绍
主要完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。
简写JS，和Java没有本质的联系。JS是弱类型(类型可变)，Java是强类型。
JS特点:
- 交互性（它可以做的就是信息的动态交互）
- 安全校（不允许直接访问本地硬盘）
- 跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）
2.JavaScrip和HTML的结合
-
在
head标签中，或在body标签中，使用scrip标签来书写javascrip代码alert是javascript提供的警告框函数,接受任意类型的参数
<script type="text/javascript"> alert("Hello Word"); script> -
head中使用scrip标签引入单独的javascrip代码文件。
优点：代码可以复用<script type="text/javascript" src="testjs.js">script>
这两个二选一使用，不能一个scrip标签当两个用，例如：
3.变量
数据类型：
- 数值类型
number - 字符串类型
string - 对象类型
object - 布尔类型
boolean - 函数类型
function
js里特殊的值：
- 未定义
underfined，所有js变量未赋予初始值的时候，默认都是underfined - 空值
null， NAN，即：Not a Number 非数字，非数值
var 变量名;
var 变量名 = 值;
<script type="text/javascript">
var i;
alert(i); //underfined
i = 12;
alert(i); //12
alert(typeof(i)); //number， typeof函数可以取数据的数据类型
i = "abc";
alert(typeof(i)); //string
var a = 10;
var b = "hi";
alert(a * b); //语法允许，输出NaN
</script>
4.关系运算
< > != >= <= 和java语言一样
等于 == 简单的做字面值的比较，
全等于=== 除了做字面值的比较外，还会比较两个变量的数据类型
var str = "12"
var num = 12;
alert(str == num); //true
alert(str === num) //false
5.逻辑运算
在js中所有的变量都可以作为boolean类型取使用 （与C语言类似）
&& || ! 和其他语言一样含义，也有短路现象。
&&中：当两边都为真的，返回最后一个表达式的值。当有一个为假的时候，返回第一个为假的表达式。
var a = "abc";
var b = true;
var c = false;
var d = null;
alert(a && b) //true
alert(b && a) //abc
alert(c && a) //false
alert(d && c) //null
||中：当表达式全为假时，返回最后一个表达式值。只要有一个为真，返回第一个为真的表达式的值。
在js中所有的变量都可以作为boolean类型取使用
0，null，underfined，""(空串) 都是false
var n = underfined; //可以显示的赋值underfined
if (n) {
alert("true")
} else {
alert("false")
}
6.数组
var 数组名 = [] 空数组
var 数组名 = {1, "abc", true} 定义时同时赋值
var arr = [];
var len = arr.length; //0
arr[0] = 12; //我们只要通过下标赋值(读不会扩容)，那么最大的下标值，就会自动的给数组扩容
arr[2] = 13;
var len = arr.length; //3，中间的那个arr[1] = underfined;
var arr2 = [1, true]; //这样这样默认值
var arr2 = {1, true};
//遍历数组，注意不能写成int i = 0
for (var i = 0; i < arr.length; i++) {
alert(arr[i]);
}
7.函数
重点⭐⭐⭐
-
使用
function关键字定义函数格式：
function 函数名(形参列表) { 函数体; }//无参函数,不被调用不会被执行 function test() { alert("无参函数被调用了"); } test(); //有参函数，因为变量类型都是var，没必要写了，写变量名就行了 //如果有返回值就直接return语句返回就行了，因为不需要指定返回值类型！！！！！！ function test02(a, b) { alert(a + b + "有参函数被调用了"); return a; } var num = test02(10, "abc"); -
类似定义变量定义函数，js中有函数类型
var 函数名 = function(形参列表) { 函数体 }var sum = function (n1, n2) { return n1 + n2; } alert( sum(1, 2) )
⭐js中不允许函数重载，两次定义出直接覆盖上一次的定义（看下面例子）
function func(a) {
alert("f222")
}
function func() {
alert("f111")
}
func(10); //输出：f111。下面那个无参覆盖了有参，但我们还能传参，即隐形参数
//隐形参数arguments：在function函数中不需要定义，但却可以直接用来获取所有参数的变量，
//操作类似数组。像java的可变长参数。
function T(a) {
alert(arguments.length); //3， 个数
alert(arguments[0]) //值10，可以for遍历
alert(arguments[1]) //值20，可以for遍历
alert(a) //10,通过参数取也没问题！！！！！！！
}
T(10, 20, "hahaha");
ja中字符串和数字相加同样是做拼接。
//写上两个参数可读性好点
function sumAll(num1, num2) {
var res = 0;
for (var i = 0; i < arguments.length; i++) {
if (typeof (arguments[i]) == "number") {
res += arguments[i];
}
}
return res;
}
alert(sumAll(1, 2, 3, 4, 5, 6, "abc", 7, 8, 9, 10));
8.自定义对象
-
Object形式的自定义对象
对象的定义：
var 变量名 = new Object();对象实例，空对象变量名.属性名 = 值;该对象就有了这个属性变量名.函数名 = function() { }定义函数，该对象内部就有这个函数了对象的访问：
变量名.属性/函数名();var obj = new Object(); //定义 obj.name = "Jack"; obj.age = 19; obj.printOb j = function () { alert("姓名:" + this.name + ", 年龄: " + this.age); } alert(obj.name); //访问 obj.printObj(); -
{ }花括号形式的自定义对象
var 变量名 = {};空对象（⭐[]是数组，{}是对象）语法（初始定义）：注意是冒号，而且每个用逗号分开
var 变量名 = {
属性名: 值 ,
属性名: 值,
… ,
函数名: function() { }
};对象访问和上面一样。
var obj2 = { age: 20, name: "Tom", printObj: function () { alert("姓名:" + this.name + ", 年龄: " + this.age); //同样可以用this } };
9.事件
重点⭐⭐⭐
事件：电脑输入设备和页面进行交互的响应。
常用的事件：
-
onload加载完成事件 (页面加载完之后，常用于做页面js代码初始化操作) -
onclick单击事件 (常用于按钮点击) -
onblur失去焦点事件 (常用于输入框，失去焦点后验证其输入是否合法) -
onchange内容发生改变事件 (常用于下拉列表和输入框发生改变后的操作) -
onsubmit表单提交事件 (常用于表单提交前，验证所有表单项是否合法)、
事件的注册：
事件注册/事件绑定 ：就是告诉浏览器当事件响应后要执行那些操作代码。
静态注册：通过html标签的事件属性直接赋予事件响应后的代码。
动态注册：指通过js代码得到标签的dom对象，然后再通过对象.事件名 = function() {}.
动态注册的步骤：1.获取标签对象 2.标签对象.事件名 = function() {}
下面有各个事件的静态/动态注册案例
1.onload
<body onload="alert('静态注册')"> body>
<head>
<script type="text/javascript">
function onloadFunc() {
alert("静态注册onload事件，所有代码");
}
script>
head>
<body onload="onloadFunc()"> body>
<script type="text/javascript">
window.onload = function () {
alert("动态注册onload事件，所有代码");
}
script>
<body> body>
2.onclick
<head>
<script type="text/javascript">
function onclickFunc() {
alert("静态注册onclick");
}
script>
head>
<script type="text/javascript">
window.onclick = function () {
/**
* 1.获取标签对象
* document是js的一个对象，代表整个页面，getElementById函数是传入一个id获取标签对象。
* 2.通过标签对象.事件名 = function() { }
*/
var btnObj = document.getElementById("btn01");
btnObj.onclick = function () {
alert("动态注册onclick");
}
}
script>
<button onclick="onclickFunc()">按钮1button>
<button id="btn01">按钮2button>
3.onblur
<script type="text/javascript">
function onblurFunc() {
//console是一个控制台对象，专门向控制台打印输出，测试使用。log是打印的方法
console.log("静态注册onblurFunc，失去焦点")
}
script>
<script type="text/javascript">
window.onblur = function () {
var password = document.getElementById("password");
//1.获取标签对象 2.对象.事件名
password.onblur = function () {
console.log("动态注册onblurFunc，失去焦点")
}
}
script>
用户名：<input type="text" onblur="onblurFunc()"/> <br/>
密码：<input type="text"/> <br/>
4.onchange
<script type="text/javascript">
function onchangeFunc() {
alert("改变了(静态注册)");
}
script>
<script type="text/javascript">
window.onchange = function () {
var selObj = document.getElementById("sel01");
selObj.onchange = function () {
alert("改变了(动态注册)");
}
}
script>
国籍：
<select onchange="onchangeFunc()">
<option> 请选择 ：option>
<option> 中国option>
<option> 美国option>
<option> 日本option>
select>
女神：
<select id="sel01">
<option> 请选择 ：option>
<option> 王冰冰option>
<option> 赵丽颖option>
<option> 张子枫option>
select>
5.onsubmit
<script type="text/javascript">
function onsubmitFunc() {
//一般要这里验证所有表单项是否合法，有一个不合法就提醒用户，阻止表单提交
//静态时怎么阻止呢？return false就可以了，注意form标签里面也有一个return，返回两次！！！
alert("静态注册提交事件--发现不合法了");
return false;
}
script>
<script type="text/javascript">
window.onsubmit = function () {
var formObj = document.getElementById("form01");
formObj.onsubmit = function () {
alert("动态注册提交事件--发现不合法了");
return false; //注意动态只需要返回一次就行了，返回true就提交了
}
}
script>
<form action="http://www.baidu.com" method="get" onsubmit="return onsubmitFunc()">
<input type="submit" value="静态注册">
form>
<form action="http://www.baidu.com" method="get" id="form01">
<input type="submit" value="动态注册">
form>
10.DOM模型
重点⭐⭐⭐
Document Object Model 文档对象模型。就是把html文档里面的标签，属性，文本，转换成为对象来管理。
Document对象的理解：
-
它管理了所有的HTML文档内容
-
它的一种树结构的文档，有层次关系。例如html对象里面有head对象和body对象，head对象里面有title对象…
-
它让我们把所有的标签都对象化
<body> <div id="div01">div01div> body> 模拟： class Dom { private String id; private String tagName; 该标签名 private Dom parentNode; 父亲 private List<Dom> children; 孩子 private String innerHTML; 起始标签和结束标签中间的内容 } -
我们可以通过
document对象访问所有的标签对象
document对象里面的方法： ⭐
document.getElementById(elementId)
通过标签的id属性查找标签dom对象,返回第一个id为传入的对象的引用document.getElementsByName(elementName);
通过标签的name属性查找标签dom对象，返回对象集合document.getElementsByTagName(tagname);
通过标签名查找标签dom对象，返回对象集合document.createElement(tagName)
通过给定的标签名创建一个标签对象
//通过标签的id属性查找标签dom对象,返回第一个id为传入的对象的引用
document.getElementById(elementId);
//通过标签的name属性查找标签dom对象，返回对象集合
document.getElementsByName(elementName);
//通过标签名查找标签dom对象，返回对象集合
document.getElementsByTagName(tagname);
//通过给定的标签名创建一个标签对象
document.createElement(tagName)
//属性
boby
URL
title
方法查询使用优先级：getElementById -> getElementsByName -> getElementsByTagName
一定要在页面加载完成后执行，才能查询到标签对象。
案例1，验证用户名（看注释）：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>documentTest01title>
<script type="text/javascript">
function check() {
// 验证规则：字母数字下划线组成，长度5~12位
var usernameObj = document.getElementById("username01");
//获取dom对象，里面记录了属性，文本，父亲，孩子等...
// alert(usernameObj.id); //username01
// alert(usernameObj.type); //text
//获得输入的内容,正则表达式验证
var username = usernameObj.value;
//正则对象，直接创建需要需要加上//，或者var pat = new RegExp("^\w{5,12}$")，
//里面有个test方法返回是否和正则匹配，
//里面还要exec方法,返回值是被找到的值,只返回一个，
//如果想返回多个，则要这样创建对象var pat=new RegExp("^\w{5,12}$","g")，
//或者var pat=/^\w{5,12}$/g (g->global)
//还有个方法compile("regex"); 改变正则内容
var spanObj = document.getElementById("span01"); //获取span的dom对象
var pat = /^\w{5,12}$/;
if (pat.test(username)) {
spanObj.style.color = "green";
spanObj.innerHTML = "√用户名合法";
//alert("合法");
} else {
spanObj.style.color = "red";
spanObj.innerHTML = "*用户名不合法"; //可得到起始标签和结束标签中间的内容，
//我们需求是设置里面的内容，innerHTML可读可写
//alert("用户名不合法"); //这样提示太丑了
}
}
script>
head>
<body>
用户名：<input type="text" id="username01" value="默认值"/>
<span id="span01" style="color: red; font-size: 10px" >span> <br/>
<button onclick="check()">验证button>
body>
html>
案例2：全选（看注释）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>documentTest03title>
<script>
function selectAll() {
//hobbies是个标签对象集合：object-NodeList,操作和数组一样，每个都是dom对象
//这个集合的元素的顺序是在HTML中从上到下的顺序。
//checked="checked"在复选框里是默认选中，选中是true，不选是false，所以我们要操作这个属性(可读可写)
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
//alert(hobbies[i].checked); //false
hobbies[i].checked = true;
}
}
function unSelectAll() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false;
}
}
function selectReverse() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = !hobbies[i].checked;
}
}
script>
head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="CPP" /> C++
<input type="checkbox" name="hobby" value="Java"/> Java
<input type="checkbox" name="hobby" value="PHP"/> PHP
<input type="checkbox" name="hobby" value="JavaScrip"/> JavaScrip
<br/>
<button onclick="selectAll()">全选button>
<button onclick="unSelectAll()">全不选button>
<button onclick="selectReverse()">反选button>
body>
html>
案例3：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>documentTest04title>
<script type="text/javascript">
function checkAll() {
var inputs = document.getElementsByTagName("input"); //标签名查询，也返回集合
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
script>
head>
<body>
兴趣爱好：
<input type="checkbox" value="CPP"/> C++
<input type="checkbox" value="Java"/> Java
<input type="checkbox" value="PHP"/> PHP
<input type="checkbox" value="JavaScrip"/> JavaScrip
<br/>
<button onclick="checkAll()">全选button>
body>
html>
11.DOM对象的方法属性
dom对象就是标签对象，即节点(但远不止)
属性：
childNodes当前节点的所有子节点，之间的空白字符也算！firstChild第一个子节点lastChild最后一个子节点parentNode父节点nextSibling当前节点的下一个节点previousSibling当前节点的上一个节点className获取/设置标签的class属性值innerHTML获取/设置起始标签和结束标签中的内容innerText获取/设置起始标签和结束标签中的文本
方法：
getElementByTagName()
通过具体的元素节点调用，和上面的document函数名一样，返回当前节点的指定标签名孩子节点集合appendChild(ochildNode)
添加一个子节点，ochildNode就是要添加的孩子节点
//通过具体的元素节点调用，和上面的document函数名一样，返回当前节点的指定标签名孩子节点集合
getElementByTagName()
//添加一个子节点，ochildNode就是要添加的孩子节点
appendChild(ochildNode)
//属性：
childNodes //当前节点的所有子节点，之间的空白字符也算！
firstChild //第一个子节点
lastChild //最后一个子节点
parentNode //父节点
nextSibling //当前节点的下一个节点
previousSibling //当前节点的上一个节点
className //获取/设置标签的class属性值
innerHTML //获取/设置起始标签和结束标签中的内容
innerText //获取/设置起始标签和结束标签中的文本
演示：document.createElement() 和 dom.appendChild()
dom模型中 文本也被封装为个文本节点对象，我们也可以创建document.createTextNode()
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>documentTest05title>
<script type="text/javascript">
window.onload = function () {
var divObj = document.createElement("div");
divObj.innerHTML = "苏瞳牛逼";
document.body.appendChild(divObj); //注意：body属性要在页面加载完才能使用
//这样也行！！
// var divObj = document.createElement("div");
// var textNode = document.createTextNode("苏瞳牛逼！！");
// divObj.appendChild(textNode);
// document.body.appendChild(divObj);
}
script>
head>
<body>
body>
html>