[ JAVA]介绍JavaScript

破晓*

已于 2025-03-06 04:19:39 修改

阅读量995

点赞数 10

文章标签： java javascript 开发语言

于 2024-12-15 17:08:55 首次发布

本文链接：https://blog.youkuaiyun.com/2301_79757798/article/details/144323907

版权

JavaScript简称JS，是一门面向对象的编程语言，JS是运行在客户端的脚本语言（不需要编译）

现在也可以基于Node.js技术进行服务器端编程。

JS的作用

表单动态校验（JS最初的目的）例如验证动态输入的账户密码是否符合标准

网页特效像淘宝网中的图片点击左右导航<>便会有换页操作

还有像这种滚动的商品，单纯依靠css和html实现不了，需要用到js

浏览器如何执行JS

浏览器分为两部分：渲染引擎和JS引擎

渲染引擎：用来解析HTML和CSS，俗称内核。比如chrome浏览器的Blink/Webkit，Firefox的Gecko内核

JS引擎：也称为JS解释器，用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

JavaScript组成

由三部分组成：

ECMAScript：JS基础语法（比方js中如何声明变量常量，定义对象，包括流程控制里的分支，然后循环如何去写，都是由ECMAScript定义的）在ECMAScript基础之上，还分为DOM（文档对象）和 BOM（浏览器对象）

JS的主要应用方向，一个是表单校验，另外一个是网页特效，想完成这些都要用到DOM和BOM

JS书写位置

1.JS有三种书写位置：

行内式：将JS代码写在以on开头的属性中

内嵌式：将JS代码写在script标签中

外链式：将JS代码写在一个独立的js文件中，再用script标签引入

行内式：

<button onclick="alert('我被点了一下')">点我</button>

内嵌式：

<script>

     alert("Hi,我是一个警告框")

</script>

2.script标签可以写在html文件的head和body中，推荐写在body的最下面

外链式：

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('我被点了一下')">点我</button>
</body>
</html>

结果显示：

外链式：

新建另一个js文件

然后在另一个文件引入：

结果显示：

说明以上引入的方法起效

三种方式对比：

外链式：维护性高，可缓存（加载一次），扩展性复用性高（推荐）

内嵌式：比较常用，一般写在body的最下面

行内式：简单直接，但是不能写大量代码，大量代码会导致可读性变差，所以比较少用

JS基础语法

程序语言，一通百通

原因1：基础语法相似度极高

原因2：编程思想建立后，学习能力会大大加强

变量:JS是一种弱类型语言，声明变量时不需要指定数据类型（Java则需要指定）

JS声明变量的关键词 var；示例：

var username=“root”；console.log(username)[将username内容打印出来]

运行结果：将结果打印在了Console；

JS的数据类型

JS将数据类型分为两类：

第一类简单数据类型（Number，Srtring，Boolean，Undefined，Null）

第二类复杂数据类型（Object）（数组，对象，函数）

代码演示：

注意点：

JS变量的命名规则和Java一样

变量的数据类型和上下文有关，变量中保存了什么数据变量的数据类型就是什么

数据类型检测

typeof可用来获取检测变量的数据类型

NaN是什么？

NaN（Not a Number）：代表一个非数值

isNaN：用来判断一个变量是否为非数字的类型，返回true或者false

JS的数据类型转换

将其他类型转换为字符串
将其他类型转换为数值型
将其他类型转换为布尔型

1.三种方式转字符串

<script>
   var flag=true;
   console.log(flag.toString());
</script>

执行结果：字符串在终端里面是黑色

当然，我们也可以直接用typeof直接查看结果是否转换成功

<script>
   var flag=true;
   console.log(typeof flag.toString());
</script>

结果：

还可以用String（flag）

<script>
   var flag=true;
   console.log(String(flag));
</script>

结果：

<script>
   var num=10;
   console.log(num.toString());
   console.log(num);
</script>

结果：蓝色的是数值型

num+' ' 空字符串 ——>被自动转换成字符串

<script>
   var num=10;
   console.log(num+'');
</script>

转数值型

正常情况下：将数组型字符串转为数值型（“123”，“3.1415”，...）

正常转换：

隐式转换：

特殊情况：

普通字符串，布尔型，Underfined，noll统统转为NaN（非数字）

    console.log(parseInt('a123px'));
    console.log(parseInt(true));
    console.log(parseInt(undefined));
    console.log(parseInt(null));

结果：

Number函数的特殊转换


    console.log(Number(true));
    console.log(Number(false));
    console.log(Number(undefined));
    console.log(Number(null));

结果：

转布尔型

Boolean（）：将其他类型转为布尔型

1,非空字符串和数值型转为true

console.log(Boolean('小白'));
console.log(Boolean(12));
console.log(Boolean(3.14));

2,空字符串，0转为false

console.log(Boolean(''));
console.log(Boolean(0));

3,其他转为false

console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(underfined));

JS的运算符有几种

JavaScript中运算符有如下几种：

算数运算符，自增自减运算符，比较运算符，逻辑运算符

算术运算符：

我们首先要知道浮点数在运算时会有精度问题

console.log(0.1+0.2);    //0.3000000000000000004
console.log(0.07*100);    //7.3000000000000000001

这里我们引用 toFixed(num); 它的作用是只保留小数点后几位

console.log((0.1+0.2).toFixed(1));    //0.3

自增和自减运算符

自增：++，例如：num++ \ ++num

自减：--，例如：num-- \ --num

console.log(a++);      //18
console.log(--b);      //5

比较运算符：

逻辑运算符：

赋值运算符

运算符优先级

var a = 6 ==="6";
console.log('a:',a);

因为===的优先级大于=，所以先算后面再赋值给前面，值相等但数据类型不一样

流程控制

目的：让程序按照我们设计好的逻辑来执行

流程控制主要有三种结构，分别是顺序结构，分支结构和循环结构，这三种结构代表三种代码执行的顺序

if...ease结构

<script>
    var age=20;
    if(age>=18){
       console.log('成年人');
    }else{
        console.log('未成年人')
    }

    if(true){
        console.log('---------');
    }

    var score=98;
    if(score>=90){
       console.log('优秀');
    }else if(score >= 80 && score <90){
        console.log('良好');
    }else if(score >= 60 && score <80){
        console.log('合格');
    }else{
        console.log('不合格');
    }
   </script>

三元运算符

判断表达式？值1：值2；

var a=10;
var b=6;

console.log(a>b?'大于':'小于'); //大于
//判断a的数据类型是否等于string，结果不为字符串型，值为false，则走到后面的a-b=4
var result = typeof a == 'string'?a+b:a-b;
console.log(result);

三元运算符很多时候可以代替if...else结构（在程序块内容比较少的时候）

var age=20；
console.log(age>=18?'成年人':'未成年人');

switch分支结构

var char = 'e';
switch(char){
  case'a':
   console.log('A级-优秀');
   break;
  case'b':
   console.log('B级-良好');
   break;
  case'c':
   console.log('C级-合格');
   break;
  default:
   console.log('D级-垃圾');
   break;

}

循环结构

while循环，for循环，do...while循环

循环必须有一个结束点，否则就变为死循环

var i = 0;
while(i<10){
  //document.writeln能将数据输入到页面上
  document.writeln(i);
  i++;
}

for循环

循环嵌套

for(var i = 1;i <= 9;i++){
  for(var j = 1;j < = i;j++){
     documnet.writeln(i*j+'&emsp;');
}
     doucument.writeln('<br>');
}

do...while

var i = 0;

do{
 console.log(i++);
}while(i<10)

相关关键词

continue：退出本次（当前次的循环）继续执行剩余次数循环

break：退出整个循环

JS数组

数组：在一个变量中保存多个数据，在JavaScript中数组的单元可以存放任意类型的数据

创建数组有两种方式：数组字面量和 new 关键字，单元之间使用，进行分隔

创建数组

方式一：数组字面量（最常用）var arr1=[1,2,3];

方式二：new Array

var arr2=new Array（1，2，3）；

数组的单元可以存放任意类型的数据

var arr3=[1,'比亚迪','汉',true]

数组都是通过下表（索引）来控制的

var arr=[1,'比亚迪'，‘汉’，true];

console.log(arr[1]); //比亚迪

console.log(arr[2]); //汉

也可以更改以上索引的值

arr[1]='劳斯莱斯';
arr[2]='300万';
arr[3]='幻想';

遍历数组

第一种方法：

var stars=['迪丽热巴','古力娜扎','马尔扎哈'];
for(var i=0;i<stars.length;i++){
  console.log(star[i])
}

结果显示

第二种方法：

var stars=['迪丽热巴','古力娜扎','马尔扎哈'];

stars.forEach(function(item,index){
  //item:每次循环的单元值
  //index：每次循环的单元索引
  console.log(item,index)
})

结果显示

JS函数

函数：就是封装了一段可被重复调用执行的代码块

优点：一次编写，随处调用

js中的函数和Java中的方法非常类似

JS函数：function 函数名（形参1，形参2，....）{

程序块；

return xxx；

}

Java方法：public 返回值类型方法名（形参1，形参2，....）{

程序块；

return xxx；

}

代码举例：

 <script>
   //声明函数
   function add(a,b){
    return a+b;
   }

   //调用函数
   console.log(add(10,20));
   </script>

结果显示：

变量作用域

全局作用域:在函数体外声明的变量，在整个script标签范围内都有效

<script>
  //全局变量，在script标签范围内都是有效的
  var name="王小明";
  var age= 8;

  function show(){
    //在show函数中可以调用name和age变量
    console.log("大家好，我叫"+name+",今年"+age+"岁");
  }

  show()
   </script>

结果显示：

局部作用域：在函数体内声明的变量，只在函数体内有效

function init(){
   var a=10;
}
init()
console.log(a);

结果显示报错：无法调用

作用域链：

 <script>
    var name="王小明";
  function  fn1(){
    function  fn2(){
      function  fn3(){
        console.log(name);
      }
      fn3();
    }
    fn2();
  }
//调用fn1
  fn1(); 
            
   </script>

调用fn1，里面嵌套了fn2，然后调用fn2，里面嵌套了fn3，调用fn3，执行打印语句，打印出name

其他函数声明方式

字面量方式：var 函数名 = function（形参1,形参2,...）{
            程序块;
            return返回值;
           }

var add = function(a,b){
      return a+b;
}
add(10,20)

匿名函数：

function(形参1，形参2，...){

程序块;

return 返回值;

}

自调用函数：

function(形参1，形参2，...){

程序块;

return 返回值;

}(实参1，实参2)

(function (a,b){

console.log(a+b)

})(10,20)

(function show(name){
  console.log("我叫"+name)
})("张无忌")

结果显示：

JS对象

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有事物都是对象，例如字符串，数值，数组，函数等

创建对象有三种方式：字面量，构造函数，new Object()

var obj={

key:value,

key:value,

}

key（键）：相当于属性名

value（值）：相当于属性值，可以是任意类型的值（数值型，字符串型，布尔型，函数等）

字面量：Java中声明类方法 VS JS中字面量方式声明对象的方法

字面量声明的对象不需要实例化，用的时候直接调用属性：对象名.key（例如：Star.name）

另外一种方式调用属性：对象名[key] (例如：Star["name"])

代码演示：

var Star={
 name：'李老师',
 age：18,
 gender:'男',
 sayHi:function(){
   alert('大家好，我是正经的李老师');
}
};

var name="age";

console.log(Star.name);
console.log(Star["name"]);
console.log(Star[name]);

Star.sayHi()

结果显示：

其中的方法调用

遍历对象

for...in语句用于对数组或者对象的属性进行循环操作

for(var k in odj){

//k保存属性名

console.log(k);

//obj[k]是属性值

console.log(obj[k]);

}

代码示例：

要遍历star这个对象，这个对象一共有四个单元，第一次循环将name保存到k中，console.log[k]就会输出name，而console.log(star[k]);则会输出黄老师；一定不能用 .k，因为 .k的k是固定的名字，而这里的k是固定的变量，第二次循环将age保存到k里面，然后输出star[k]就是18，....

<script>
   var Star={
 name:'李老师',
 age:18,
 gender:'男',
 sayHi:function(){
   alert('大家好，我是正经的李老师');
}
};

for(var a in Star){
  console.log(a);
  console.log(Star[a]);
}
  
   </script>

结果：

切记千万不能用.a console.log(Star.a);

内置对象

内置对象就是JS本身提供的对象

JavaScript提供了多个内置对象：Math，Date等

它能帮助我们编程，提高我们开发的效率，下面是MDN在线手册的地址，打开这个网页：

点击JavaScript，有各种使用教程和方法

Math对象

Math对象拥有一些数学常数属性和数学函数方法

  <script>
  //向下取整（舍去法）
  console.log(Math.floor(6.9)); //6

  //向上取整（进一法）
  console.log(Math.ceil(6.1));  //7

  //四舍五入
  console.log(Math.round(5.4));
  console.log(Math.round(5.5));

  //0~1之间的随机数
  console.log(Math.random);

   </script>

结果显示：

Date对象

Date对象用来处理日期和时间

获取当前时间：var now = new Date();2050

获取指定时间的日期对象：var future = new Date('2025/5/1');

<script>
  //获取当前时间
  var now = new Date();
  console.log(now);
  
  //获取指定时间
  var d = new Date('2012-12-12 10:20:30');
  console.log(d);

</script>

日期格式化

输出：例 2012-12-12 05：05：05 格式

1.先实例化Date对象

2.使用对象分别调用6个方法获取年月日时分秒，最后在拼接字符串

<script>
  var date = new Date(); //得到当前时间的时间对象
  var y = date.getFullYear();
  var m = date.getMonth()+1;
  var d = date.getDate();
  var h = date.getHours();
  var i = date.getMinutes();
  var s = date.getSeconds();
  console.log(y+'-'+m+'-'+d+''+h+':'+i+':'+s);

</script>

结果显示：

时间戳：

时间戳是指格林威治时间1970 年 01 月 01 日 00 时 00 分 00 秒 (北京时间 1970 年 01 月 01 日 08 时 00 分 00 秒) 起至现在的总秒数（10位）或总毫秒数（13位）用于同步不同计算机之间的时间，确保数据的一致性和准确性。

在数据库中保存日期保存时间时，用的大多是时间戳，但是取出来要显示出年月日时间，所以时间戳是用来保存，但是显示的时候要把它转为年月日时分秒。

获取时间戳（1970.01.01 00:00:00)

JavaScript中的时间戳是毫秒数（比秒多了三位）

JavaScript获取时间戳有三种方法：

var date = new Date(); date.valueOf() date.getTime()

案例：

 <script>
 //获取当前时间的时间戳
 var d =new Date();
 console.log(d.valueOf())
 console.log(d.getTime());

 var d1=Date.now();
 console.log(d1);
 
 //获取指定时间的时间戳
 var d2 = new Date("2008-08-10 10:10:10");
 console.log(d2.valueOf());
 console.log(d2.getTime());

   </script>

结果显示：

时间戳转具体的年月日

在实际化开发时，我们可以将时间戳传入实例化，这个时间戳就能转为时间对象

案例：

 <script>
 var t1=1238957281929;
 var t2=1538290382900;

 var date=new Date(t1);
 var y = date.getFullYear();
  var m = date.getMonth()+1;
  var d = date.getDate();
  var h = date.getHours();
  var i = date.getMinutes();
  var s = date.getSeconds();
  console.log(y+'-'+m+'-'+d+''+h+':'+i+':'+s);

   </script>

显示结果：

数组对象

这四个方法会修改数组本身

push（a,b,...）

案例：

//push(a,b...)向数组的末尾添加一个或更多元素，并返回新的长度
 var arr=[1,'aa',3.14,true];
 console.log(arr.push(2,'bb'));
 console.log(arr);

pop()

案例：

//pop() 删除并返回数组的最后一个元素
 var arr = [1,'aa',3.14,true];
 console.log(arr.pop());
 console.log(arr.length);

数组对象

join（）

 <script>
    var arr=['啾啾','琪琪','六六'];
    console.log(arr.join('-'))

 </script>

splice（）

<script>
    var arr=['啾啾','琪琪','六六'];
    //参数1：从哪个单元开始删除
    //参数2：要删除几个单元
    //返回值：被删除的单元
    console.log(arr.splice(1,1));
    console.log(arr);
</script>

字符串对象

代码演示：

var str='abcdefjabc';

    //charAt(index) 返回在指定位置的字符
    console.log(str.charAt(1))

    //indexOf()/lastIndexOf()
    //找到指定字符串第一次/最后一次出现的索引
    console.log(str.indexOf('c'));
    console.log(str.lastIndexOf('c'))

    //tolowerCase()/toUpperCase()
    //转换为小写字母\转换为大写字母
    console.log(str.toUpperCase());
    console.log('ABC'.toLowerCase());

    //slice()/substr() 截取字符串
    //slice（）有两个参数
    //参数1：指定截取的起点
    //参数2：可选参数，指定截取的终点(不包含终点)
    console.log(str.slice(1));
    console.log(str.slice(1,3));

    //substr():有两个参数
    //参数1：指定截取的起点
    //参数2：可选参数，指定截取的长度
    console.log(str.substr(3));
    console.log(str.substr(3,3,));

    //split() 把字符串分割为字符串数组（与join是反向操作）
    var s1='aa-bb-s-cc-dd';
    console.log(s1.split('-'));
    console.log(s1.split('s'));

结果显示：