前端-JavaScript

已于 2022-10-21 17:41:11 修改
阅读量421 收藏
点赞数
分类专栏： Java Web 文章标签： 开发语言
于 2022-03-04 13:01:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyy130988/article/details/123262182
版权

前端-JavaScript

 
 
js使用方式
在script标签中使用

    <!--
        1. 可以在head 和 body嵌入script
        2. 执行顺序从上到下
        3. 建议放在head
    -->
    <script type="text/javascript">
        //在head中使用JavaScript
        console.log("head hello")
    </script>

 

在script标签中引入外部js文件
1.创建js目录，编写js文件
2.引入js文件

<script type="text/javascript" src="./JS/test.js"></script>

 

查看js错误信息

  • 浏览器 F12

 

js变量
JavaScript是弱类型
定义变量时，前面写上var，如 var num = 10;
不写也行 如 num = 10；
并且 变量的类型是可以随时变化的，如num = 10 此时它是number类型，后面在使用 num = “hello”，那么它现在是String类型

 

js数据类型

  • 数值类型：number

  • 字符串类型：string [可以双引号括起来，也可以单引号括起来] “jack”、‘abc’、“a”、“”

  • 对象类型：object

  • 布尔类型：boolean

  • 函数类型：function

 

js特殊值

  • undefined：变量未赋初始值时，默认undefined
  • null：空值
  • NaN：Not a Number非数值

 
 

js运算符
 
算术运算符

  • 算术运算符用于执行变量与/或值之间的算术运算
  • +、-、*、/、%、++、–

 

赋值运算符

  • 赋值运算符用于给JavaScript变量赋值。
  • =、+=、-=、*=、/=、%=

 

关系运算符

  • 关系(比较)运算符在逻辑语句中使用，以测定变量或值是否相等。
  • ==、===(全等<值和类型>)、!=、>、<、>=、<=

 

逻辑运算符

  • 逻辑运算符用于测定变量或值之间的逻辑。
  • &&、||、!

  1. 在 JavaScript语言中，所有的变量，都可以做为一个boolean类型的变量去使用

  2. 0、null、undefined、“”(空串)、 NaN 都认为是false

  3. &&运算，有两种情况
    (1)当表达式全为真的时候。返回最后一个表达式的值。
    (2)当表达式中，有一个为假的时候。返回第一个为假的表达式的值 

  4. || 运算,有两种情况
    (1)当表达式全为假时，返回最后一个表达式的值
    (2)只要有一个表达式为真。就会返回第一个为真的表达式的值

  5. &&运算和|运算有短路现象
    短路现象:当这个&&或||运算有确定结果后，后面的表达式不再执行

 

条件运算符

判断表达式 ? 结果为真 : 结果为假;

 

数组的定义

  1. var cars1 = [“参数1”,“参数2”,“参数3”];
  2. var cars2 = [ ];   //空数组/添加元素
  3. var cars3 = new Array(“参数1”,“参数2”,“参数3”);
  4. var cars4 = new Array();    //空数组
  • 越界访问返回undefined
  • 跨组添加，中间元素为undefined

 

数组遍历

for (i = 0; i < cars.length; i++){
      console.log(cars[i]);
}

 

函数定义方式
方式1: function关键字来定义函数
//定义没有返回值函数

function f1() {
    ...
}

// 定义有形参的函数
// 这里的形参，不需要指定类型

function f2(参数1,参数2...) {
    ...
}

// 定义有形参和返回值的函数，不需要指定返回类型，返回类型由返回的数据来决定

function f3(n1,n2) {
	...
    return ;
}

 

方式2:将函数赋给变量

var f1 = function() {
     ...
}

 

js函数注意事项

  1. js中函数的重载会覆盖掉上一次的定义
  2. 函数的arguments隐形参数（作用域在function函数内)
    (1)隐形参数:在 function函数中不需要定义，可以直接用来获取所有参数的变量
    (2)隐形参数特别像java 的可变参数一样。public void fun( int … args )
    (3) js 中的隐形参数跟java的可变参数一样。操作类似数组
function f2() {
   console.log("arguments=" , arguments);
}
f2(100,"字符串",1.1,null);

(1)如果我们的函数有形参，在传入实参的时候，仍然按照顺序匹配
(2)如果有匹配上，就赋给他，如果没有匹配上，也无所谓
(3)仍然会把所有的实参，赋给arguments
function f3(name) {
     console.log(name);
     console.log("arguments=" , arguments);
}
f3(100,200,300);

 
 
js中自定义对象

自定义对象方式1：Object形式

1.对象的定义

var对象名=new Object();	//对象实例（空对象)
对象名,属性名=值;	//定义一个属性
对象名.函数名= function()	//定义一个函数

2.对象的访问

对象名.属性
对象名,函数名();

<script type="text/javascript">
//person是一个空对象，没有自定义的函数和属性
    var person = Object();
    person.name = "小李";
    person.age = 30;
    person.say = function (){
         console.log("hello" + this.name + this.job); //这里也会出现变量提升
    }
    //调用
    //访问属性
     console.log(person.name);
    //访问方法
    person.say();

    //小细节: 如果没有定义属性，直接使用，就会出现变量提升，显示undefined
    console.log(person.address);
</script>

 
自定义对象方式2：{}形式
1.对象的定义

var对象名 = {
属性名:值, //定义属性
属性名:值, //定义属性，注意有,号
函数名: function(){} //定义函数
};

2.对象访问

对象名.属性
对象名.函数名();

<script type="text/javascript">
   var person = {
  	  name: "小李",
  	  age: 30,
  	  hi: function () {
        	console.log("name: " + this.name + " " + "age: " + this.age);
      },
  	  sum: function (n1, n2) {
       	    return n1 + n2;
   	  }
    }
</script>

 
 
JavaScript能致变HTML内容，能改变HTML属性，能改变HTML样式(CSS)，能完成页面的数据验证

js特点

1.JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解
2.JavaScript是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象(有对象)。
3.JavaScript是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程可以变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
       1.js代码可以写在script标签中
       2.type="text/javascript”表示这个脚本(script)类型是javascript
       3.type="text/javascript”可以不写，但是建议写上
       4.js语句可以不写;
       5.js可以不写; 建议写上
    -->
    <script type="text/javascript">
        //弱类型
        var age = "hello world";
        //alert使用弹框输出
        //输出 console.log 调试输出
        console.log("age=" + age);
        console.log(typeof age);
        //typeof 输出变量类型
        //alert(typeof name);
        age = 10;
        console.log("age=" + age);
        console.log(typeof age)

        //跟Java一样,对任何类型与字符串拼接，都会变为String类型
        console.log("age=" + age + "111");
        console.log(typeof (age + "111"))
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

js使用方式

两种使用js文件的方式，只能选择一个

在script标签中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        1. 可以在head 和 body嵌入script
        2. 执行顺序从上到下
        3. 建议放在head
    -->
    <script type="text/javascript">
        //在head中使用JavaScript
        console.log("head hello")
    </script>
</head>
<body>
<script type="text/javascript">
    //在body中使用JavaScript
    console.log("body world")
</script>
</body>
</html>

在script标签中引入外部js文件

创建JS目录，编写js文件
在这里插入图片描述

console.log("hello world")

引入js文件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./JS/test.js"></script>
</head>
<body>
</body>
</html>

##

查看js错误信息

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

js变量

在这里插入图片描述
JavaScript是弱类型
定义变量时，前面写上var，如 var num = 10;
不写也行 如 num = 10；
并且 变量的类型是可以随时变化的，如num = 10 此时它是number类型，后面在使用 num = “hello”，那么它现在是String类型

 

js数据类型

在这里插入图片描述

js特殊值

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1.typeof()是JavaScript 语言提供的一个函数
        //2.返回变量的数据类型
        //3个特殊值undefined没有赋值就使用null,NaN当不能识别类型
        var num;
        console.log(typeof num); //特殊值undefined
        var address = null;
        console.log(typeof address); //null
        console.log(10 * "abc"); //NaN = not a Number
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

js-String类型注意事项

在这里插入图片描述

js运算符

算术运算符

在这里插入图片描述

赋值运算符

在这里插入图片描述

关系运算符

在这里插入图片描述

逻辑运算符

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

&&

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var n1 = 1;
        var n2 = 5;
        var res1 = n1++ && n2++; //&& 结果为真,返回最后一个表达式的值
        console.log("n1=" + n1 + "," + "n2="+n2);

        var res2 = "123" && NaN; //&& 结果为假,返回第一个为假的值
        console.log(res2);
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述
||

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var n1 = 1;
        var n2 = 5;
        var res1 = n1++ || n2++; // || 结果为真,返回第一个为真表达式的值
        console.log("n1=" + n1 + "," + "n2="+n2);

        var res2 = null || NaN; // || 结果为假,返回最后一个为假的值
        console.log(res2);
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

条件运算符

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var n1 = 90;
        var res3 = n1 > 100 ? "Hello" : "World";
        console.log(res3);

        var res5 = n1 < 100 ? n1 + 100 : "World";
        console.log(res5);
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

数组

数组的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //"AUal", “BW" , "volvo";
        // 数组定义方式1
        var cars1 = ["Audi","BMW","Volvo"];
        console.log( "cars1=" + cars1);
        console.log(cars1[1]);//表示访问 cars1 数组的第2个元素，1表示下标/索引，从0开始编号

        //数组定义方式2
        var cars2 = [];//空数组/添加元素
        cars2[0] ="奥迪";
        cars2[1] ="宝马";
        cars2[2] ="奔驰";
        console.log( "cars=" + cars2)
        console.log(cars2[2]);
        console.log(cars2[10]);//undefined

        ///数组定义方式3
        var cars3 = new Array( "Audi","BMW","Volvo");
        console.log("cars3=" + cars3);
        console.log( "cars3[0]=" +cars3[0]);//Audi

        //数组定义方式4
        var cars4 = new Array();//空数组console.log(typeof cars4);
        cars4[0] ="法拉利";
        cars4[1] ="保时捷";
        cars4[2] = "yy"; //扩容
        cars4[0] = "zz";//替换
        cars4[8] = "红旗";//扩容，如果是跳过了下标给赋值，那么中间没有赋值的元素为undefined
        console.log(cars4[3]);
        console.log( "cars4= " +cars4 );

    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

数组遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var cars = [ "Audi","BMW","Volvo",100,1.1,true];
        for (i = 0; i < cars.length; i++){
            console.log(cars[i]);
        }
    </script>
</head>
<body>
</body>
</html>

js函数

函数基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //定义一个简单的函数
        //如果不调用函数，那么该函数时不会执行
        //在js中如果要执行函数，有两种方式1.主动调用hi(); 2．通过事件去触发该函数
        function hi() {
            alert("hello world");
        }
    </script>
</head>
<body>
<!--这里表示给button绑定了onclick事件-->
<!--当用户点击了该button，就会触发hi()函数-->
<button onclick="hi()">点击按钮</button>
</body>
</html>

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

函数定义方式

方式1: function关键字来定义函数

在这里插入图片描述
定义没有返回值函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //定义没有返回值函数
        function f1() {
            alert("f1()被调用~")
        }
        f1();
        // 定义有形参的函数
        // 这里的形参，不需要指定类型，name的数据类型是由实参决定
        function f2(name) {
            alert("hi" + name);
        }
        f2(888);

        // 定义有形参和返回值的函数，不需要指定返回类型，返回类型由返回的数据来决定
        function f3(n1,n2) {
            return n1 + n2;
        }
        alert("f3(10,20)=" + f3(10,20));
    </script>
</head>
<body>

</body>
</html>

方式2:将函数赋给变量

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var f1 = function (){
            console.log("hello world");
        }
        f1();

        var f3 = f1; //这样可以赋值,调用f3也相当于调用上面的函数
        f3();

        var f2 = function (n1){
            console.log(n1);
        }
        f2(200);

        var f4 = function (n1,n2){
            return n1 + n2;
        }
        console.log(f4("你好","世界"));
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

js函数注意事项

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //1. JS中函数的重载会覆盖掉上一次的定义
        //2．当你调用f1()时候其实调用的是f1(name)
        //3．调用于1(name)如果你没有传入实参，那么这个name就是undefined
        function f1() {
            console.log("hello world");
        }
        function f1(name){
            console.log("OK" +","+ name);
        }
        f1();

        //2．函数的arguments 隐形参数（作用域在function函数内)
        //(1) 隐形参数:在function函数中不需要定义，可以直接用来获取所有参数的变量。
        //(2) 隐形参数特别像java 的可变参数一样。public void fun( int ... args )
        //(3) js中的隐形参数跟java 的可变参数一样。操作类似数组
        function f2() {
            console.log("arguments=" , arguments);
        }
        f2(100,"字符串",1.1,null);


        //3 (1)如果我们的函数有形参，在传入实参的时候，仍然按照顺序匹配
        //  (2)如果有匹配上，就赋给他，如果没有匹配上，也无所谓
        //  (3)仍然会把所有的实参，赋给arguments
        function f3(name) {
            console.log(name);
            console.log("arguments=" , arguments);
        }
        f3(100,200,300);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

js中自定义对象

自定义对象方式1：Object形式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //person是一个空对象，没有自定义的函数和属性
        var person = Object();
        //定义一个name属性
        person.name = "小李";
        //定义一个age属性
        person.age = 30;
        //定义一个方法
        person.say = function (){
            console.log("hello" + this.name + this.job); //这里也会出现变量提升
        }
        //调用
        //访问属性
        console.log(person.name);
        //访问方法
        person.say();

        //小细节: 如果没有定义属性，直接使用，就会出现变量提升，显示undefined
        console.log(person.address);
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

自定义对象方式2：{}形式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var person = {
            name: "小李",
            age: 30,
            hi: function () {
                console.log("name: " + this.name + " " + "age: " + this.age);
            },
            sum: function (n1, n2) {
                return n1 + n2;
            }
        }
        console.log(person.name);
        console.log(person.age);
        person.hi();
        console.log(person.sum(100, 200));
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

JS POI EXCEL 原样式导出
01-02
JS 基于ligerui excel 导出，采用poi方式，可实现冻结行列，图片，原样式等功能导出。
POI导入excel，包括前端js代码
236004的博客
02-05 3927
已实现导入excel，包括前端js，ajax代码 js代码、 window.uploadRegisterTableRest = function () { //获取文件输入框对象 var fileInput = $('#getFile_registerTable');
JS&简单POI实现前端多个jqgrid列表导出Excel
筑梦的博客
01-07 2227
前两天接到一个需求，用户需要将前端展示的多个jqgrid批量导出，因为jqgrid是动态生成的多个列表，并且具有相同行合并效果，由于每个列表没有分页，所以打算通过前端将数据收集，而不是利用POI进行数据查询再导出。 1.首先要获取每个jqgrid名字，该项可以通过定义变量，在每次动态生成的时候将名字存入一个数组。 2.通过js遍历每个jqgrid的列标题和数据内容，存入数组，此处根据具
JS及POI将页面数据导出EXCLE文件的几种方法
http531的专栏
07-11 3536
JS实现的三种方法如下： 1、js文件：exportExcel.js //导出方法1:把表格中的内容提取出来，利用IE的另存为.csv的格式。  function getXlsFromTbl(inTblId, inTblContainerId, title, rownumbers) {      try {          var allStr = "";          var
【译】使用 Webpack 和 Poi 构建更好的 JavaScript 应用
weixin_34128237的博客
07-12 239
译者注：最近看到 Poi 这个也是打着零配置特点（Parcel：莫名躺枪？）的 JavaScript 打包工具，发现其在 Github 有着 3000+ Star 的同时在中文世界里热度却较低，因此在 Medium 上找了一篇文章翻译过来，方便大家了解之。 原文地址：blog.bitsrc.io/build-bette… Webpack 是一个将你所有的 JavaScript 文件，图片、字库...
前端-javascript-基础知识-总结笔记
02-25
个人学习javascript的笔记总结
服务人员没有捆绑前端-JavaScript开发
05-26
没有由Service Worker和Deno（PoC）提供的Service-worker SWDEV Runtime Transfome捆绑包前端。 如何使用＃install $ deno install -qAf --unstable https://deno.land/x/swdev/swdev.ts $ swdev init myapp $ cd ...
前端-JavaScript-ajax (axios、 promise、git...)
11-19
ajax--ajax原生写法。axios发送请求。promise概念。git版本管理器使用。具体：请求与相应、浏览器和服务器、接口、回调函数、事件循环、宏任务与微任务、form表单提交、serialize插件、JSON、async，await、git仓库...
dhtmlxTree目录树 前端 - Javascript实例代码是PHP+mySQL实现
09-25
dhtmlxTree目录树 前端 - Javascript实例代码是PHP+mySQL实现，其它语言稍做修改即可实现。与宿主语言无关。实例中代码解压后，导入数据库，并配置一下conn.php的数据库帐号和密码即可浏览.zip
带有基本代码的存储库，用于实时使用Webpack5和模块联合创建微型前端-JavaScript开发
05-26
带有基本代码的存储库，其中包含使用Webpack5和模块联合创建微型前端的实时信息。使用Webpack5模块联合创建微型前端在本课中，我们将使用webpack模块模块插件创建第一个微型前端，即模块联合负责在多个单独的版本...
Java poi 配合 js 预览doc文件
wxhwxh2的博客
11-03 278
记录一下Java poi 配合js对doc文件预览的方法
java +js + poi 实现对Excel报表导出至浏览器下载的功能
weixin_42457732的博客
04-16 582
java +js + poi 实现对Excel报表导出至浏览器下载的功能 jar依赖： org.apache.poi:poi:3.17 org.apache.poi:poi-ooxml:3.17 org.apache.poi:poi-ooxml-schemas3.17 前端js代码： $("#exportExcel").click(function(){ var queryParams = {}; var url = "aaa/bbb?param="+valus; var xhr; if(wind
JS Poi Excel导出
J。
01-02 1270
效果图:   由于项目框架采用的ligerui，所以写了一个基于ligerui excel 导出。采用poi方式，可实现冻结行列，图片，原样式等功能导出。 使用代码:   (JQuery扩展) $("#maingrid").tableExport({ title: "excel标题名称", fileName: "ex...
2024年，Rust开发语言，现在怎么样了?
LiangGang365的专栏
10-27 2115
Rust到底好不好用，最终还是要看具体的业务场景应用。比如，目前用Rust来编写纯UI的前端，可能还不是很成熟。但在内存管理、安全性和性能优化等领域，Rust无疑是一种非常优秀的语言选择。国内华为、字节、百度、阿里、美团等在通用组件、基础平台系统都在使用rust，其他国内数据库厂商、交易所、理想汽车、小鹏汽车等，以及大量在区块链、游戏行业提供的远程职位
基于H5的宿舍管理系统.zip
11-09
基于SSM的毕业设计源码
CSP-J历年复赛真题资源.txt
最新发布
11-09
CSP-J历年复赛真题资源.txt
【激光雷达】激光雷达数据处理（点云数据滤波、误差分析、模型验证、三维表面拟合）【含Matlab源码 9065期】.mp4
11-09
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
Blockspring-Javascript：前端发起请求的基本库
5. **前端JavaScript库的作用** - JavaScript库如blockspring-javascript使得开发者能够通过前端代码来利用后端服务，而无需处理底层的服务器请求和响应细节。 - 该库封装了与Blockspring通信的过程，使前端代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值