Javascript

最新推荐文章于 2022-11-02 12:49:00 发布

NoobMaster009

最新推荐文章于 2022-11-02 12:49:00 发布

阅读量470

点赞数

文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/m0_59788935/article/details/126576600

版权

什么是Js

js是javascript的全称，是当前最流行、应用最广泛的客户端脚本语言，用于在网页中添加一些动态效果和交互功能

js是一种解释型语言，不需要提前编译，能够在各种操作系统下运行（

编译：源代码--编译--目标代码--执行（目标代码）
解释：源代码--解释器--执行（V8引擎提升了解释型语言的运行速度，可以媲美编译型语言）

js与html和css共同构成了网页，其中html用于定义网页内容，css用来控制网页的外观，js用来控制网页的行为。

JS代码只能运行在浏览器中，作为网页脚本使用，为网页添加行为（不能够单独运行）

js嵌入html的方式

1.在head中使用<script></script> -- 嵌入式

<script>
       // 向网页中添加一个元素 document.write();给网页添加元素--输出
       document.write('<h1>JS滴滴滴</h1>')
  </script>

2.使用script标签搭配src属性引入js文件 --外部脚本

<!-- 引入外部js文件   -->
<script src="Tset.js"></script>

// 外部js文件
document.write("<h1>hello world -- 外部js文件</h1>")

3.使用元素的事件属性（onclick -- 点击事件），写入js代码 onclick只是其中一种事件属性

<!-- 当页面已经完成加载，再去调用document.write，此时当前页面的内容会被覆盖-->
<input type="button" value="点击"  οnclick="document.write('<h1>点击事件内容</h1>')" >

4.使用超链接伪URL 在href属性中用javascript：js脚本的格式

<!--alert（message） 调用window对象的提示框，可以把message通过提示框弹出-->
<a href="javascript:alert('你在点什么？')">超链接伪URL</a>

JavaScript代码的执行顺序：

浏览器在解析html文档时，根据文档流从上到下逐行进行解析和显示的。JavaScript代码也是html文档的组成部分，因此JavaScript代码的执行顺序也是根据script标签的位置来确定的

注意：定义src属性引入外部js文件的script标签，不应该在包含JavaScript代码。如果嵌入了代码，则只会执行外部js文件中的代码

js中的重要概念

一·标识符：凡是可以命名的地方就可以被称作标识符

标识符的命名规则：

第一个字符必须是字母、下划线（_）或美元符号（$）
不能与JavaScript关键字、保留字重名

标识符的命名规范：

严格区分大小写。Hello和hello
如果标识符由多个单词组成，除首个单词外，后面单词的首字母大写
见名知意

二、JavaScript保留字：

ES3时，将java所有的关键字都被列为了js保留字

三、JS注释：

注释是给开发人员看的，程序在执行时会自动忽路注释的内容，所以我们通常使用注释来为代码添加一些解释说明或描述，以提高代码的可读性。

JavaScript 中的注释与 C/C++、Java、PHP 等语言中注释的定义方式相同，支持单行注释和多行注释两种风格。 // 单行注释 /多行注释 */

四、变量

js是一种弱类型语言。弱类型是指变量任何数据都可以存放。可以存放数字，可以存放字符串，也可以存放对象的引用。在2015年前，只能使用 var 关键字声明变量。在2015年(ECMAScript6)发布后，新增let和const两个关键字声明变量。

let关键字来声明变量，其所声明的变量只在声明所在块内有效(局部变量）。可以声明同名变量 const关键字和let类似，只能在声明所在的块中有效，但是使用const定义的变量一旦定义就不能修改(常量)

五、JavaScript数据类型

JavaScript数据类型分为：原始数据类型和引用类型

原始数据类型有6种

undefined：变量未初始化，函数没有返回值时

 // undefined -- 变量没有被初始化时,或函数无返回值时
     var a;
     console.log(a)
     a = "tst"
     console.log(a)

null：代表不存在的对象，在该变量中没有存放任何对象的引用。

// null 特殊数据类型，表示一个"空"值，即不存在任何值
     a = null;
     console.log(a)

boolean：true/false

 // 布尔值 ture/false
     a = true;
     console.log(a)
     a = false;
     console.log(a)

number：数字型，包含整数和小数。（NaN表示非数字，发生在类型转换失败时）


     // 数字类型 number 可以是整数，可以是小数
     a = 100;
     console.log(a)
     a = 100.111;
     console.log(a)

string：字符串型。可以单引号或双引号声明

a = '这是单引号字符串';
     console.log(a)
     a = "这是双引号字符串";
     console.log(a)
     // 当字符串内容有单引号或双引号时，字符串内容的引号可以用\转义或者用不同的引号完成声明
     a = "I'm Qi";
     a = '你好，我是XXX，人送外号"XXX"'

     a ="你好，我是XXX，人送外号\"XXX\""

Symbol:ES6引入的新原始数据类型。表示独一无二的值

Js运算符

算数运算符：+、-、*、/、%

 var a = 100;
        var b = 12;
        var c = a + b;
        console.log(c)
        c = a - b;
        console.log(c)
        c = a / b; // 不会因为是两个整数相除，而发生自动的类型转换把结果转换为整数
        console.log(c)
        c = a * b;
        console.log(c)
        c = a % b;
        console.log(c)

赋值运算符：=、+=、-=、*=、/=、%=、++、--
比较运算符：==、===、!=、!==、>、<、>=、<=

// 比较运算符
        console.log(55 == "55") //ture == 只比较其值，不会比较类型
        console.log(55 === "55") //false === 除比较值以外，还会比较类型
        console.log("55" != 55) // false 只根据值比较，不比较类型
        console.log("55" !== 55) // true 除比较值以外，还会比较类型，数据或类型不同结果就为ture

逻辑运算符：&&、||、！
三目运算符：条件表达式？表达式1 : 表达式2；

var result = 4 > 3 ? "4比3大" ："4比3小"； 
console.log(result)

JS自动类型转换的情况

字符串数据做减法时会转换成数字型number，

var x = '10' - 2; // x = 8 会将字符串转为number类型
console.log(x)
x = '10' - '8';  // x = 8
x = 10 - '2a' // 如果字符串中的数据不是数字，结果会是NaN--代表非数字

// 字符串做加法 会做字符串的连接
var y = '10' + 2; // 内容为102的字符串

数字字符串做减、乘、除法时，会自动把字符串转换为number类型
当数字字符串做加法时（两个加数，其一为字符串时），会做字符串连接
做运算时，如果字符串内容有非数字符号，结果为NaN表示非数字

JS强制类型转换

强制类型转换：parseInt() 和 parseFloat()

typeof 关键字--判断变量属于什么数据类型

var str = '1234'
var intNum = parseInt(str);
// 如何判断变量属于什么数据类型 typeof 关键字--判断变量属于什么数据类型
console.log(typeof intNum)

var floatNum = parseFloat(str)
console.log(typeof loatNum)

 str = '1234asdasf'
console.log(typeof intNum)

var floatNum = parseFloat(str)
console.log(typeof loatNum)

parseInt() 和 parseFloat()的异同

parseInt只能把字符串转换为整数， parseFloat可以把字符串转换为小数
parseInt 转换字符串出现第一个非数字的符号时，会将第一个非数字以后的字符全部忽略，parseFloat转换字符串出现第一个非数字且为非小数点符号时，才会将后续的字符忽略
parseInt当转换字符串第一个符号为非数字时，结果为NaN，parseFloat出现第一个非数字且为非小数点符号时，结果为NaN

js引用数据类型

常用的三种类型：

对象（Object）

JavaScript中的对象类型是一组由键、值组成的无序集合，定义对象类型需要使用花括号{}
语法格式{name1:value1，name2:value2....,nameN:valueN}
其中name1、name2 、....、nameN为对象中的键，value1、value2、...、valueN 为对应的值
对象类型的键都是字符串类型的，值则可以是任意数据类型，要获取对象中的某个值，可以使用对象名.键或者对象名[键]

需注意：在定义对象时，键（属性）是字符串类型，但是通常不需要使用引号完成键（属性）的定义

在定义对象时，键（属性）是字符串类型，但是通常不需要使用引号完成键（属性）的定义
但是存在某些情况必须使用引号定义键（属性）：
1.属性名称为JS关键字，保留字时
2.属性名包含特殊字符（如：空格、除字母、数字、_、$以外的其他字符）
3.属性名以数字开头

对象的定义 语法格式：{name1:value1,name2:value2,...,nameN:valueN}

// js对象是一种由无序的键值对组成的集合，定义一个对象的类型需要使用{}
       // 语法格式：{name1:value1,name2:value2,...,nameN:valueN}
       // 注意:键必须是字符串类型
       // 定义一个对象，包含姓名、年龄、性别、拥有的汽车（数组）
       var person={'name':'王','age':28,'gender':'男','cars':['1','1','1']}
       console.log(person)
       // 获取对象的某个属性
       console.log(person.name)
       console.log(person['name'])
       /*
         在定义对象时，键（属性）是字符串类型，但是通常不需要使用引号完成键（属性）的定义
         但是存在某些情况必须使用引号定义键（属性）：
         1.属性名称为JS关键字，保留字时
         2.属性名包含特殊字符（如：空格、除字母、数字、_、$以外的其他字符）
         3.属性名以数字开头
        */

获取对象的某个属性对象.属性对象[属性]

 // 获取对象的某个属性
        console.log(person.name)
        console.log(person['name'])

对象属性的修改 对象名.键名 = 新值或对象名['键名'] = 新值

// 修改对象的属性  对象名.键名 = 新值 或对象名['键名'] = 新值
        person.name = '刘备'
        person['name'] = '曹操'
        console.log(person)

对象属性的添加 添加方式对象名.新键名 = 新值

// 当我们定义好一个对象后，可以动态的添加对象的属性 添加方式 对象名.新键名 = 新值
        person.test = '1100'
        console.log(person)

对象属性的删除 delete

// 删除对象属性 delete
        delete person.test;
        console.log(person)

数组（Array）

数组是一组按顺序排列的数据的集合，数组中的每个值都称为元素，而且数组中可以包含任意类型的数据
在JavaScript 中定义数组需要使用方括号[ ]，数组中的每个元素使用逗号进行分隔

数组中的元素可以通过索引来访问

数组的定义定义数组：1.[value1，value2，value3,...,valueN]; 2.new Array(value1，value2，value3,...,valueN)

/*
      数组 是有序的值集合，数组中的每一个值称为元素，可以通过索引（下标）去获取数组中的元素
      定义数组：1.[value1，value2，value3,...,valueN];
              2.new Array(value1，value2，value3,...,valueN)
    */
   var ary =[10,12,14,'qwe',{'name':'zhang3'},undefined,null,true];
   var array = new Array(1,2,4,'array',{name:'array'},true);
   console.log(ary)
   console.log(array)

数组的访问方式：数组名[索引]

// 访问数组的元素 通过索引访问 方式：数组名[索引]
      console.log(ary[3])

访问数组的元素通过索引进行修改数组名[索引] = 新值

// 访问数组的元素 通过索引进行修改 方式： 数组名[索引] = 新值
    ary[2] = "你好"
    console.log(ary[2])

数组新加元素push函数-向数组的末尾添加元素（一个或多个）也可以返回数组的新长度

// 数组新加元素push函数-向数组的末尾添加元素（一个或多个） 也可以返回数组的新长度
      var  length =  ary.push(100,"再见");
      console.log(ary)

函数（Function）

函数是一段具有特定功能的代码块，函数并不会自动运行，需要通过函数名调用才能运行

函数的定义格式：

function 函数名(参数列表){ // 函数中的代码 }

/*
           函数是执行特定功能的代码块
           alert()、console.log()都是在js中内置的函数
           自定义函数语法格式如下：
           function 函数名(参数列表){
             // 函数中的代码
            }
       */
      function sayHello(name){
          // console.log("你好：" + name);
          alert("你在点什么？" + name)
      }

                 // 函数在定义时 可为参数定义默认值
      function sayHello(name ="蠢货"){
          // console.log("你好：" + name);
          alert("你在点什么？" + name)
      }

                 // 函数返回值 通过return 返回
      function sayHello(name ="蠢货"){
          // console.log("你好：" + name);
          // alert("你在点什么？" + name)
          return "你在点什么？" + name;
      }
      var str =sayHello();
      console.log(str)

JS的输出方式

有时，我们可能会根据某些需要对程序的运行结果进行输出，输出到浏览器中。在Js中提供了多种输出语句把结果输出到浏览器中

第一种：alert(message) 弹出一个提示框展示message

 // alert(message) 弹出一个提示框展示message
       alert("你好");

第二种：console.log(massage) 向浏览器控制台去输出信息

   // console.log(massage) 向浏览器控制台去输出信息
       console.log("你好");

第三种：ocument.write(html代码) 把内容写入到html文档中

 // document.write(html代码) 把内容写入到html文档中
       document.write("<h1>你好</h1>")

第四种：confirm(message) 弹出一个提示框展示message，和alert(message)不同， confirm提供的弹框有两个按钮(确定和取消)，点击确定返回true，点击取消返回false

 // confirm(message) 弹出一个提示框展示message
       var a =confirm("你是不是在摸鱼");
       if (a){
           alert("是的")
       }else{
           alert("没有")
       }

第五种：innerHTML属性，通过它设置或者获取指定HTML元素中内容(搭配Dom使用)

<div id="test">
      JS 第五种输出方式
  </div>

   <script>
       // 可以获取到指定id的元素对象
      var test = document.getElementById("test")
       // 可以通过元素对象的innerHTML属性去获取元素内容或者修改元素内容
       // 获取元素内容
       alert(test.innerHTML);
       // 设置元素内容
       test.innerHTML = "<h1>搭配Dom完成输出</h1>"
   </script>

JS条件判断语句

if语句

if 语句 ：if(条件表达式){
     // 表达式为真执行的代码
}

if else语句

if else语句：if(条件表达式){
     // 表达式为真执行的代码
}else {
     // 表达式为假执行的代码
}

if else-if else语句

if else-if else语句：if(条件表达式1){
     // 表达式1为真执行的代码
}else if(条件表达式2){
     // 表达式2为真执行的代码
}else if(条件表达式3){
     // 表达式3为真执行的代码
}else{
 // 前面所有的表达式结果都为假时执行的代码
}

switch-case语句
- switch - case语句代码执行和java一样，不同点在于表达式的值和value的比较，用的是===来进行比较(比较的是值和类型，而if只比较值，不比较类型，如：if的1=='1'是为ture的，而switch中是为false的)
- ```
switch - case 语句:switch(表达式){
  case:value1:
  .......
  break;
  case:value2:
  .......
  break;
  case:value3:
  .......
  break;
  default:
  .......
}
```

JS循环语句

for循环语句

语法格式：for(表达式1;表达式2；表达式3){ // 循环表 }

for (var i = 0;i<10;i++){
         document.write(i+"<br>")
     }
     // 使用循环遍历数组
     var array = [1,2,3,4,5,6,7,8]
     for (var i=0;i<array.length;i++){
         document.write(array[i] + "<br>")
     }
    // 九九乘法表
     for (var i = 1; i<10;i++){
         for (var j = 1;j<=i;j++){
             document.write(j+ '*'+ i +'=' + j*i+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp")
         }
         document.write("<br>")
         document.write("<br>")
     }

for in循环主要是用于遍历对象的属性

语法格式：
- for(变量 in 对象){
  
  }
  
  可以把对象中的属性，在每一次循环中，赋值给变量（只是把键名完成赋值）
需注意：在for in 循环中不能通过对象名.键名的方式获取属性值，只能通过对象名[键名]获取

// 遍历对象
var obj ={name:'zhang3',age:19,address:'武侯区'}
       for(var prop in obj){
           document.write(prop + "=" + obj[prop]+"&nbsp")
       }

// 不推荐for in 循环遍历数组
       var array = [2,3,'zhang3','li4']
       for (var e in array){
           //遍历数组时，变量获取的是元素索引(下标)
           document.write(array[e] + "&nbsp")
       }

for of循环

for of 循环是ES6中新添加的一个循环方式，与for in 循环类似。使用for of循环可以轻松遍历数组或字符串，无法遍历对象
语法格式：
- for(变量 of 遍历对象){
  
  // 循环要执行的代码
  
  }

// 遍历数组时 变量就相当于数组中的元素
        array = [2,3,'zhang3','li4']
       for (var value of array){
           document.write(value + "<br>")
       }
       // 使用for of 循环遍历字符串，变量相当于字符串中的字符
       var str = 'asdasfasfasg';
       for (var c of str){
           document.write(c + "<br>")
       }

JS循环中断

break语句用来跳出整个循环，执行循环后面的代码

Object-对象

在JS中的对象，由什么组成的呢？又是用什么定义的呢？

由无序的键值对组成--键值对的集合，对象使用{}定义

语法格式是怎样的呢？

{name1:value1,name2:value2,...,nameN:valueN}

其中，name1,name2,...,nameN是对象中的键(属性)，通常是字符串类型；value1,value2,...,valueN是对象中的值(属性值)，可以由任意类型组成。

{name:"张三",age:30,address:"成都市"}
{"name":"张三","age":30,"address":"成都市"}

在那些情况下，对象中键必须要写字符串呢？

1.键名为JavaScript中的关键字或保留字

2.键名中包含除字母、数字、_、$以外的任何符号

3.键名以数字开头时

如何获取对象中的属性呢？(访问对象中的属性--查看)

对象名.键名或者对象名["键名"]

如何删除对象中的属性？

delete 对象名.键名或者 delete 对象名["键名"]

2.Array-数组

数组是值的有序集合，数组中每一个值称为是元素，每个元素在数组中都有一个数字位置，称为索引。

创建数组对象的语法格式有那两种？

[value1,value2,...,valueN]
new Array(valus) // values指元素列表，如value1,value2,...,valueN

如何获取数组的元素？数组名[下标]

数组的操作，给数组末尾新加元素，还以返回新加元素后数组的长度 push函数

数组名称.push(values)，其中values指元素列表(一个或者多个)

3.Function-函数

什么是函数呢？函数是一个代码块，而代码块具有特定的功能

自定义函数的语法格式：

function 函数名(参数列表){
    // 函数体--代码块
}
// 给函数参数设置默认值，如果在调用函数时，没有给函数传入参数，此时就会使用默认值，如果在调用函数是，传递了参数，则使用穿过来的参数值
function test(name = "World"){
    return "Hello " + name;
    // js函数的返回值，不需要指定返回类型
}

4.js输出语句汇总

1.alert() // 弹出浏览器的弹框
2.console.log() // 在浏览器的控制台中输出信息
3.document.write() // 向html文档写入HTML代码
4.confirm()  // 弹出浏览器的弹框，并且可以返回点击确定(true)/取消(false)按钮后对应的值
5.innerHTML属性 //获取或者设置指定HTML标签中的内容（搭配dom使用）