对javaScript的简单学习——笔记

笔记内容是根据尚硅谷javaweb教程编辑

1、JavaScript介绍

Javascript语言诞生主要是完成页面的数据验证。因此它运行再客户端,需要运行浏览器来解析执行javascript的代码。js(javascript的缩写)与java没有任何关系,是那个年代为了趁java的热度改的名。

js是弱型型语言、java是强类型语言

js的特点:

  • 交互性(它可以实现信息的动态交互)
  • 安全性(不允许直接访问本地硬盘)
  • 跨平台(只要是可以解释js的浏览器都可以执行,和平台无关)

2、javaScript和html代码的结合方式

2.1第一种方式

  • 只需要在head标签中,或者body标签中,使用script标签来书写javascript代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <script type="text/javascript">
      //alert是javascript提供的一个警告框函数
      //他可以接收任意类型的参数,这个参数就是警告框中的提示信息
      alert('hello')
    </script>
</head>
<body>

</body>
</html>

2.2第二种方式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert</title>
<!-- 使用script引入外部的js文件来执行
      src属性专门用来引入js文件路径(可以是相对路径,也可以是绝对路径)

      script标签可以用来定义js代码,也可以用来引入js文件
      但是两个功能二选一用。不能同时使用两个功能
-->
    <script type="text/javascript" src="Demo02Script.js"></script>
    <script type="text/javascript">
      alert("你去管别人,别人还不乐意呢!")
    </script>
</head>
<body>

</body>
</html>

3、变量

什么是变量?变量是可以存放某些值的内存的命名。

JavaScript的变量类型

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

javascript里面特殊的值:

特殊值含义
undefined未定义,所有js变量为赋于初始值的时候,默认值都是undefined
null空值
NAN全称是:Not a Number、非数字、非数值

js中的定义变量的格式

var	变量名
var 变量名 =
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>variable</title>
    <script type="text/javascript">
        var i;
        // alert(i);// undefined
        i = 12;
        // alert(i);//12

        //typeof()是JavaScript语言提供的一个函数

        //他可以返回变量的数据类型
        alert(typeof(i)); // number

        alert(i*"adf");//NaN非数字、非数值

        </script>
</head>
<body>

</body>
</html>

4、关系(比较运算)

等于==
全等于===
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>relationship</title>
    <script type="text/javascript">
      var a = 12;
      var b = "12";
      //"=="   等于,简单的做字面值的比较
      //"==="  除了做字面值的比较之外,还会比较两个变量的数据类型
      alert(a==b);//true
      alert(a===b);//false

    </script>

</head>
<body>

</body>
</html>

5、逻辑运算

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

0、null、undefined、“”(空的字符串) 都认为是 false;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>logic</title>
    <script type="text/javascript">

       var i;//undefined
       if (i){
           alert("undefined为真");
       }else{
           alert("undefined为假");
       }
        var a= 0;
        if(a) {
            alert("0为真");
        }else{
            alert("0为假");
        }

        var b = null;
        if(b){
            alert("null为真")
        }else{
            alert("null为假")
        }

        var c="";
        if(c){
            alert("空串为真");
        }else{
            alert("空串为假");
        }
    </script>
</head>
<body>

</body>
</html>

选定变量

var a = "abc";
var b = "true";
var d = false;
var c = null;
var e = 0;

&&且运算。有两种情况:

  • 第一种:当表达是全为真的时候,返回最后一个表达式的值。

  • 第二种:当表达式中,有一个为假时,返回第一个表达式的值

alert(a && b); //true
alert(b && a); //"abc"
alert(a && c); //null
alert(d && e); //false
alert(a && e && d); //0

|| 或运算

  • 第一种情况:当表达式全为假时,返回最后一个表达式的值
  • 第二种情况:只要有一个表达式为真,返回第一个为真的表达式的值
alert(d || c);  //null
alert(d || c || e); //0
alert(a || c); //"abc"
alert(c || b || a);  //true

6、数组

js中数组的定义:

​ 格式:

var	数组名 = []; //空数组

var 数组名 = [1,'abc',true]; //定义数组同时赋值元素
 <script type="text/javascript">
        var arr = [];//定义一个空数组
        // alert(arr.length);//当前数组长度为0

        arr[0] = 1;
        // alert(arr[0]);
        //alert(arr.length);//当前数组长度为1

        //javascript语言中的数组,只要我们通过数组下标赋值,那么最大的下标值,就会自动给数组做扩容操作
        arr[2] = "hucheng";
        alert(arr[1]);//中间索引为1的元素没有被赋值,所以时undefined
        alert(arr.length);

        //遍历数组
        for (var i = 0; i < arr.length; i++) {
          alert(arr[i]);
        }
    </script>

7、函数

7.1函数定义的两种方式

  • 第一种:可以使用function关键字来定义函数
  • 格式
function 函数名(形参列表){
	函数体
}
  • 实例
<script>
      function fun(){
        alert("我被调用了啊!");
      }

      fun();
 </script>
  • 第二种:可以使用如下格式:
var 函数名 = function(形参列表){函数体}
  • 实例

  •     <script>
            //定义函数
            var fun=function(){
                alert("无参函数");
            }
            //调用函数
            // fun();
    
            var fun2 = function(a,b){
                alert("有参函数a="+a+",b="+b);
            }
            // fun2(1,2);
    
        //    有返回值
            var fun3 = function(a,b){
                return a+b;
            }
            alert(fun3(1,2));
        </script>
    

注:在Java中函数允许重载。但是在js中函数重载会直接覆盖掉上一次的定义

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

就是在function函数中不需要定义,但却可以直接用来直接获取所有参数的变量。我们管它叫隐形参数。

隐形参数特别像java基础的可边长参数一样

public void fun(Object … args);

可变长参数实质上是一个数组

js中的隐形参数也跟java的可变长参数一样

<script type="text/javascript">
        function fun(){
          alert(arguments.length);
          for (var i = 0; i < arguments.length; i++) {
              alert(arguments[i]);
          }
        }
        // fun(1,"haha",true);

        //编写一个函数,用于计算所有所有参数的和
        function sum(){
          var result = 0;
          for (var i = 0; i < arguments.length; i++) {
            result +=arguments[i];
          }
          return result;
        }
        alert(sum(1,2,3,4,5,6,7,8,9))
    </script>

8、js中自定义对象

Object形式自定义对象

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

对象的访问
对象.属性名/方法
  • 实例代码
<script>
        //对象的定义:
        var obj = new Object();
        obj.name="胡成";
        obj.age=18;
        obj.fun=function(){
          alert("姓名:"+this.name+",年龄:"+this.age);
        }

        //访问
        // alert(obj.age);
        obj.fun();
      </script>

{}花括号形式的自定义对象

var 空变量 ={}//空变量 

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

<script>
        var obj ={};
        alert(typeof(obj));
        var object = {
          name:"zhanzhiwen",
          age:"21",
          fun:function(){
            alert("姓名:"+this.name+",年龄:"+this.age);
          }
        }
        alert(object.name);
        object.fun();
    </script>

9、js中的事件

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

常用事件:

  • onload 加载完成事件: 页面加载完之后,常用于做页面js代码初始化操作
  • onlick 单击事件: 常用于按钮的点击响应操作
  • onblur失去焦点事件: 常用于输入框失去焦点后验证其输入内容是否合法
  • onchange内容发生改变事件: 常用于下拉列表和输入框内容改变后操作
  • onsubmit表单提交事件: 常用于表单提交前,验证所有表单项是否合法

事件的注册又分为静态注册和动态注册两种

  • 什么是事件的注册(绑定)?
    • 即告诉浏览器,当事件响应后要执行哪些操作代码,叫做事件注册或事件绑定
  • 静态注册事件
    • 通过html标签的事件属性直接赋予事件响应后的代码,这种方式我们叫静态注册。
  • 动态注册事件:是指先通过js代码得到标签的dom对象,然后再通过dom对象.事件名=function()这样的形式赋予事件响应后的代码,叫动态注册
    • 动态注册基本步骤:
      • 1、获取标签对象
      • 2、标签对象.事件名 = function(){}

9.1onload事件

静态注册

  • 利用标签的属性
<!--静态注册onload事件
			onload事件是浏览器解析完页面之后就会自动触发的事件
-->
<body onload="alert('静态注册onload事件')">

</body>
  • 缺点:当浏览器自动触发的事件很多事(代码多),很显然不可能就在body的属性值里添加代码
<head>
    <meta charset="UTF-8">
    <title>onload</title>
  <script type="text/javascript">
        function fun(){
          alert("静态注册onload事件,所有代码");
        }
  </script>
</head>
<body onload="fun();">

</body>

动态注册

onload事件动注册是固定写法,是script标签中的window.onload

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

        //onload动态注册,是固定写法
        window.onload = function(){
          alert("动态注册的load事件")
        }
  </script>
</head>
<!--<body οnlοad="alert('静态注册')"-->
<!--<body οnlοad="fun();">-->
<body>

</body>
</html>

9.2onclick单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onlick</title>
    <script>
        //静态注册
        function fun(){
            alert("静态使onlick件");
        }

        //动态注册onclick
        window.onclick = function(){
            //1.获取标签对象
            var btnObj =document.getElementById("btn01");
            /*
            document  是javascript语言提供的一个对象(文档)
            get       获取
            Element   元素(就是标签)
            By
            id         id属性
             */

            //2.标签对象.事件名
            btnObj.onclick = new function(){
                alert("动态注册的onclick事件");
            }
        }
    </script>
</head>
<body>
    <button onclick="fun()">按钮1</button>
    <button id="btn01">按钮2</button>
</body>
</html>

9.3onblur失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur</title>
    <script>
        //静态注册失去焦点事件
        function fun(){
            //console是控制台对象,是由JavaScript语言提供,专门用来向浏览器的控制器打印输出,用于测试使用
            //log()是打印方法
            console.log("静态注册失去焦点事件")
        }

        //动态注册 onblur事件
        window.onload = function(){
            //1.获取标签对象
            var passwordObj = document.getElementById("pwd");
            alert(typeof(passwordObj));
            //2.
            passwordObj.onblur = function(){
                console.log("动态注册失去焦点事件")
            }
        }
    </script>
</head>
<body>
    用户名:<input type="text" onblur="fun()"/><br/>
    密码:<input type="password" id="pwd"/><br/>
</body>
</html>

9.4onchange内容发生改变事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit</title>
    <script>
        //onsubmit的作用是验证所有的表单项是否合法,如果不合法就会住阻止表单提交
        <!--return false可以阻止表单的提交-->
        function fun(){
          alert("静态注册单提交事件————发现不合法");
          return false;
        }

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

10、DOM模型(重点)

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

对Document对象的理解:

  • 第一点:Document它管理了所有的Html文档内容
  • 第二点:document它是一种树形 结构的文档。有层级关系
  • 第三点:把所有的标签都对象化
  • 第四点:我们可以通过document访问所有的标签对像

在这里插入图片描述

  • 用一个类记录相关信息

10.1Document对象中的方法介绍(重点)

  • document.getElementById(elementId)

    • 通过标签的id属性查找标签的dom对象,elementId是标签的id属性值

    • 返回对拥有指定id的第一个对象的引用

    • 实例代码

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>getElementById</title>
          <script type="text/javascript">
            /*
            * 需求:当用户点击率校验按钮,要获取输入框里内容,并校验其是否合法
            * 校验的规则是:必须由数字字母。下划线组成。并且长度是5到12位
            * */
              function onclickfun(){
                //1.当我们需要操作一个标签的时候一定要先获取这个标签元素
                var usernameObj = document.getElementById("username");
                // alert(usernameObj);
                // alert(usernameObj.id);
                var text = usernameObj.value;
                // alert(text);
      
                //2.正则表达式
                var patt=/^\w{5,12}$/;
                //test()方法用于测试某个字符串,是否符合我的规则,
                //匹配就返回true
      
                var usernamespan = document.getElementById("spantext");
                // alert(usernamespan);
                if(patt.test(text)){
                    usernamespan.innerHTML="用户名合法";
                }else{
                    usernamespan.innerHTML="用户名不合法";
      
                }
      
              }
      
          </script>
      </head>
      <body>
            用户名<input type="text"  id="username" value=""/>
            <span style="color:red" id="spantext"></span>
            <button onclick="onclickfun();">校验</button>
      </body>
      </html>
      
  • document.getElemetsByName(elementName)

    • 通过标签的name属性查找标签dom对象,elementName标签的name属性值

    • 返回带有指定名称的对象集合

    • 实例代码

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>getElementGetByName</title>
          <script type="text/javascript">
                //全选
                function checkAll(){
                    //让所有复选框都选中
                    // document.getElementsByName();是根据指定的name属性,返回多个标签对象的集合
                    //集合中每个元素都是dom对象
                    var hobbies = document.getElementsByName("hobby");
                    //checked表示复选框的状态(是否被选中)
                    //这个属性可读可写
                    // alert(hobbies.length);
                    for (var i = 0; i < hobbies.length; i++) {
                        hobbies[i].checked = true;
                    }
                }
                //全不选
                function checkFalse(){
                    var hobbies = document.getElementsByName("hobby");
                    for (var i = 0; i < hobbies.length; i++) {
                        hobbies[i].checked = false;
                    }
                }
                function checkReverse(){
                    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="js">JavaScript
            <br/>
            <button onclick="checkAll()">全选</button>
            <button onclick="checkFalse()">全不选</button>
            <button onclick="checkReverse()">反选</button>
      </body>
      </html>
      
  • document.getElementsByTagName(tagname)

    • 通过标签名查找标签dom对象,tagname是标签名

    • 返回带有指定标签的对象集合

    • 实例代码

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>getelementTagName</title>
          <script>
              function fun(){
                  // document.getElementsByName("input")是按照指定的标签名来查询并返回集合
                  //这个集合和数组一样
                  //集合中都是dom对象
                  //集合中的顺序是他们在html页面中从上到下的顺序
                  var tagNames = document.getElementsByTagName("input");
                  for (var i = 0; i < tagNames.length; i++) {
                      tagNames[i].checked = true;
                  }
              }
          </script>
      </head>
      <body>
            报考学校
            <input type="checkbox" value="cpp" checked="checked"/>c++
            <input type="checkbox" value="java"/>java
            <input type="checkbox" value="js"/>javascript
            <br/>
            <button onclick="fun()">全选</button>
      </body>
      </html>
      
  • 注:上述document对象的三个查询方法,如果有id属性,优先使用getElementbyId方法来查询,如果没有Id属性,则优先使用getElementsByName方法来查询,如果id属性和name属性都没有,则使用getElementsByTagName查询

  • document.createElement(tagName) 通过给定的标签名,创建一个标签对象。tagName是要创建的标签名

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>createElement</title>
          <script type="text/javascript">
              window.onload = function(){
                  //使用js代码来创建html标签,并显示在页面上
                  //标签的内容是:<div>好好学习</div>
                  var element = document.createElement("div");
                  element.innerHTML = "好好学习";
                  //向body中添加子元素
                  document.body.appendChild(element);
              }
          </script>
      </head>
      <body>
      
      </body>
      </html>
      

10.2 JavaScript中的 正则表达式

语法:

var patt = new RegExp(patten,modifiers)
或者更简单的方式:
var patt = /pattern/modifiers;
  • pattern(模式)描述了表达式的模式

  • modifier(修饰符)用于指定全局匹配,区分大小写的匹配和多行匹配

  • 实例代码:

  •     <script type="text/javascript">
            //表示要求字符串中是否包含字符串e
            var patt1 = new RegExp("e");
            //或者 var patt = /e/;
            console.log(patt1.test("aesdf"));//浏览器控制台打印输出(按F12,console模块)
    
            //表示要求字符串中,包含a或b或c
            var patt2=/[abc]/;
            console.log(patt2.test("afadg"));
    
            //表示要求字符串是否包含小写字母
            var patt3 =new RegExp("[a-z]");
            console.log(patt3.test("asSADFF1"));
    
            //字符串是否包含数字
            var patt4 = /[1-9]/;
    
            //表示要求字符串,是否包含字母、数字、下划线
            var patt5 = /\w/;
    
            //表示字符串中是否包含至少一个a
            var patt6 = /a+/;
    
            //表示字符串中是否包含零个或者多个b
            var patt7 = /b*/;
    
            //表示字符串是否包含一个或零个0
            var patt8 = /a?/;
    
            //表示字符粗是否包含连续的三个c
            var patt9 = /a{3}/
    
            //表示字符串至少包含4个,最多包含6个连续的8
            var patt10 = /^a{4,6}$/;
            //注意区分与/a{4,6}/的区别
    
            //以a开头  var patt = /^a/
            //以a结尾  var patt = /b$/
    
      </script>
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值