备案控制台
开发者社区 开发与运维 文章 正文

JavaScript （一）

2023-09-26 25
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JavaScript 对象可以说 "JavaScript 对象是变量的容器"。但是，我们通常认为 "JavaScript 对象是键值对的容器"。

数组


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <p id="app">好</p>
</body>
<script>
    var car = new Array();
    car[0] = "你";
    car[1] = "好";
    car[2] = "吗";
    for(var i=0 ; i<car.length ; i++){
        document.write(car[i] + "<br>");
    }
</script>
</html>


JavaScript 对象


可以说 "JavaScript 对象是变量的容器"。


但是，我们通常认为 "JavaScript 对象是键值对的容器"。


键值对通常写法为 name : value (键与值以冒号分割)。


键值对在 JavaScript 对象通常称为 对象属性。


访问属性有两种方式 person["name"] 和 person.name


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>
</body>
<script>
    var person={
        name:"刘牌",
        age:20,
        home:"中国"
    }
    document.write("名字："+person.name+"  "+"年龄 "+person.age+"  "+"家乡 "+person.home)
</script>
</html>


对象方法


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>
</body>
<script>
    var person={
        name:"刘牌",
        age:20,
        home:"中国",
        fullName:function () {
            return this.name + "  "+this.home;
        }
    }
    document.write(person.fullName())
</script>
</html>


JavaScript 函数


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>
<button onclick="steak()"></button>
</body>
<script>
    function steak() {
        alert("你好");
    }
</script>
</html>


调用带参数的函数


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>
<button onclick="steak('刘牌',20)"></button>
</body>
<script>
    function steak(name,age) {
        alert(name+"   "+age);
    }
</script>
</html>


JavaScript 全局变量


变量在函数外定义，即为全局变量。


全局变量有 全局作用域: 网页中所有脚本和函数均可使用。


如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。


特殊字符


在 JavaScript 中，字符串写在单引号或双引号中。


因为这样，以下实例 JavaScript 无法解析：


"We are the so-called "Vikings" from the north."


字符串 "We are the so-called " 被截断。


如何解决以上的问题呢？可以使用反斜杠 (\) 来转义 "Vikings" 字符串中的双引号，如下:


"We are the so-called \"Vikings\" from the north."


反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：


转义字符 (\) 可以用于转义撇号，换行，引号，等其他特殊字符。


字符串方法



运算符


如：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>
<input id="tel" type="text">
<button onclick="check()">提交</button>
</body>
<script>
    function check() {
        var tel = document.getElementById("tel");
        if (tel.length!=11){
            alert("请输入正确的电话号码");
        }
    }
</script>
</html>


还有很多运算符


JavaScript 正则表达式


正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。


搜索模式可用于文本搜索和文本替换。


使用字符串方法


在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。


search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。


replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。


如 var name = "Steve jobs";


var n = name.search(/jobs/i);


i  是一个修饰符 (搜索不区分大小写)。


search() 方法


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<p id="app"></p>
<button onclick="myFunction()">click me</button>
</body>
<script>
    function myFunction() {
        var name = "Steve jobs";
        var n = name.search(/jobs/i);
        document.getElementById("app").innerHTML = n;
    }
</script>
</html>


replace() 方法


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<p id="app"></p>
<button onclick="myFunction()">click me</button>
</body>
<script>
    function myFunction() {
        var name = "Steve jobs";
        var name1 = name.replace(/jobs/i , "steak")
        document.getElementById("app").innerHTML = name1;
    }
</script>
</html>


g:执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。


m:执行多行匹配。


正则表达式很强大：https://www.runoob.com/js/js-regexp.html （菜鸟教程）

 

JavaScript 调试


console.log() 方法


如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值：

 

JavaScript 变量提升


JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。


JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。


JavaScript 使用误区


在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)

 

JavaScript 表单验证


HTML 表单验证可以通过 JavaScript 来完成。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function validateForm() {
            var x = document.forms["myForm"]["fname"].value;
            if (x == null || x == "") {
                alert("需要输入名字。");
                return false;
            }
        }
    </script>
</head>
<body>
<form name="myForm" action="demo_form.php"
      onsubmit="return validateForm()" method="post">
    名字: <input type="text" name="fname">
    <input type="submit" value="提交">
</form>
</body>
</html>


在表单里面填写 required="required" 会自动验证


还有很多 https://www.runoob.com/js/js-form-validation.html


JavaScript this 关键字


面向对象语言中 this 表示当前对象的一个引用。


但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。


  • 在方法中，this 表示该方法所属的对象。

  • 如果单独使用，this 表示全局对象。

  • 在函数中，this 表示全局对象。

  • 在函数中，在严格模式下，this 是未定义的(undefined)。

  • 在事件中，this 表示接收事件的元素。

  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
 <p id="app"></p>
</body>
<script>
    var person={
        name: "刘牌",
        age: 20,
        fullName:function () {
            return this.name + " " + this.age;
        }
    };
    document.getElementById("app").innerHTML = person.fullName();
</script>
</html>


JavaScript let 和 const


let 声明的变量只在 let 命令所在的代码块内有效。


const 声明一个只读的常量，一旦声明，常量的值就不能改变。

 

javascript:void(0) 含义


我们经常会使用到 javascript:void(0) 这样的代码，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？


javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。


href="#"与href="javascript:void(0)"的区别


# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。


而javascript:void(0), 仅仅表示一个死链接。


在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。


如果你要定义一个死链接请使用 javascript:void(0) 。

 

JavaScript 闭包


JavaScript 变量可以是局部变量或全局变量。


私有变量可以用到闭包。


计数器困境


设想下如果你想统计一些数值，且该计数器在所有函数中都是可用的。


你可以使用全局变量，函数设置计数器递增：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
 <p id="app"></p>
 <button onclick="addNumber()">add</button>
</body>
<script>
    var count = 0;
    function add() {
        return count +=1;
    }
    function addNumber() {
        document.getElementById("app").innerHTML = add();
    }
</script>
</html>


但是申明为局部变量，计算器则不能加，只能加到1


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
 <p id="app"></p>
 <button onclick="addNumber()">add</button>
</body>
<script>
    function add() {
        var count = 0;
        return count +=1;
    }
    function addNumber() {
        document.getElementById("app").innerHTML = add();
    }
</script>
</html>


但是用到闭包，它就能加


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
 <p id="app"></p>
 <button onclick="addNumber()">add</button>
</body>
<script>
    var add = (function () {
        var count = 0;
        return function () {
            return count += 1;
        }
    })();
    function addNumber() {
        document.getElementById("app").innerHTML = add();
    }
</script>
</html>


onload 和 onunload 事件


onload 和 onunload 事件会在用户进入或离开页面时被触发。


onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。


onload 和 onunload 事件可用于处理 cookie。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body onload="addNumber()">
 <p id="app"></p>
</body>
<script>
    function addNumber() {
        alert("你好");
    }
</script>
</html>


onchange 事件


onchange 事件常结合对输入字段的验证来使用。


当在表单输入小写字母后，离开表单后，触发函数，变为大写的


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="text" id="fname" onchange="myFunction()">
</body>
<script>
    function myFunction() {
        var x = document.getElementById("fname");
        x.value = x.value.toUpperCase();
    }
</script>
</html>


onmouseover 和 onmouseout 事件


onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。


鼠标没有移到div上面时为mouse me ， 移到div上时为   "你好"  , 离开时为   "刘牌",


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div onmouseover="myFunction(this)" onmouseout="myFunction1(this)" style="width: 100px;height: 100px;background-color: red">mouse me</div>
</body>
<script>
    function myFunction(obj) {
        obj.innerHTML = "你好";
    }
    function myFunction1(obj1) {
        obj1.innerHTML = "刘牌";
    }
</script>
</html>


onmousedown、onmouseup 以及 onclick 事件


onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

 

JavaScript HTML DOM EventListener


向同一个元素中添加多个事件句柄


addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button id="app">click me</button>
</body>
<script>
   var x = document.getElementById("app");
   x.addEventListener("click",function1);
   x.addEventListener("click",function2);
   function function1() {
       alert("你好");
   }
   function function2(){
       alert("刘牌");
   }
</script>
</html>


传递参数


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button id="app">click me</button>
</body>
<script>
   var x = document.getElementById("app");
   x.addEventListener("click",function1(2,4));
   x.addEventListener("click",function2(3,6));
   function function1(num1,num2) {
       alert("你好"+num1*num2);
   }
   function function2(num1,num2){
       alert("刘牌"+num1+num2);
   }
</script>
</html>


事件冒泡或事件捕获？


事件传递有两种方式：冒泡与捕获。


事件传递定义了元素事件触发的顺序。 如果你将

元素插入到

元素中，用户点击

元素, 哪个元素的 "click" 事件先被触发呢？


在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。


在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：

元素的点击事件先触发 ，然后再触发

元素的点击事件。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app1">
        <p id="app2">冒泡</p>
    </div>
    <br>
    <div id="app3">
        <p id="app4">捕获</p>
    </div>
</body>
<script>
   document.getElementById("app1").addEventListener("click",function () {
       alert("你好")
   })
   document.getElementById("app2").addEventListener("click",function () {
       alert("刘牌")
   })
   document.getElementById("app3").addEventListener("click",function () {
       alert("你好")
   })
   document.getElementById("app4").addEventListener("click",function () {
       alert("刘牌")
   })
</script>
</html>


removeEventListener() 方法


removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app1" style="width: 100px;height: 100px;background-color: red">
        鼠标经过我
        <button onclick="remove()">on</button>
    </div>
    <p id="text"></p>
</body>
<script>
   document.getElementById("app1").addEventListener("mousemove",myFunction);
   function myFunction() {
       document.getElementById("text").innerHTML = Math.random();
   }
   function remove() {
       document.getElementById("app1").removeEventListener("mousemove",myFunction);
   }
</script>
</html>


向 Window 对象添加事件句柄


addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>实例在 window 对象中使用 addEventListener() 方法。</p>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});
</script>
</body>
</html>




文章标签：
JavaScript
前端开发
容器
自然语言处理
刘牌
目录
相关文章
吉士先生
|
8月前
|
JavaScript 前端开发
70.【JavaScript 6.0】（二）
70.【JavaScript 6.0】
吉士先生
27 0
Love-Java.
|
6月前
|
JavaScript 前端开发
javascript01
javascript01
Love-Java.
38 0
刘牌
|
8月前
|
存储 JavaScript 前端开发
JavaScript （二）
JavaScript 对象 可以说 &quot;JavaScript 对象是变量的容器&quot;。 但是，我们通常认为 &quot;JavaScript 对象是键值对的容器&quot;。
刘牌
23 0
~black-
|
9月前
|
存储 JSON JavaScript
JavaScript Day01 初识JavaScript 3
JavaScript Day01 初识JavaScript
~black-
58 0
~black-
|
9月前
|
Web App开发 JavaScript 前端开发
JavaScript Day01 初识JavaScript 1
JavaScript Day01 初识JavaScript
~black-
52 0
~black-
|
9月前
|
存储 JavaScript 前端开发
JavaScript Day01 初识JavaScript 2
JavaScript Day01 初识JavaScript
~black-
34 0
晴栀~
|
10月前
|
JavaScript 前端开发
初学JavaScript
JavaScript
晴栀~
50 0
技术小结
|
11月前
|
JavaScript 前端开发
【JavaScript】什么是JavaScript？
【JavaScript】什么是JavaScript？
技术小结
70 0
vohelon
|
JavaScript 前端开发
JavaScript 能够做什么？
JavaScript 能够做什么？
vohelon
71 0
技能实验室
|
JavaScript 前端开发 Java
JavaScript的知识总结（5）
JavaScript的知识总结（4）
技能实验室
87 0

热门文章

最新文章

  • 1
    MySQL数据库重命名的方法
  • 2
    CVE-2017-9805:Struts2 REST插件远程执行命令漏洞(S2-052) 分析报告
  • 3
    阿里云播放器SDK的正确打开方式 | 功能、架构与应用（一）
  • 4
    流言终结者- Flutter和RN谁才是更好的跨端开发方案？
  • 5
    Linux 多核下绑定硬件中断到不同 CPU（IRQ Affinity）
  • 6
    PostgreSQL 聚合函数讲解 - 3 总体|样本 方差, 标准方差
  • 7
    利用Serverless Kubernetes和Kaniko快速自动化构建容器镜像
  • 8
    袋鼠云数据中台专栏（五）：数栈，企业级一站式数据中台PaaS
  • 9
    企业微信开发（二）：API对接及Demo程序
  • 10
    一篇文章深入浅出带你了解mybatis
  • 1
    如果使用已经到达 End of life 的 Angular 版本会遇到什么问题
    22
  • 2
    印刷文字识别产品使用合集之部署失败如何解决
    23
  • 3
    印刷文字识别产品使用合集之API接口无法调用如何解决
    25
  • 4
    什么是计算机图形领域的 color saturation
    26
  • 5
    mvp架构
    22
  • 6
    dex、vdex、.odex与.oat
    26
  • 7
    java调用kotlin代码编译报错“找不到符号”的问题
    16
  • 8
    印刷文字识别产品使用合集之身份证识别接口有哪些
    20
  • 9
    Build was configured to prefer settings repositories over project repositories but repository
    16
  • 10
    Java注解之编译时注解
    16

    • 相关课程

    更多
  • JavaScript入门与实战

    • 相关电子书

    更多
  • Javascript中的函数
  • JavaScript函数
  • Javascript中的对象

    • 相关实验场景

    更多
  • HTML及前端框架
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考