JavaScript基础入门：语法特性、引入与事件处理,-优快云博客

本文链接：https://blog.youkuaiyun.com/xinzhisuox/article/details/134287145

JS基本介绍

补充：JavaScript是一门脚本语言，即，将来JavaScript编写出来的代码是不需要经过编译的，直接经过浏览器的解释就可以运行了。那么像Java语言还需要经过编译，将编写好的源代码.java文件要编译成字节码.class文件，然后再由虚拟机去运行。而像JavaScript这种语言是不需要的，这样就简化了整个的开发过程，因为不需要编译。

JS是弱类型：弱类型就是类型可变

Java是强类型：就是定义变量的时候。类型已确定。而且不可变。

特点：
1、交互性（它可以做的就是信息的动态交互）
2、安全性（不允许直接访问本地硬盘）
3、跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）

JS引入方式

第一种：

只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
    // alert是javascript语言提供的一个警告框函数。
    // 它可以接收任类型的参数，这个参数就是警告框的提示信息
        alert("hello JavaScript");
    </script>
</head>
<body>
 
</body>
</html>

第二种：

使用script标签引入单独的JavaScript代码文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    现在需要使用script引入外部的js文件来执行
    src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）
    script标签可以用来定义js代码，也可以用来引入js文件
    但是,两个功能二选一,使用不能同时使用两个功能
    -->
    <scriptsrc="1.js"></script>
    <script>
        alert("你好张三");
    </script>
</head>
<body>
 
</body>
</html>

变量和数据类型的介绍

1.变量类型

2. 关系比较运算

等于 == 等于是简单的做字面值的比较
全等于 === 除了做字面值的比较之外，还会比较两个变量的数据类型

3.数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    var arr = []; // 定义一个空数组
    // alert(arr.length); // 0

    arr[0] = 12;
    // alert(arr[0]); // 12
    // alert(arr.length); // 0

    // javaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
    arr[2] = "abc"
    alert(arr.length); //3
    
    alert(arr[9]);
    
    // alert(arr[1]); // undefined
    // 数组的遍历
    for(var i = 0; i < arr.length; i++){
      alert(arr[i]);
    }
    
  </script>
</head>
<body>

</body>
</html>

4.函数定义

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    // 定义一个无参函数
    function fun(){
      alert("无参函数fun()被调用了")
    }
    // 函数调用后才会执行
    // fun();
    
    function fun2(a, b){
      alert("有参函数fun2()被调用了 a=>" + a + ",b=>" + b);
    }
    
    // fun2(12,"abc");
    
    // 定义带有返回值的函数
    function sum(num1, num2){
      var result = num1 + num2;
      return result;
    }
    
    alert(sum(100, 50));
    
  </script>
</head>
<body>

</body>
</html>

方法二：
使用格式如下：var 函数名 = function（形参列表）{函数体}

关于重载的问题

在Java中函数允许重载，但是在JS中函数的重载会直接覆盖掉上一次的定义。

5.Object自定义对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>

    // 对象的定义：
    //      var 变量名 = new Object(); // 对象实例
    //      变量名.属性名 = 值;          // 定义一个属性
    //      变量名.函数名 = function(){} // 定义一个函数
    var obj = new Object();
    obj.name = "华仔";
    obj.age = 18;
    obj.fun = function(){
      alert("姓名：" + this.name + " , 年龄：" + this.age);
    }
    // 对象的访问：
    //      变量名.属性 / 函数名();
    // alert(obj.age);
    obj.fun();
    
  </script>
</head>
<body>

</body>
</html>

6.花括号形式的自定义对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    // 对象的定义：
    // var 变量名 = {        // 空对象
    //     属性名： 值，      // 定义一个属性
    //     属性名： 值，      // 定义一个属性
    //     函数名：function(){} // 定义一个函数
    // };
    var obj = {
      name:"国哥",
      age:18,
      fun:function() {
          alert("姓名：" + this.name + ",年龄：" + this.age);
      }
    }
    
    // 对象的访问：
    //    变量名:属性 / 函数名();
    alert(obj.name);
    obj.fun();
  </script>
</head>
<body>

</body>
</html>

7.JS中的事件

事件的定义：电脑输入设备与页面进行交互的响应。我们称为事件。

常用的事件：

onload：加载完成事件--- 页面加载完成后，常用于页面JS代码初始化操作。
onclick：单机事件 ---- 常用于按钮的点击响应事件
onblur：失去焦点事件 --- 常用于输入框失去焦点后验证输入内容是否合法
onchange：内容发生改变事件--常用于下拉列表和输入框内容发生后操作
onsubmit：表单提交事件 --- 常用于表单提交前，验证所有表单项是否合法

8.两种事件注册的介绍

事件的注册（绑定）：告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

静态注册事件：通过html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。

动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。

9.各类事件

onload事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    // onload事件的方法
    function onloadFun(){
      alert('静态注册onload事件，所有代码');
    }

    // onload事件动态注册，是固定写法
    window.onload = function(){
      alert("动态注册的onload事件");
    }
  </script>
</head>
<!-- 静态注册onload事件
        onload事件是浏览器解析完页面之后就会自动触发的事件
        <body οnlοad="onloadFun();">
-->
<body>

</body>
</html>

onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    function onclickFun(){
      alert("静态注册onclick事件")
    }

    // 动态注册onclick事件
    window.onload = function(){
      // 1 获取标签对象
      /*
       * document 是JavaScript语言提供的一个对象（文档）<br/>
       * get      获取
       * Element  元素（就是标签）
       * By       通过...由...经...
       * Id       id属性
       *
       * getElementById通过id属性获取标签对象
       */
      var btnObj = document.getElementById("");
      //alert(btnObj);
      // 2 通过标签对象，事件名 = function(){}
      btnObj.onclick = function(){
        alert("动态注册的onlick事件")
      }
    }

  </script>
</head>
<body>
  <!--静态注册onClick事件-->
  <button onclick="onclickFun();">按钮1</button>
  <button id="btn01">按钮2</button>
</body>
</html>

onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    // 静态注册失去焦点事件
    function onblurFun(){
      // console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制台打印输出，用于测试使用
      // log()是打印的方法
      console.log("静态注册失去焦点事件")
    }

    // 动态注册 onblur事件
    window.onload = function() {
      // 1 获取标签对象
      var passwordObj = document.getElementById("password");
      // 2 通过标签对象.事件名 = function(){}
      passwordObj.onblur = function(){
      }
    }

  </script>
</head>
<body>
  用户名：<input type="text" onblur="onblurFun();"><br/>
  密码：<input id="password" type="text"><br/>
</body>
</html>