初识JavaScript

JavaScript

介绍

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行JavaScript代码。JS是Netscape网景公司的产品,最早取名为Livescript;为了吸引更多java程序员。更名为Javascript。

JS是弱类型,Java是强类型。

特点:

  1. 交互性(信息的动态交互)
  2. 安全性(不允许直接访问本地硬盘)
  3. 跨平台性(只要可以解释JS的浏览器都可以执行,和平台无关)

JavaScript和html代码的结合方式

第一种方式

只需要在head标签中,或者在body标签中,使用script标签来书写JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //它可以接收任意类型的参数,这个参数就是警告框的提示内容
    alert("Hello JavaScript!");
  </script>
</head>
<body>

</body>
</html>

第二种方式

使用script标签引入单独的JavaScript代码文件

1.js
alert("Hello JavaScript!");
hello.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--需要使用script引入外部的js文件来执行-->
  <script type="text/javascript" src="1.js"></script><!--src属性专门引入js文件路径-->
</head>
<body>

</body>
</html>

script标签可以用来定义js代码,也可以用来引入js文件。但这两个功能只能二选一使用,不能同时使用两个功能

变量

JavaScript的变量类型:

  • 数值类型:number
  • 字符串类型:string
  • 对象类型:object
  • 布尔类型:boolean
  • 函数类型:function

JavaScript特殊的值:

undefined:未定义,所有js变量未赋予初始值的时候,默认值都是undefined。

null:空值

NAN:全称是Not a Number。非数字。非数值

JS中的定义变量格式:

var 变量名 = 值;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
      var i =12;
      //typeof()是JavaScript语言提供的一个函数,它可以去变量的数据类型返回
      //typeof(i);    //number
      var a = 12;
      var b = "abc";
      alert(a*b); //NAN,非数字,非数值。
      alert(i);
  </script>
</head>
<body>

</body>
</html>

关系(比较)运算

等于:== 是简单的数值比较

全等于:=== 数值与数据类型全部相等

<script type="text/javascript">
      var a = "12";
      var b = 12;
      alert(a == b)//true
      alert(a === b)//false
  </script>

逻辑运算

且运算:&&

或运算:||

取反运算:!

在JavaScript语言中,所有的变量,都可以作为一个boolean类型的变量去使用。

0、null\undefined、“”(空串)都认为是false

数组

定义方式

格式

var 数组名 = []; //空数组
var 数组名 = [1,'abc',true];//定义数组同时赋值

JavaScript语言中的数组,只要我们通过数组下标赋值,那么最大的下标值,就会自动的给数组做扩容操作。

for(var i = 0;i<array.length;i++){
    alert(array[i]);
}

函数(重点)

第一种方式

使用function关键字来定义函数。

格式

function 函数名(形参列表){
	函数体
}

代码实现

<script type="text/javascript">
    function fun(){
    alert("无参函数");
	}
	fun()  //函数只有被调用了才会执行

	function fun1(a,b){
        alert("有参函数,a="+a+"b="+b);
    }
	fun1(123,"abc");
	
	function sum(num1,num2){//定义带有返回值的函数
        var ret = num1+num2;
        return ret;
    }
	alert(sum(1,2));
</script>

第二种方式

格式:

var 函数名 =function(形参列表){
	函数体
}

代码实现

<script type="text/javascript">
    var fun = function(){
        alert("无参函数");
    }
	fun();
	var fun1 = function(a,b){
        alert("有参函数,a="+a+"b="+b);
    }
    fun1(123,"abc")
    var sum = function(num1,num2){
        return num1 + num2;
    }
    alert(fun3(100,200));
</script>

注:JS不允许重载,会直接覆盖掉上一次的定义

函数的arguments隐形参数(只在function函数内)

含义:在function函数中不需要定义,可以直接用来获取所有参数的变量。JS中的隐形参数与Java的可变长参数一样,操作类似数组

代码演示

<script type="text.javascript">
    function fun(){
    	//alert(arguments.length); //参数个数
    	alert(argument[0]);//123
    	alert(argument[1]);//abc
    	alert("无参数函数");
	}
	fun(123,"abc");
</script>

编写一个函数,返回所有参数相加的和

function sum(num1,num2){
    var ret = 0;
    for(var i = 0;i<arguments.length;i++){
        if(typeof(argument[i]) == "number"){//防止误输入其他类型,导致结果异常
            ret+=argumrnt[i];
        }
    }
    return ret;
}

alter(sum(1,2,3,"andj",4,5,6,7,8,9,10));

自定义对象

Object形式

var 变量名 = new Object(); //对象实例(空对象)
变量名.属性名 =;//定义一个属性
变量名.函数名 = function(){} //定义一个函数

对象访问:
	变量名.属性/函数名();

代码演示

<script type="text/javascript">
      var obj = new Object();
      obj.name="小明";
      obj.age  = 18;
      obj.fun = function(){
          alert("姓名:"+this.name+" 年龄:"+this.age);
      }
      alert(obj.name);//小明
      alert(obj.age);//18
      obj.fun();
</script>

花括号形式

代码演示

格式:
var 变量名 = {
    属性名:值,
    属性名:值,//定义一个属性
    函数名:function(){}//定义一个函数
};

var obj = {
    name:"小明",
    age:18;
    fun:function(){
        alert("姓名:"+this.name+" 年龄:"+this.age);
    }
};
	alert(obj.name);
	obj.fun();

事件

定义:事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常见的事件:

onload 加载完成事件:页面加载完成之后,常用于做页面js代码初始化操作。

onclick 单击事件:常用于按钮的点击响应操作。

onblur 失去焦点事件:常用于输入框失去焦点后验证其输入内容是否合法。

onchange 内容发生改变事件:常用于下拉列表和输入框内容发生改变操作。

onsubmit 表单提交事件:常用于表单提交前,验证所有表单项是否合法。

事件的注册(绑定)

定义:就是通知浏览器,当事件响应后要执行哪些操作代码,叫事件注册或绑定。

静态注册

通过html标签的事件属性直接赋于事件响应后的代码,这种方式叫做静态注册。

动态注册

先通过js代码得到标签的dom对象,然后再通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码。

基本步骤:

  1. 获取标签对象
  2. 标签对象.事件名 = function()

onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload事件</title>
    <script type="text/javascript">
        //onload事件的方法
        function fun(){
            alert("Hello,静态注册");
        }
        //onload事件动态注册,是固定写法
        window.onload = function(){
            alert("Hello,动态注册");
        }
    </script>
</head>
<!--静态注册onload事件-->
<!--<body onload="fun()">-->
</body>
</html>

onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onclick事件</title>
    <script type="text/javascript">
        function fun(){
            alert("静态注册onclick事件")
        }

        //动态注册onclick事件
        window.onload = function(){
            //1.获取标签对象
            /*
             * document 是JavaScript语言提供的一个对象(文档)
             * get       获取
             * Element        元素(标签)
             * By         通过...      由...经...
             * Id         id属性
             *
             * getElementById通过id属性获取标签对象
             * */
            var button01 = document.getElementById("");
            //alert(button01);
            //2.通过标签对象.事件名 = function(){}
            button01.onclick = function() {
                alert("动态注册onclick事件");
            }
        }
    </script>
</head>
<body>
     <!--静态注册onclick事件-->
     <button onclick="fun()">按钮1</button>
    <button id="button01">按钮2</button>
</body>
</html>

onblur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur事件</title>
    <script type="text/javascript">
        //静态注册失去焦点事件
        function fun(){
            //console是控制台对象,是由JavaScript语言提供,专门用来向浏览器的控制器打印输出,用于测试使用。
            //log()是打印的方法
            console.log("静态注册失去焦点事件");
        }
        //动态注册onblur事件
        window.onload = function(){
            //1.获取标签对象
            var obj = document.getElementById("password");
            //2.通过标签对象,事件名 = function(){};
            obj.onblur = function(){
                console.log("动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
     用户名:<input type="text" onblur="fun();"><br/>
     密码:<input id="password" type="text"><br/>
</body>
</html>

onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange事件</title>
    <script type="text/javascript">
        function fun(){
            alert("已切换");
        }
        window.onload = function(){
            //1.获取标签对象
            var obj = document.getElementById("selectObj");
            //2.通过标签对象.事件名 = function(){}
            obj.onchange = function(){
                alert("成绩已修改");
            }
        }
    </script>
</head>
<body>
    请选择需要修改成绩的学生:
<!--静态注册onchange事件-->
<select onchange="fun()">
    <option>小明</option>
    <option>小红</option>
    <option>小王</option>
    <option>李华</option>
</select>
    请选择需要修改后的成绩等级:
<!--静态注册onchange事件-->
<select id="selectObj">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
</select>
</body>
</html>

onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit事件</title>
    <script type="text/javascript">
        //静态注册表单提交事件
        function fun(){
            //要验证所有表单项是否合法,如果有一个不合法就组织表单提交
            alert("静态注册表单提交事件,发现不合法事件,提交失败");
            return false;
        }

        window.onload = function(){
            //1. 获取标签对象
            var obj = document.getElementById("formId");
            //2.通过标签对象.事件名 = function(){}
            obj.onsubmit = function(){
                alert("动态注册表单提交事件,发现不合法事件,提交失败");
                return false;
            }
        }
    </script>
</head>
<body>
<!--return false可以阻止表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return fun();">
    <input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="formId">
    <input type="submit" value="动态注册"/>
</form>
</body>
</html>

DOM模型

DOM全称是Document Object Model文档对象模型。把文档中的标签,属性,文本,转换成为对象管理。

Document是一种树形结构的文档,有层级关系,把所有的标签都对象化,管理了所有的HTML文档的内容,通过document访问所有的对象标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM模型</title>
    <script type="text/javascript">
        function fun(){
        //1.当要操作一个标签的时候,一定要先获取这个标签对象。
            var obj = document.getElementById("username");
            //[object HTMLInputElement] 是dom对象
            var text = obj.value;
            //使用正则表达式技术来验证字符串是否符合某个规则。
            var patt = /^\w{5,12}$/;//长度为5到12位,必须由字母、数字。
            if(patt.test(text)){
                alert("用户名合法!");
            }else{
                alert("用户名不合法!");
            }
        }
    </script>
</head>
<body>
    用户名:<input type="text" id="username" value=""/>
    <button onclick="fun()">校验</button>
</body>
</html>

正则表达式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


两种常见的验证提示效果(以输入用户名为例)

第一种:

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一种验证提示效果</title>
    <script type="text/javascript">
        function fun(){
        //1.当要操作一个标签的时候,一定要先获取这个标签对象。
            var obj = document.getElementById("username");
            //[object HTMLInputElement] 是dom对象
            var text = obj.value;
            //使用正则表达式技术来验证字符串是否符合某个规则。
            var patt = /^\w{5,12}$/;//长度为5到12位,必须由字母、数字。
            var usernameSpan = document.getElementById("usernameSpan");
            //innerHTML表示起始标签和结束标签中的内容
            //innerHTML属性可读可写
            if(patt.test(text)){
                usernameSpan.innerHTML = "用户名合法!";
            }else{
                usernameSpan.innerHTML = "用户名应由5~12个字母或数字构成";
            }
        }
    </script>
</head>
<body>
    用户名:<input type="text" id="username" value=""/>
    <span id="usernameSpan" style="color:red;"></span>
    <button onclick="fun()">校验</button>
</body>
</html>

运行结果如下图,当输入不合法时:在这里插入图片描述

当输入合法时:在这里插入图片描述

第二种:

代码实现(需要一张打勾和一张打叉的图片)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二种验证提示效果</title>
    <script type="text/javascript">
        function fun(){
        //1.当要操作一个标签的时候,一定要先获取这个标签对象。
            var obj = document.getElementById("username");
            //[object HTMLInputElement] 是dom对象
            var text = obj.value;
            //使用正则表达式技术来验证字符串是否符合某个规则。
            var patt = /^\w{5,12}$/;//长度为5到12位,必须由字母、数字。
            var usernameSpan = document.getElementById("usernameSpan");
            if(patt.test(text)){
                usernameSpan.innerHTML = "<img src=\"right.png\" width=\"20\" heigh=\"20\" align=\"center\">";
            }else{
                usernameSpan.innerHTML = "<img src=\"wrong.png\" width=\"20\" heigh=\"20\" align=\"center\">用户名应由5~12位字母或数字组成";
            }
        }
    </script>
</head>
<body>
    用户名:<input type="text" id="username" value=""/>
    <span id="usernameSpan" style="color:red;"></span>
    <button onclick="fun()">校验</button>
</body>
</html>

运行结果如下图,当输入不合法时:在这里插入图片描述

当输入合法时:在这里插入图片描述

createElement方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createElement方法</title>
    <script type="text/javascript">
      window.onload = function(){
        var divObj = document.createElement("div");//在内存中<div></div>
        var text = document.createTextNode("Hello,JavaScript!");
        divObj.appendChild(text);//等价于:divObj.innerHTML = "Hello,JavaScript!"
        //添加子元素
        document.body.appendChild(divObj);
      }
    </script>
</head>
<body>
<div></div>
</body>
</html>

getElementsByName方法

此方法是根据指定的name属性查询返回多个标签对象集合,该集合的操作与数组一样,集合中的每个元素都是dom对象,元素顺序是html页面从上到下的顺序

代码演示(全选、全不选、反选)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByName方法</title>
  <script type="text/javascript">
    //全选
    function SelectAll(){
      var hobbies = document.getElementsByName("hobby");
      //check‘ed表示复选框的选中状态,选中为true,反之为false,该属性可读可写
      for(var i = 0;i < hobbies.length; i++){
        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="c"/>C
  <input type="checkbox" name="hobby" value="c++"/>C++
  <input type="checkbox" name="hobby" value="java"/>Java
  <input type="checkbox" name="hobby" value="js"/>JavaScript
  <input type="checkbox" name="hobby" value="go"/>Go
  <input type="checkbox" name="hobby" value="python"/>Python <br/>
  <button onclick="SelectAll()">全选</button>
  <button onclick="UnselectAll()">全不选</button>
  <button onclick="SelectReverse()">反选</button>
</body>
</html>

getElementsByTagName方法

此方法是按照指定标签名来进行查询并返回集合,与getElementsByName方法相似

代码演示(全选)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByTagName方法</title>
  <script type="text/javascript">
    //全选
    function SelectAll(){
      var inputs = document.getElementsByTagName("input");
      for(var i = 0;i < inputs.length; i++){
        inputs[i].checked = true;
      }
    }
  </script>
</head>
<body>
  兴趣爱好:
  <input type="checkbox" name="hobby" value="c"/>C
  <input type="checkbox" name="hobby" value="c++"/>C++
  <input type="checkbox" name="hobby" value="java"/>Java
  <input type="checkbox" name="hobby" value="js"/>JavaScript
  <input type="checkbox" name="hobby" value="go"/>Go
  <input type="checkbox" name="hobby" value="python"/>Python <br/>
  <button onclick="SelectAll()">全选</button>
</body>
</html>

注:document对象的三个查询方法,如果有id属性,优先使用getElementById方法进行查询;若没有id属性,则优先使用getElementsByName方法来进行查询;若两者都没有,才使用getElemenrsByTagName

以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。

节点的常用属性和方法

在这里插入图片描述
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值