JavaScript

最新推荐文章于 2022-04-28 04:47:01 发布
最新推荐文章于 2022-04-28 04:47:01 发布
阅读量116 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alencb/article/details/119242630
版权

目录

1 JavaScript介绍

JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。（简称JS）。
JS是弱类型，Java是强类型。（弱类型就是类型可变 ,如var = i,i = 1，i = " abc"；强类型就是定义变量的时候类型确定，不能改变）
特点：
1）交互性(可以做信息的交互)
2）安全性（不允许直接访问本地硬盘）
3）跨平台性（只需要浏览器，和平台无关）、

2 JavaScript和HTML结合

2.1 第一种使用方式

<head><!-- 表示头部信息，一般包括三部分内容，title 标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面用UTF-8字符集 -->
    <title></title>
<script type = "text/javascript">
    /*
    alert是js语言中提供的警告函数
    它可以接收任意参数，这个参数就是警告框提示的信息
     */

    alert("hello")
</script>


</head>

2.2第二种

引入外部的JS文件来执行。

<script type = "text/javascript" src =”1.js“ >

</script>

3 变量

JavaScript中的变量类型：
数值类型： number（对应java中的float 、int、 byte等等）
字符串类型： String
对象类型：object
布尔类型： boolean
函数类型： function

JavaScript里的特殊值：
undefind：未定义，所有js变量未赋初始值的时候，默认值都是undefined
null： 空值
NAN： 全称是：Not a Number。非数字，非数值

创建变量和java相同

<head><!-- 表示头部信息，一般包括三部分内容，title 标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面用UTF-8字符集 -->
    <title></title>
<script type = "text/javascript"  >
var i;
i = 12;
alert(typeof(i));

</script>

</head>

NAN的情况：

<head><!-- 表示头部信息，一般包括三部分内容，title 标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面用UTF-8字符集 -->
    <title></title>
<script type = "text/javascript"  >

var i = 12;
var p = "xixihaha";
alert(i*p);

</script>
</head>

3.1 JavaScript的关系运算

<script type = "text/javascript"  >
  var a = "12";
  var b = 12;
  alert(a == b);//true
  alert(a === b);//false
</script>

3.2 逻辑运算

3.2.1 &&与运算

有两种情况：
第一种：当表达式全为真的时候，返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候，返回第一个为假表达式的值。

<script type = "text/javascript">
var a = "abc";
var b = "true";
var d = false;
var c = null;
alert(a&&b);//true
alert(b&&a)//abc
alert(a&&d)//false
alert(a&&c)//null
</script>

3.2.2 || 运算

两种情况：第一种情况：当表达式为假时，返回最后一个表达式的值
第二种情况：只有一个表达式为真，就会返回第一个为真的值

4 数组

<script type = "text/javascript">
var arr = [];
arr[3] = "abc";
for (var i = 0;i<arr.length;i++){
    alert(arr[i]);
}
</script>

JS语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。

5 函数

5.1 函数第一种使用方式

<script language="JavaScript">
    function fun(){
        //function的无参调用
        alert("无参数funciton被调用了");
    }
    function fun2(a,b){
        //function的有参调用
        alert(a+b);
    }
fun();
    fun2(1,2)
</script>

5.2第二种使用方式

使用格式如下：
var 函数名 = function{形参列表}{函数体}
JS不允许重载
在Java中函数允许重载，但是在JS中函数的重载回直接覆盖掉上一次的定义

5.3 函数的arguments隐形参数（只在function函数内）

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

<script language="JavaScript">

function sum(num1,num2){

    var result = 0;
    for(var i = 0;i<arguments.length;i++){
        result+=arguments[i];
    }

return result;
}
alert(sum(1,2,34,5,6,67,8,9))


</script>

6 JS中自定义对象

object形式的自定义对象
对象的定义：
var 变量名 = new object();//对象实例（空对象）
变量名.属性名 = 值；//定义一个属性
变量名.函数名 = fucntion{}//定义一个函数
对象的访问：
变量名.属性/函数名()；

<script language="JavaScript">

    var obj = new Object();
    obj.name = "邢大靠普"
    obj.age = "18";
    obj.fun = function (){
        alert(obj.name+obj.age);
    }
    alert(obj.fun())

</script>

var 变量名 = {}；//空对象

  <script language = "JavaScript">

        var obj = {
            name: "也弟",
            fun:function () {
            alert(this.name);
        }
        }
        ;
        alert(obj.name)

    </script>

7 JS中的事件

事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件:
onload加载完成事件 页面加载完成之后，常用于作业面JS代码初始化操作
onclick单机事件 常用于按钮的点击响应操作。
onblur失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法。
onchange内容发生改变事件 常用于下拉列表和输入框内容发生改变后的操作
onsubmit表单提交事件： 常用于表单提交前，验证所有表单项是否合法

7.1事件的注册（静态 动态）

事件的注册：
告诉浏览器，当事件响应后要执行哪些操作代码，叫事件的注册或事件的绑定。
静态注册事件：通过html标枪的时间属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册事件：是指通过js代码得到标签的dom对象，然后通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码，叫动态注册。
动态注册的基本步骤：
1）获取标签对象
2）标签对象.事件名 = function(){}

7.2 onload事件

静态：

<head><!-- 表示头部信息，一般包括三部分内容，title 标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面用UTF-8字符集 -->
    <title></title>
    <script language = "JavaScript">
       function fun(){
           alert("xixihaha");
       }
    </script>
</head>
<body onload="fun()">


</body>

动态注册是固定写法

<head><!-- 表示头部信息，一般包括三部分内容，title 标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面用UTF-8字符集 -->
    <title></title>
    <script language = "JavaScript">
                window.onload = function(){
    alert("123")
    }
</script>

</head>
<body> 
</body>

<head><!-- 表示头部信息，一般包括三部分内容，title 标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面用UTF-8字符集 -->
    <title></title>
    <script language = "JavaScript">
                window.onload = function(){
                 var btnObj = document.getElementById("btn1");
btnObj.onclick = function(){
    alert("动态注册");
}
    }
</script>

</head>
<body>
<button id = "btn1"> 按钮</button>

</body>

7.3 onblur事件

静态：

<head><!-- 表示头部信息，一般包括三部分内容，title 标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面用UTF-8字符集 -->
    <title></title>
    <script language = "JavaScript">


        function fun(){

            console.log("静态注册失去焦点事件");
        }




</script>

</head>
<body>
<button onblur="fun()"> 按钮</button>

</body>

运行结果如下：
在这里插入图片描述

动态：

<head><!-- 表示头部信息，一般包括三部分内容，title 标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面用UTF-8字符集 -->
    <title></title>
    <script language = "JavaScript">


       window.onload = function (){
           var passwordObj = document.getElementById("password");

           passwordObj.onblur = function(){
               console.log("动态");
           }
       }
</script>

</head>
<body>
      密码：<input id = "password" type = "text"> </input>

</body>

运行结果如下：
在这里插入图片描述

7.4 表单提交事件onsubmit

动态：

<head><!-- 表示头部信息，一般包括三部分内容，title 标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面用UTF-8字符集 -->
    <title></title>
    <script language = "JavaScript">


       window.onload = function (){
           var formsubmit = document.getElementById("Tpwork");
         formsubmit.onsubmit = function(){
           }
       }
</script>

</head>
<body>
     <form action = "http://baidu.com" method = "post" id = "Tpwork" >

         <input type = "submit" value = "注册">         
     </form>
</body>

8 DOM模型

把标签、属性、文本 转换成为对象来管理。

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

8.1 document对象

8.1.1 getElementById

验证用户

<head><!-- 表示头部信息，一般包括三部分内容，title 标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面用UTF-8字符集 -->
    <title></title>
    <script type = "text/javascript">

        function onclickFun(){
            var getusername = document.getElementById("username");
            var textgetusername = getusername.value;//dom对象
            var patt = /^\w(5,12)$/;
            /**
             * test方法用于测试某个字符串是不是匹配我的规则
             * 匹配返回true 不匹配返回false
             */
            if(patt.test(textgetusername)){
                alert("合法");
            }else{
                alert("不合法")
            }
        }
</script>

</head>
<body>
         <input type = "text" id = "username" value = "abc" />
         <button onclick="onclickFun()">点击</button>

</body>

8.1.2 getElementsByName

<head><!-- 表示头部信息，一般包括三部分内容，title 标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面用UTF-8字符集 -->
    <title></title>
    <script type = "text/javascript">
  //全选
        function checkall(){
            //让所有的复选框都选中
            //document.getElementByName（）是根据指定得name属性查询返回多个标签对象集合
            //这个集合的操作跟数组一样
            var hobbies = document.getElementsByName("hobby");
            for(var i = 0;i<hobbies.length;i++){
                hobbies[i].checked = true;
            }
        }
        //全部选
  function checkNo(){
      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 = "c++" />C++
         <input type = "checkbox" name = "hobby" value = "java" />java
         <input type = "checkbox" name = "hobby" value = "javascript" />javascript
      <button onclick="checkall()">全选</button>
         <button onclick="checkNo()">全不选</button>
         <button onclick="checkReverse()">反选</button>

</body>

8.1.3 getElementsByTagName

<head><!-- 表示头部信息，一般包括三部分内容，title 标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面用UTF-8字符集 -->
    <title></title>
    <script type = "text/javascript">
  //全选
        function checkall(){
          // document.getElementsByTagName()根据指定标签名来进行查询并返回集合
            var inputs = document.getElementsByTagName("input");
        for(var i = 0;i<inputs.length;i++){
            inputs[i].checked = true;
        }

        }


</script>

</head>
<body>
         <input type = "checkbox" name = "hobby" value = "c++" />C++
         <input type = "checkbox" name = "hobby" value = "java" />java
         <input type = "checkbox" name = "hobby" value = "javascript" />javascript
      <button onclick="checkall()">全选</button>
</body>

8.1.4 添加子元素

    <script type = "text/javascript">
        window.onload = function(){

            //用js代码创建html标签并显示在页面上
            var dibobj = document.createElement("div");//在内存中<div></div>
            dibobj.innerHTML = "旭哥牛逼";//<div>旭哥牛逼</div>但还只是在内存中
            document.body.appendChild(dibobj);
        }

</script>

效果相同

    <script type = "text/javascript">
        window.onload = function(){


            var t = document.createTextNode("123")
            document.body.appendChild(t);

        }



</script>

8.2 正则表达式

    <script type = "text/javascript">

        /**
         * 正则表达式对象的两种写法
         * @type {RegExp}
         */
               //表示字符串中，必须包含字母e
        var patt = new RegExp("e");
        var  patt2 = /e/;
</script>

（更详细内容查百度）

Alencb
关注
javascript
02-10
JavaScript是一种广泛用于网页开发的脚本语言，它是实现Web前端交互功能的核心技术之一。在给定的文件内容中，我们可以提取到关于JavaScript的多个知识点： 1. JavaScript的变量类型：JavaScript中主要有几种基本的...
利用noesis.Javascript开源组件.Net中执行javascript脚本
10-26
标题中的“利用noesis.Javascript开源组件.Net中执行javascript脚本”是指在.NET环境中使用Noesis.Javascript这个开源库来运行JavaScript代码，并且允许JavaScript与C#代码进行交互。Noesis.Javascript组件使得...
javascript---number类型之前后端通讯
An_ape的博客
01-14 1361
1、javascript不区分整型和浮点型，也就是说js所有的数据都是使用浮点型表示； 2、整数范围：-9007199254740992~9007199254740992（-2^53~2^53），也就是16位；如果超过范围，就改变精度，导致数据不正确。 3、发送数据：前端number类型超过16位，不会再js里面报错，但是发送给服务端会400的通信失败。java如果传回超过16位number类...
关于后台接收前端传递值的简单总结
Dannie的博客
05-26 2422
1、后台接收类型为String字符串： JS文件： function click() { ······ var ids = new Array(); var checked = $('#table').bootstrapTable('getSelections'); $.each(checked, function(i, item) { ids.push(item.id); } delete(ids); } /* -------中间省略部分代码------ */ funct
后端long转给前端number 数据改变（失真）
doublepg13的博客
04-10 996
问题：在进行后端接口调试的时候，发现无法更新数据，最后发现是因为id的最后两位全部变为00。后端人员说ID的类型设置为long,而前端是Number类型,超过了17位发生溢出,不使用String是因为数据库的效率问题。 解决方案： 后端:在发送数据之前通过注解的方式将long转为string 前端:在接收数据的时候通过success回调函数进行处理转为string 最后是后端人员解决了这个问题，因为后端的接口会被其他人员调用,从源头解决方便太多 后端： 第一种 @JsonSerialize(using
在接口传参时，前端的数据类型对应后端的数据类型
tangxiaobao2016的博客
01-27 3187
C#里int是有大小的, 默认的int最大是20亿多, 有时候用不着这么大的数字, 就发明了小整数, 从小到大分别是byte short int long， 其中, 默认的是带符号的, 就是可正可负, 如果前面加上u, 就代表无符号的, 就是正数, 如果是u开头的, 因为没有负数部分, 所以正数部分可以是原来的两倍大小 Sbyte:代表有符号的8位整数，数值范围从-128 ～ 127 Byte:代表无符号的8位整数，数值范围从0～255 Short:代表有符号的16位整数，范围从-32768 ～ 32767
js基本数据类型与java存在的差异
www.小白
01-02 1134
下面只把与java不同的地方作一个对比，对具体使用不作描述，使能更加清晰的区分。 1、js只有五种基本数据类型，分别为：number,string,boolean,null,undefined。  number:就是java有关数字的集合,只要是数字不论整数或浮点数在js中都定义为number string: js没有字符（char)这个数据类型，字符一律用string表示 boolean...
JavaScript事件基础
热门推荐
JiuMeilove的博客
04-28 2万+
JavaScript事件概述 JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测道德行为 简单的理解为:触发—响应机制 网页中国每个元素都可以产生某些可以触发JavaScript的事件,例如我们可以在用户点击某个按钮时产生一个事件然后去执行某些操作 JavaScript事件的三要素 JavaScript事件又三分部组成 事件源 被触发的对象 事件类型__如何触发/什么事件 事件处理器__通过一个函数赋值的方式完成 <body> <butto
javascript之Math
weixin_45441470的博客
03-21 2336
在javascript中Math是js的内置的对象，其中有很多属性和方法用来操作跟数学相关 属性Math.PI Math方法有： Math.random()---随机数 Math.ceil()--向上取整 Math.floor()--向下取整 Math.abs()--绝对值 Math.max()--最大值 Math.min()--最小值 Math.pow()--求次方 Math.sqrt()--开根号 Math.around()-四舍五入 Math.sin()--正弦 Math.c
ArcGis-for-javaScript最全中文API.pdf
06-28
ArcGIS JavaScript API 介绍与示例 ArcGIS JavaScript API 是 ESRI 提供的一种基于 JavaScript 的开发工具，允许开发者创建交互式的 Web 地图应用程序。本文将对 ArcGIS JavaScript API 进行详细的介绍，并提供多个...
VS2015安装证书，JavaScript_ProjectSystem.msi，JavaScript_LanguageService.msi
08-06
在这个场景中，我们关注的是VS2015的安装过程中涉及到的证书问题以及两个特定的组件：JavaScript_ProjectSystem.msi和JavaScript_LanguageService.msi。 首先，关于“VS2015安装证书”，这通常是指安装过程中需要...
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码
12-11
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页...
Java 类型number_[Java教程]javascript类型系统——Number数字类型
weixin_35045900的博客
02-22 469
[Java教程]javascript类型系统——Number数字类型02016-06-15 19:00:05×目录[1]定义 [2]整数 [3]浮点数[4]科学记数[5]数值精度[6]数值范围[7]特殊数值[8]转成数值[9]实例方法前面的话javascript只有一个数字类型，它在内部被表示为64位的浮点数，和java的double数字类型一样。与其他大多数编程语言不同的是，它没有分离出整数类型...
js table java数据类型_JavaScript与Java数据类型的区别
weixin_42573647的博客
02-13 161
今天开始正式认真学习js，虽然在平常j2ee开发中也经常用到JS但并不精通，这次随笔记下js与Java数据类型的不同之处Number与java不同，js作为弱类型语言即使在浮点数与整数上也未作明确区分，Number值可以是var a = 5 or 5.5，以及其他进制如八进制 var a = 070.甚至是科学计数 var a = 3.12E3 .var a=1;var a=1.2;var a...
知识图谱-基于Neo4j+Python+Cypher+KG实现的小型金融知识图谱构建项目-附项目源码+流程教程-优质项目实战
10-20
知识图谱_基于Neo4j+Python+Cypher+KG实现的小型金融知识图谱构建项目_附项目源码+流程教程_优质项目实战
资产管理系统-使用Python+CSS开发的资产配置管理系统-附完整流程教程-优质项目.zip
10-20
资产管理系统_使用Python+CSS开发的资产配置管理系统_附完整流程教程_优质项目
基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库+使用说明（毕业设计）
10-20
基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库（毕业设计），本项目是一套个人98分毕业设计系统，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业，包含：项目源码、项目说明等。该项目可以直接作为毕设使用，项目都经过严格调试，确保可以运行！ 基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库+使用说明（毕业设计）基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库+使用说明（毕业设计）基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库+使用说明（毕业设计） 基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库+使用说明（毕业设计）基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库+使用说明（毕业设计）基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据库+使用说明（毕业设计）基于SpringMVC+Spring+MyBatis的博客网站系统源码+数据
614075276467436开心叠一叠.apk
最新发布
10-20
614075276467436开心叠一叠.apk
优秀毕业设计-基于海思Hi3516开发板的RTP流媒体服务器系统-项目实战.zip
10-20
优秀毕业设计_基于海思Hi3516开发板的RTP流媒体服务器系统_项目实战
日本JavaScript函数教学课件详解：背景色与样式控制
本教学课件是关于日语版的JavaScript编程语言，专注于讲解函数这一核心概念。课程内容包括以下几个部分： 1. **函数基础**: - 函数定义：讲解了如何在JavaScript中使用`function`关键字来创建一个名为`f`的函数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值