首页 前端知识 JavaWeb第三章:JavaScript的全面知识

JavaWeb第三章:JavaScript的全面知识

2024-02-14 09:02:19 前端知识 前端哥 996 331 我要收藏

目录

前言

一.JavaScript的简介

💖概念

💖学习内容

二.JavaScript的引入方式

💖内部脚本

💖外部脚本

三.JavaScript的基础语法

💖语法的书写

💖变量 

✨ 全局变量      

✨局部变量

✨常量

 💖JavaScript的数据类型

💖JavaScript运算符

✨运算符的讲解

✨类型转换

💖流程控制语句

四.JS函数

五.JS对象

💖Array讲解

✨Array基本知识

✨Array之属性与方法

💖String讲解

✨String之属性与方法

💖JSON对象

✨自定义对象

✨JSON

六.JS之BOM

💖window

💖Location

七.JS之DOM

💖如何获取该元素对象

💖修改文本内容                                                                                      

八.事件监听

💖常见事件

💖事件绑定

总结


🎁个人主页:tq02的博客_CSDN博客-C语言,Java,Java数据结构领域博主
🎥 本文由 tq02 原创,首发于 CSDN🙉
🎄 本章讲解内容:JavaScript的全面简洁讲解

🎁欢迎各位→点赞👍 + 收藏⭐ + 评论📝+关注

 编译器:VS Code

前言

        本博文主要简单讲解JavaScript的概要知识,为了后端而作准备,虽然是概要知识,但是依然是十分主要的知识点,更好的了解前端知识,以便后期后端知识的学习。

官方帮助手册:https://www.w3school.com.cn/

一.JavaScript的简介

💖概念

  1. JavaScript (简称:JS) 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的,它能使网页可交互。
  2. JavaScript和Java 是完全不同的语言,不论是概念还是设计。但是基础语法类似。
  3. JavaScript在1995年由 Brendan Eich 发明,并于1997年成为ECMA标准
  4. ECMAScript 6(ES6)是最新的JavaScript版本(发布于2015年)。

💖学习内容

JS主要学习以下内容: 

  • JavaScript是控制网页行为的,因此需要引入到HTML文档,而引入的方式本文会有讲解
  • Java和JavaScript毫无联系,只是名字有点相似,但是在基础语法方面类似,并且JavaScript是一门弱类型语言,且有单独的数据类型。
  • JS函数不同于Java函数,主要用于是被设计为执行特定任务的代码块。
  • JS对象,常用的对象,例如Array、String等,以及Json、BOM
  • JS事件绑定等

二.JavaScript的引入方式

将JS代码与HTML文档代码结合,如此一来便可以控制网页的行为,而引入方式有2种,分别为:内部脚本和外部脚本

💖内部脚本

内部脚本:将JS代码引入到HTML页面当中

JS代码 内部引入 要求:

  1. JavaScript代码必须位于<script>  </script>标签之间
  2. 在HTML文档中,可以在任意地方,放置任意数量的<script>
  3. 一般会把脚本置于<body>元素的底部,可改善显示速度

例如:

//script可在任意位置
<html lang="en">
<head>
    <title>JS代码</title>
    <script>/* JS代码 */</script>
</head>

<body>  
  <script>/* JS代码 */</script>
</body>

<script>/* JS代码 */</script>
</html>

💖外部脚本

外部脚:将JS代码定义在外部JS文件(xx.js 文件)中,然后引入到 HTML页面中

JS代码 外部引入 要求

  1. 外部JS文件中,只包含]S代码,不包含<script>标签
  2. <script>标签不能自闭合

引入语法<script src="js文件"></script>

例如:

//js文件--new.js
   代码文件

//HTML文件---old.html
<html lang="en">
<head>
    <title>JS代码</title>
</head>

<body>
    <script src="new.js"></script>
    //自闭合:<script src="new.js"/>  错误,不可以这样
</body>

</html>

三.JavaScript的基础语法

基础语法包括三种:语法书写变量数据类型和运算符及流程控制语句

注:JavaScript是弱类型语言、JavaScript的运算符和流程控制语句和Java是十分相似的

💖语法的书写

JavaScript语法的基本要求:

  1. 区分大小写:与Java 一样,变量名、函数名以及其他一切东西都是 区分大小写 的
  2. 每行结尾的分号可有可无,但是建议大家使用。
  3. 注释:   单行注释: //注释内容         多行注释: /*注释内容*/
  4. 大括号代表代码块

JavaScript的输出形式有三种方式:

  • window.alert()

将括号的内容写在警告框之中,浏览器负责弹出,注:可以将window.省略,直接使用alert()

  • document.write()

将括号中的信息填入到网页之中

  • console.log()

将括号内的内容写入控制台,控制台:网页->右击 "检查" ->点击 "console"

代码示例:

<html lang="en">
<head>
    <title>JS输出</title>
</head>
<body>
    <script>
        window.alert("我喜欢学习");
        document.write("我喜欢Java");
        console.log("我喜欢中国");
    </script>
</body>
</html>

输出结果:


💖变量 

       JavaScript的变量声明不像Java,会使用各种数据类型声明,目前JavaScript有两关键字可以定义变量,分别为:var(全局变量)、let(局部变量)

示例:var a=10; let b=20

变量名需要遵循如下规则:

  1.  组成字符可以是任何字母、数字、下划线()或美元符号 (S)
  2. 数字不能开头
  3. 建议使用驼峰命名

JavaScript是一门弱类型语言,变量可以存放各种类型的值。因此存在着原本的值被其他类型替换

ECMAScript 6新增了let(局部变量)、const(常量)

  全局变量      

      关键字:var     特点:1、作用域很大   2、可重复定义

<script>
{
    var a=10;
    var a="tq02";
}
   alert(a);  
</script>

其中a被定义了两次,分别为10和"tq02",而最后定义是tq02,因此a为tq02。

局部变量

    关键字:let      特点:1、作用域为所在的代码块    2、不可以重复声明

<html lang="en">
<head>
    <title>JS输出</title>
</head>
<body>
    <script>
        var a=10;
        var a="tq02";
        //不可以重复声明
        //let a="20";
        {
            let a=20;
            alert(a);  //警告框输出为20;出了代码块就失效了
        }
        window.alert(a);
        document.write("我喜欢Java");
        console.log("我喜欢中国");
    </script>
</body>
</html>

✨常量

关键字:const      特点:一旦声明,常量的值就不可以改变,编译时,不会报错,但无法编译成功

<html lang="en">
<head>
    <title>JS输出</title>
</head>
<body>
    <script>
        const a=10;
        //  a="tq02"
        window.alert(a);
    </script>
</body>
</html>

 💖JavaScript的数据类型

        因为JavaScript是弱类型语言,在定义变量时,不用指定数据类型,但是JavaScript是存在数据类型的,JavaScript数据类型分为原始类型、引用类型 ,引用类型就是JS函数,在下一章有详细讲解,我们主要讲解原始类型

原始类型取值
number数字(小数、整数、NAN(not a numer))
string字符串,单双引号皆可
booleantrue、false
null对象为空
undefined当声明的变量未初始化时,默认为underfined

问:在平时中我们应该如何查看变量的元素类型呢?

答:使用关键字:typeof

<script>
//number类型
    alert(typeof 3);
    alert(typeof 3.15);

//string
    alert(typeof "tq02");
    alert(typeof 'tq02');

//boolean
    alert(typeof true);
    alert(typeof false);

//object
   alert(typeof null);

//underfined
    var a;
    alert(typeof a);

而细心的人一定可以发现,为什么null的数据类型是object啊?

官方作出的解释:这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。

💖JavaScript运算符

✨运算符的讲解

JavaScript运算符
算数运算符       +      —    *      /     %   ++   --
关系运算符    >  <   >=    <=    !=    ==    ===
逻辑运算符    &&       ||   !
条件(三目)运算符 条件表达式?true_value:false_value
赋值运算符  =     +=     *=   !=    - =    /=     %=   

JavaScript的运算符和Java大致一样,但是不同的就在于 === 不同于==, ===表示的是值与类型相同,而==为值相同

例如:

<script>
    a=10;
    alert(a=="10")  //true
    alert(a==="10")  //false
<script>

如上图,a=="10"时,a会自动进行类型装换,因此相等,而a==="10",错误,因为类型不同。

类型转换

类型装换分2种,字符串转换成数字,其他类型转换为boolean类型。

字符串转换为数字

将字符串字面值转换为数字,如果字面值不是数字,则转换为NaN。

而在转换的过程中有几个特别注意的。

<script>
    parseInt("12")  //12
    parseInt("ABC12") //NaN
    parseInt("12AB")   //12
</script>

注:如果字符串是数字+字母,则装换为前面的数字

其他类型转换为boolean类型

  • Number:0 和 NaN为false 其他均为true
  • String:空字符串为false  其他转换为true
  • null和unde:均为false

代码示例:

<script>
    if(0){            //0为false,不成立
        alert("”0转换为false");
    }
    if(NaN){        //NaN为false,不成立
        alert("NaN转换为false");
    }
    if(1){
        alert("1转换为true");
    }

    if(""){            //空字符串为false,不成立
        alert("false");
    }
    if("tq02"){        //字符串为true,
        alert("true")
    }

if(null||undefined){   //为false,不成立,不执行
    alert(false);
}

 注:"  "不是空字符串,中间含有空格,因此为true

💖流程控制语句

JavaScript流程控制语句有以下几种,用法和Java是一致的。

  1. if....else if.....else
  2. switch
  3. for
  4. while
  5. do...while

四.JS函数

函数:被设计为执行特定任务的代码块,通过使用关键字 function进行定义。

语法格式:

第一种定义方法
function 函数名(参数1,参数2..){
        //执行的代码
}

第二种定义方法
var 变量名=function(参数1,参数2){
        //待执行代码
    }

注:1、形式参数不需要类型。因为JavaScript是弱类型语言

       2、返回值也不需要定义类型,可以在函数内部直接使用return返回即可

第一种定义方法代码 展示:

//注:形式参数不需要类型,所以直接为参数名
function  add(a,b){
    return a+b;
}

var result=add(10,20);

 第二种定义方法代码 展示:

var result=add(a,b){
    return a+b;
};
    //函数调用的方法一样
add(20,30);

 函数调用时,需要注意一点,函数调用时,可以传递任意个数的参数,但是函数只接收前几个。

例如:

var result=add(a,b){  //只接收20和30
    return a+b;
};
    
add(20,30,50,60,70);

五.JS对象

JavaScript中含有很多对象,官方资料查找:https://www.w3school.com.cn/

而我们主要讲解3种对象,JS当中最为重要的Array、String、JSON

💖Array讲解

✨Array基本知识

Array对象,我们很熟悉,用于定义数组的。

定义方法:

  1.  var  变量名 =new Array(元素列表);
  2. var   变量名=[ 元素列表 ];

访问方法:

  • 变量名[ 下标值 ]         注:和Java一样,从下标0开始。

特点:长度可变、类型可变

长度可变讲解

<script>
    var a=new Array(1,2,3,4);
    a[10]=50;
</script>

        如上述代码,我定义了一个数组,长度为4位,然后我在下标为9的位置上,赋值为50,并没有出错,而有人会问那么下标4到下标8的值为什么呢?由于没有赋值,因此为默认值undefined。

类型可变讲解

<script>
    var a=new Array(1,2,3,4);
    a[10]=50;
    a[6]="tq02";
</script>

        在下标为5的位置上,赋值了tq02,而并没有报错,正常编译。


✨Array之属性与方法

Array常用属性:length。     作用:获取数组长度

Array常用方法:

  1. forEach()       作用:遍历数组,遍历数组中有值的元素。
  2. push()           作用:添加元素,可一次性添加多个元素。
  3. splice()          作用:删除元素,从某个下标删到某个下标。

forEach()方法

<script>
        var a=[1,2,3,4,5,6,7,8];
        a.forEach(function(e){
             alert(e);
        })
    </script>

额外讲一个箭头函数,将函数关键字function删去,如果有形参就使用,没有就空着,然后打上箭头(=>)。其他不变。例如将上述代码修改为箭头函数,使代码更为简洁

<script>
        var a=[1,2,3,4,5,6,7,8];
        a.forEach((e)=>{
             alert(e);
        })
    </script>

push()方法

    <script>
        var a=[1,2,3,4,5,6,7,8];
        a.push(3,4,5);     //数组a添加了3个值
    </script>

splice()方法

    <script>
        var a=[1,2,3,4,5,6,7,8];
        a.splice(2,5);     //从下标值2开始删到下标值5
    </script>

💖String讲解

String字符串对象创建方法有2种:

  1. var 变量名 = new String("....");
  2. var 变量名="....";

✨String之属性与方法

String常用属性:length。     作用:获取字符串长度

String常用方法:

  1. charAt()                作用:返回指定下标值的字符
  2. indexOf()         作用:检索字符串
  3. trim()                    作用:去除字符串两边的空格
  4. substring()            作用:提取字符串中两个指定索引号之间的字符

charAt() 方法

  <script>
        var a="abcdefg";
        alert(a.charAt(3));    //弹出下标为3的d
 </script>

indexOf()方法

   
  <script>
        var a="abcdefg";
          alert(a.indexOf("cd"));   //检索到下标为2
 </script>

trim()方法

<script>
        var a="  abcdefg   ";
        alert(a.trim());  //将字符串两端的空格去除
 </script>

substring()方法

<script>
        var a="abcdefghigk";
        alert(a.substring(3,8));  //截取下标为3的d到下标7的h
  </script>                       // 含头不含尾,所以不含有下标为8的值

💖JSON对象

✨自定义对象

自己使用编译器定义一个对象,以便操作。

语法格式:var  对象名{

                        属性名1:属性值,

                        属性名2:属性值,

                        ........  :    .........,

                        函数名(形参列表){ }

                  };

调用方法:1、对象名.属性名       2、对象名.函数名

✨JSON

概念:JavaScript Object  Notation,JavaScript对象标记法

JSON是通过JavaScript对象标记法书写的文本

注意了,这是文本,也就是字符串。而对象就是自定义对象,由于是字符串,所以大括号里的属性名也需要双引号

基础语法:var 变量名='{"key1":value1,     "key2":value2,  ...............  }';

value数据类型:数字(整数、浮点数)、字符串(双引号当中)、逻辑值(true、false)、数字(方括号中)、对象(花括号中) 

例如:

var a='{
    "name":"tq02",
    "sex":"男",
    "age":22,
    "addr":["背景","上海","西安"]
    }'

  1. 问:如何调用JSON中key对应的value的值?

答:使用关键字parse,将json字符串 转换 js对象   

问:那么可以讲 js对象 转换为 JSON字符串 嘛?

答:可以,使用stringify关键字进行转换。

<script>
    var a='{ "name":"tq02", "age":22 , "addr": ["北京","上海","四川"]}';
        var j=JSON.parse(a);    //转换为了js对象
        alert(j.addr);

        alert(JSON.stringify(j)); //再次转换为了JSON字符串
</script>


六.JS之BOM

概念:Browser 0bject Model 浏览器对象模型,允许avaScript与浏览器对话,JavaScript 将浏览器的各个组成部分封装为对象。也就是说BOM就是由对象组成。

BOM组成

  1. window:浏览器窗口对象
  2. Navigator:浏览器对象主要是浏览器的应用名称、版本和内核
  3. Screen:屏幕对象
  4. History:历史记录对象
  5. Location:浏览器的地址栏对象

💖window

问:如何使用window对象?

答:直接使用window就可以了

问:如何调用window对象的方法或者属性?

答:使用window.对象/方法  对了,使用方法时,可以省略window.

常用属性:

  1. history: 对 History 对象的只读引用。
  2. location: 用于窗口或框架的 Location 对象。
  3. navigator: 对Navigator 对象的只读引用。

常见的方法:

  1. alert(): 显示带有一段消息和一个确认按钮的警告框
  2. confirm(): 显示带有一段消息以及确认按钮和取消按钮的对话框,并且有返回值
  3. setlnterval(): 按照指定的周期 (以毫秒计)来调用函数或计算表达式
  4. setTimeout(): 在指定的毫秒数后调用函数或计算表达式。
<script>  
  alert("tq02");
        confirm("你确定删除嘛");
       
       //每两秒执行一次
        var i=0;
        setInterval(()=>
        {
            document.write(i++);
        },2000)

        //两秒之后执行该函数
        setTimeout(()=>{
            document.write(5000);
        },2000)

    </script>

💖Location

Location:地址栏对象

使用方法:window.location,由于window.可以省略,因此直接使用location

属性:href:设置或返回完整的URL。

<script>

    location.href="https://blog.csdn.net/m0_74097410?type=blog";
</script>


七.JS之DOM

        概念:Document Obiect Model,W3C(万维网联盟)的标准,文档对象模型,定义了访HTML和XML文档的标准,分为3个不同的部分:1.Core DOM2.XMLDOM3.HTML DOM

1.Core DOM,将标记语言的各个组成部分封装为对应的对象:

  • Document: 整个文档对象        封装的是整个文本
  • Element:元素对象       封装了文本的所有的标签
  • Attribute:属性对象       封装了所有标签中的属性
  • Text:文本对象              封装了所有标签之间的文本
  • Comment: 注释对象    封装了文本所有的注释

2.XMLDOM-XML 文档的标准模型,核心DOM的子集。

3.HTML DOM-HTML ,JavaScript可以通过DOM,进而对HTML进行操作:

  1. 改变HTML元素的内容
  2. 改变HTML元素的样式(CSS)
  3. 对HTMLDOM 事件作出反应
  4. 添加和删除HTML元素

:我们主要学习HTML DOM-HTML、主要学习:如何获取该元素对象、如何修改该对象内容

💖如何获取该元素对象

HTML中的HTML元素可以通过Document对象获取,而Document对象是通过window对象获取的。

而Document对象提供了以下以下获取HTML元素对象的函数:

  1. 根据id属性值获取,返回单个Element对象                                                                                
    var h1 = document.getElementById( 'h1');
  2. 根据标签名称获取,返回Element对象数组                                                                                         
    var divs = document.getElementsByTagName( 'div');
  3. 根据name属性值获取,返回Element对象数组                                                                                 
    var hobbys = document.getElementsByName( 'hobby');
  4.    根据class属性值获取,返回Element对象数组                                                                             
    var clss = document.getElementsByClassName('cls');
    完整代码示例:       
<html lang="en">
<head>

    <title>Document</title>
    <img id="h1" src="图片链接"><br><br>

    <div class="cls">csdn官网</div>  <br>
    <div class="cls">tq02网页</div>  <br>

    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏

</head>
<body>
    
    <script>
         //1.获取元素,根据id名获取
        var img=document.getElementById('h1');
        alert(img);

        //2.根据标签获取
        var divs=document.getElementsByTagName('div');
        for(let i=0;i<divs.length;i++){
            alert(divs[i]);
        }
        //根据name属性值获取
        var hobbys = document.getElementsByName( 'hobby');
        for(let i=0;i<hobbys.length;i++){
            alert(hobbys[i]);
        }

        //根据class属性值获取
        var clss = document.getElementsByClassName('cls');
        for(let i=0;i<clss.length;i++){
            alert(clss[i]);
        }

    </script>

</body>
</html>    

💖修改文本内容                                                                                      

      通过DOM修改文本内容,我们需要使用到getElementsByClassName()方法;以及innerHTML属性                                                                                  

代码示例  ------ 将csdn官网文字变为划拳游戏:

<html lang="en">
<head>

    <title>Document</title>
    <img id="h1" src="图片链接"><br><br>

    <div class="cls">csdn官网</div>  <br>
    <div class="cls">tq02网页</div>  <br>
</head>
<body>
    
    <script>
        var a=doucument.getElementByClassName('cls');
        var divs=a[0];
        divs.innnerHTML="划拳游戏";
</script>

</html>

八.事件监听

事件监听,顾名思义,分为事件监听,两者相辅相成。缺一不可。

事件:HTML事件指发生在HTML元素上的'事情',比如:按钮被点击,鼠标移动,按下键盘等等。

而计算机是如何监听到事件的发生呢?

答:通过事件绑定

💖常见事件

事件名说明
onclick鼠标单击事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onkeydown某个键盘的键被按下
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开

而下面的事件绑定,我们使用onclick

💖事件绑定

        事件绑定,有两种方式

方式一:通过HTML标签的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">
<script>
    function on(){alert(!我被点击了!');
    }
</script>

解析:当点击按钮时,我们就可以通过事件属性onclick,所绑定的on()方法,然后调用script中的on()方法


方式二:通过 DOM 元素属性绑定

<input type="button" id="btn" value="按钮2">
<script>
    document.getElementById('btn' ).onclick=function(){
        alert('我被点击了!);
    }
</script>

解析:通过document获取指令DOM元素,然后再通过onclick属性来绑定一个函数。


总结

        看到这里,JavaScript的基本内容已经学会了,理论已经有了,是时候进行实践操作了,JavaScript最重要最难的内容是DOM和事件监听,本文内容显示有限,如果想更加深入学习,还是需要去看视频进行加一步学习。

                                                                                                        ------------------懒惰的tq02

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1992.html
标签
ecmascript
评论
会员中心 联系我 留言建议 回顶部
复制成功!