【前端基础】JavaScript
JavaScript的基本介绍
javascript语言的诞生主要是用于完成数据验证,因此它运行在客户端,需要运行浏览器来解析执行javascript代码.
特点:
(1).交互性(信息的动态交互)
(2).安全性(不允许直接访问本地硬盘)
(3).跨平台性(与平台无关)
js是弱类型
弱类型:可变
例如: var i = 12;
i = ‘aba’;
java是强类型
强类型:不可变
例如: int i = 12;
文章目录
- 1.JavaScript与HTML的结合方式
-
- 1.1.第一种方式
- 1.2.第二种方式
- 2.变量
- 3.关系运算
- 4.逻辑运算
- 5.数组
- 6.函数
-
- 6.1.函数的第一种定义方式
- 6.2.函数的第二种定义方式
- 6.3.函数的arguments隐形参数(只在function函数内)
- 7.JS中的自定义对象
-
- 7.1.Object形式的自定义对象
- 7.2.{}形式的自定义对象
- 8.js中的事件
- 9.DOM模型
- 10.验证用户名是否有效
1.JavaScript与HTML的结合方式
1.1.第一种方式
⭐️在head标签和body标签中,使用script标签来写代码.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
alert("hello javascript");
script>
head>
<body>
body>
html>
1.2.第二种方式
⭐️使用script标签引入单独的javascript文件.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript" src = "02h.js">script>
head>
<body>
body>
html>
注意:
(1).使用script标签引入外部的js文件来执行,使用script标签定义js代码,但只能使用其中之一.
(2).src属性专门用于引入js文件路径(可以是绝对路径,也可以是相对路径).
2.变量
⭐️变量是可以存放某些值的内存的命名.
javascript的变量类型:
数值类型: number
字符串类型: string
对象类型: object
布尔类型: boolean
函数类型: function
javascript里特殊的值:
undefined: 未定义,所有js变量未赋初始值的时候,默认值都是undefined.
null: 空值.
NAN: 非数值.
js中变量定义的格式:
var 变量名;
var 变量名 = 值;
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
var i;
alert(i);//undefined
i = 12;
alert(i);//12
alert(typeof(i));//number
script>
head>
<body>
body>
html>
注意:typeof()是javascript提供的一种函数,用于返回变量的数据类型.
3.关系运算
❤️等于: ==简单的字面值比较.
❤️全等于: ===除了字面比较外还有数据类型的比较.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
var a = "12";
var b = 12;
alert(a == b)//true
alert(a === b)//false
script>
head>
<body>
body>
html>
4.逻辑运算
在javascript语言中,所有变量都可以当作一个布尔类型的变量去使用.
0,null,“”(空串),undefined都被认为是false.
且运算: &&
第一种情况: 当表达式全为真的时候,取最后一个表达式的值.
第二种情况: 当有一个表达式为假的时候,返回第一个为假的表达式的值.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
var a = "abc";
var b = true;
var c = false;
var d = null;
alert(a && b);//true
alert(b && a);//abc
alert(a && c);//false
alert(a && d);//null
script>
head>
<body>
body>
html>
或运算: ||
第一种情况: 当表达式全为假的时候,取最后一个表达式的值.
第二种情况: 当有一个表达式为真的时候,返回第一个为真的表达式的值.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
var a = "abc";
var b = true;
var c = false;
var d = null;
alert(d || c);//false
alert(c || d);//null
alert(a || c);//abc
alert(a || b);//true
script>
head>
<body>
body>
html>
5.数组
js中数组的定义:
第一种情况:var 数组名 = []; —空数组
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
var arr = [];//空数组
alert(arr.length);//0
arr[0] = 12;
alert(arr[0]);
alert(arr.length);
arr[2] = "abc";
alert(arr.length);
alert(arr[2]);
alert(arr[1])//undefined
for(var i = 0;i < arr.length;i++){
alert(arr[i]);
}
script>
head>
<body>
body>
html>
第二种情况:var 数组名 = [1,‘abc’,true]; -----定义的同时赋值
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
var arr = [1,"abc",true];//空数组
alert(arr.length);//3
alert(arr[2]);//true
alert(arr[9]);//undefined
arr[0] = 12;
alert(arr[0]);//12
for(var i = 0;i < arr.length;i++){
//alert(arr[i]);
}
script>
head>
<body>
body>
html>
注意:js中的数组,只要我们通过数组下标赋值,那么最大的下标值就会自动的给数组做扩容操作.
6.函数
6.1.函数的第一种定义方式
使用function关键字来定义函数.
格式:
function 函数名(形参列表){
函数体
}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
//无参
function fun(){
alert("123456");
}
fun();
//有参
function fun2(a,b){
alert(a + b);
}
fun2(12,"abc");
//有返回值
function sum(num1,num2){
var r = num1 + num2;
return r;
}
alert(sum(100,50));
script>
head>
<body>
body>
html>
6.2.函数的第二种定义方式
格式: var 函数名 = function(形参列表){
函数体
}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
//无参
var fun = function(){
alert("123456");
}
fun();
//有参
var fun2 = function(a,b){
alert(a + b);
}
fun2(12,"abc");
//有返回值
var sum = function(num1,num2){
var r = num1 + num2;
return r;
}
alert(sum(100,50));
script>
head>
<body>
body>
html>
注意:js中不允许重载,否则会覆盖上面的定义.
6.3.函数的arguments隐形参数(只在function函数内)
说明:
(1).就是在function函数中不需要定义,但却可以直接用来接收所有参数的变量,就是隐形参数.
(2).js中的隐形参数,操作类似数组.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
function fun(a){
alert(arguments.length);//2
alert(arguments[0]);//1
for(var i = 0;i < arguments.length;i++){
alert(arguments[i]);
}
}
fun(1,2);
function sum(num1,num2){
var r = 0;
for(var i = 0;i < arguments.length;i++){
if(typeof(arguments[i]) == "number") {
r += arguments[i];
}
}
return r;
}
alert(sum(1,2,3,4,5,6));
script>
head>
<body>
body>
html>
7.JS中的自定义对象
7.1.Object形式的自定义对象
对象的定义:var 变量名 = new Object();
定义一个属性:变量名.属性名 = 值;
定义一个函数:变量名.函数名 = function(){}
对象的访问:变量名.属性名/函数名().
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
var obj = new Object();
obj.name = "靓仔";
obj.age = 18;
obj.fun = function(){
alert(this.name + this.age);
}
obj.fun();
script>
head>
<body>
body>
html>
7.2.{}形式的自定义对象
对象的定义:var 变量名 = {};
属性和函数的定义: var 变量名 = {
属性名 : 值,
属性名 : 值,
函数名 : function(){}
};
对象的访问:变量名.属性名/函数名();
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
//对象的定义,属性的定义,函数的定义
var obj = {
name : "靓仔",
age : 18,
fun : function(){
alert(this.name + this.age);
}
};
//对象的访问
alert(obj.name);
obj.fun();
script>
head>
<body>
body>
html>
8.js中的事件
(1).事件:电脑输入设备与页面进行交互的响应.
(2).事件的注册:静态事件注册和动态事件注册.
静态注册事件:通过html标签的事件属性直接赋予事件响应后的代码的这种方式.
动态注册事件:通过js代码得到标签的dom对象,然后通过dom对象.事件名 = function(){},这种形式赋予事件响应后的代码.
(3).常用的事件:
onload 加载完成事件:页面加载完成之后,常用于做页面js代码初始化操作.
静态注册:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
function onloadfun(){
alert("静态注册");
}
script>
head>
<body onload = "onloadfun();">
body>
html>
动态注册:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
window.onload = function(){
alert("动态注册");
}
script>
head>
<body >
body>
html>
onclick单击事件:常用于按钮的点击响应操作.
静态注册:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
function onclickfun(){
alert("静态注册");
}
script>
head>
<body>
<button onclick = "onclickfun();">按钮1button>
<button> 按钮2 button>
body>
html>
动态注册:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
window.onclick = function (){
var obj = document.getElementById("dh");
obj.onclick = function(){
alert("动态注册");
}
}
script>
head>
<body>
<button onclick = "onclickfun();">按钮1button>
<button id = "dh"> 按钮2 button>
body>
html>
onblur失去焦点事件:常用于输入框失去焦点后验证其输入内容是否合法.
静态注册:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
function onblurfun(){
console.log("静态注册");
}
script>
head>
<body>
用户名:<input type="text" onblur="onblurfun();"><br/>
密码:<input type="text"><br/>
body>
html>
动态注册:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
window.onload = function(){
var obj = document.getElementById("password");
obj.onblur = function(){
console.log("动态注册");
}
}
script>
head>
<body>
用户名:<input type="text" onblur="onblurfun();"><br/>
密码:<input type="text" id = "password"><br/>
body>
html>
注意:
(1)console是控制台对象,经常用来向浏览器的控制器打印输出.
(2)log()是打印的方法.
onchange内容发生改变事件:常用于下拉列表和输入框内容发生改变后操作.
静态注册:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
function onchangefun(){
alert("静态注册");
}
script>
head>
<body>
<select onchange = "onchangefun();">
<option>--红红--option>
<option>黄黄option>
<option>兰兰option>
select>
body>
html>
动态注册:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
window.onload = function(){
var obj = document.getElementById("color");
obj.onchange = function(){
alert("动态注册");
}
}
script>
head>
<body>
<select id = "color">
<option>--红红--option>
<option>黄黄option>
<option>兰兰option>
select>
body>
html>
onsubmit表单提交事件:常用于表单提交前,验证所有表单项是否合法.
静态注册:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
function onsubmitfun(){
alert("不合法");
return false;
}
script>
head>
<body>
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitfun();">
<input type="submit" value="静态注册"/>
form>
body>
html>
动态注册:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
window.onload = function(){
var obj = document.getElementById("form01");
obj.onsubmit = function(){
alert("不合法");
return false;
}
}
script>
head>
<body>
<form action = "http://localhost:8080" id="form01">
<input type="submit" value="动态注册"/>
form>
body>
html>
9.DOM模型
DOM全称:文档对象模型
Document对象的理解:
第一点:它管理了所有的HTML文档内容.
第二点:是一种树结构的文档.
第三点:它让我们把所有的标签都对象化.
第四点:通过document可以访问所有的标签对象.
10.验证用户名是否有效
验证规则:必须有字母,数字,下划线组成,并且长度是5到12.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
function onclickfun(){
var obj = document.getElementById("un");
var unt = obj.value;
var patt = /^\w{5,12}$/;
if(patt.test(unt)){
alert("用户名合法");
}else{
alert("用户名不合法");
}
}
script>
head>
<body>
用户名:<input type="text" id="un" value="wz">
<button onclick="onclickfun()">校验button>
body>
html>
注意:test()方法用于测试某个字符串,是否符合规则,符合就返回true,不符合就返回false.
正则表达式对象：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
//表示字符串中,是否包含字母e
var patt = new RegExp("e");
var patt = /e/;
//表示字符串中,是否包含字母a,b,c
var patt = /[abc]/;
//表示字符串中,是否包含小写字母
var patt = /[a-z]/;
//表示字符串中,是否包含大写字母
var patt = /[A-Z]/;
//表示字符串中,是否包含任意数字
var patt = /[0-9]/;
//表示字符串中,是否包含字母,数字,下划线
var patt = /\w/;
//表示字符串中,是否包含至少一个a
var patt = /a+/;
//表示字符串中,是否包含0个或多个a
var patt = /a*/;
//表示字符串中,是否包含1个或0个a
var patt = /a?/;
//表示字符串中,是否包含连续三个a
var patt = /a{3}/;
//表示字符串中,是否包含至少三个连续的a,至多五个连续的a
var patt = /a{3,5}/;
//表示字符串中,是否包含至少三个连续的a,至多n个连续的a
var patt = /a{3,}/;
//表示以a开头
var patt = /^a/;
//表示以a结尾
var patt = /a$/;
//从头到尾完全匹配
var patt = /^a{3,5}$/;
var patt = /\w{5,12}/;
var str = "aaa";
alert(patt.test(str));
script>
head>
<body>
body>
html>
两种常见的验证提示效果:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
function onclickfun(){
var obj = document.getElementById("un");
var unt = obj.value;
var patt = /^\w{5,12}$/;
var objs = document.getElementById("uns");
if(patt.test(unt)){
objs.innerHTML = "![](\"right.jpg\")
";
}else{
objs.innerHTML = "![](\"wrong.png\")
";
}
}
script>
head>
<body>
用户名:<input type="text" id="un" value="wz"/>
<span style="color:#ff0000;" id="uns">span>
<button onclick="onclickfun()">校验button>
body>
html>
前面已经介绍了getElementById(),接下来我们还要学习以下两种方法:
(1).getElementByName()
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
function checkAll(){
var obj = document.getElementsByName("hobby");
for(var i = 0;i < obj.length;i++){
obj[i].checked = true;
}
}
function checkNo(){
var obj = document.getElementsByName("hobby");
for(var i = 0;i < obj.length;i++){
obj[i].checked = false;
}
}
function checkReverse(){
var obj = document.getElementsByName("hobby");
for(var i = 0;i < obj.length;i++){
obj[i].checked = !obj[i].checked;
}
}
script>
head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp" checked="checked">c++
<input type="checkbox" name="hobby" value="cppp" checked="checked">java
<input type="checkbox" name="hobby" value="cp" checked="checked">python
<br/>
<button onclick="checkAll();">全选button>
<button onclick="checkNo();">全不选button>
<button onclick="checkReverse();">反选button>
body>
html>
注意:
(1).document.getElementsByName(“hobby”);是根据指定的name属性返回多个标签对象集合.
(2).这个集合的操作和数组一样.
(3).集合中每个元素都是DOM对象.
(4).集合中的元素顺序是它们在html页面中从上到下的顺序.
(5).checked表示选中状态,如果选中就是true,否则就是false.
(6).checked这个属性可读可写.
(2).getElementByTagName()
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
function checkAll(){
var obj = document.getElementsByTagName("input");
for(var i = 0;i < obj.length;i++){
obj[i].checked = true;
}
}
function checkNo(){
var obj = document.getElementsByTagName("input");
for(var i = 0;i < obj.length;i++){
obj[i].checked = false;
}
}
function checkReverse(){
var obj = document.getElementsByTagName("input");
for(var i = 0;i < obj.length;i++){
obj[i].checked = !obj[i].checked;
}
}
script>
head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp" checked="checked">c++
<input type="checkbox" value="cppp" checked="checked">java
<input type="checkbox" value="cp" checked="checked">python
<br/>
<button onclick="checkAll();">全选button>
<button onclick="checkNo();">全不选button>
<button onclick="checkReverse();">反选button>
body>
html>
注意:getElementById(),getElementByTagName(),getElementByName(),一定要在页面加载完成之后执行,才能查询到标签对象.
所谓页面加载完成也就是,浏览器获得所有信息.
我们再学习最后一个方法:createElement(tagname),通过给定的标签名,创建一个标签对象.
在写代码之前我们需要知道以下内容:
(1).节点就是标签对象.
(2).
getElementByTagName()
获取当前节点的指定标签名孩子节点.
appendChild(oChildNode)
可以添加一个子节点.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type = "text/javascript">
window.onload =function(){
var obj = document.createElement("div");
//obj.innerHTML = "我爱你";//标签的内容,但只在内存,不能显现出来.
//也可以,像下面这句话一样.
var tobj = document.createTextNode("我爱你");//创建文本节点对象.
//然后添加到div标签内.
obj.appendChild(tobj);
//最后将div标签加到body标签内.
document.body.appendChild(obj);
}
script>
head>
<body>
body>
html>