04 JavaScript

时间:2021-07-21
本文章向大家介绍04 JavaScript,主要包括04 JavaScript使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

JavaScript 介绍

特点:

  1. 交互性(它可以做的就是信息的动态交互)
  2. 安全性(不允许直接访问本地硬盘)
  3. 跨平台性(只要是可以解释 JS 的浏览器都可以执行,和平台无

一、 JavaScript 和 html 代码的结合方式

1.1 第一种方式

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

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

</body>
</html>

1.1 第二种方式

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

js内容

alert("起飞")

html代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--
    现在需要使用script引入外部的js文件来执行
    src属性专门用来引入js文件路径(可以是相对路径,也可以是决定路径)

    script标签可以用来定义js代码,也可以用来引入js文件
    但是,两个功能二选一使用,不能同时使用两个功能
  -->
  <script type="text/javascript" src="01.js"></script>
</head>
<body>

</body>
</html>

二、变量


实例代码:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    var i;
    i=12;
    //typeof()是js语言提供的一个函数
    //可以返回变量的数据类型
    //alert(typeof (i));number
    i = "abc";
    //alert(typeof (i));String

    var a = 12;
    var b = "abc";
    alert(a * b);//MaN是非数字、非数值

  </script>
</head>
<body>
</body>
</html>

三、关系(比较)运算

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

示例代码:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    var a = "12";
    var b =12;

    alert(a == b);//true
    alert(a === b);//false
  </script>
</head>
<body>

</body>
</html>

三、逻辑运算

且运算: &&
或运算: ||
取反运算: !
在 JavaScript 语言中,所有的变量,都可以做为一个 boolean 类型的变量去使用。0 、null、 undefined、””(空串) 都认为是 false

示例代码:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">

    /*在 JavaScript 语言中,所有的变量,都可以做为一个 boolean 类型的变量去使用。
    0 、null、 undefined、””(空串) 都认为是 false */

    // var a = 0;
    // if (a) {
    //    alert("零为真");
    // } else{
    //    alert("零为假");
    // }

   /*
  && 且运算。
  有两种情况:
  第一种:当表达式全为真的时候。返回最后一个表达式的值。
  第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值*/

   var a = "abc";
   var b = true;
   var c = null;
   var d = false;

   //alert(a && b); true
   //alert(b && a); abc
   //alert(a && d);false
   //alert( a && c); null
   //alert(a && d && c);false

  /*|| 或运算
  第一种情况:当表达式全为假时,返回最后一个表达式的值
  第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值*/

    //alert(d || c);null
    //alert(c || d);false;
    //alert(a || c);//abc
    //alert(b||c); //true

</script>
</head>
<body>
</body>
</html>

四、数组(重点)

JS 中 数组的定义:
格式:
var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素

示例代码:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">

    var arr =[];//定义一个空数组
    //alert(arr.length);//0

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

    //JavaScript语言中的属猪,只要我们通过数组下标赋值,那么最大的下标值,就会自动的给数组做扩容操作
    arr[2] = "abc";
    //alert(arr.length);//3

   // alert(a[1]);//undefined

    //数组的定义
    for (var i=0;i < arr.length;i++){
      alert(arr[i]);
    }


  </script>
</head>
<body>

</body>
</html>

五、函数(重点)

5.1 函数的二种方式

使用的格式如下:

function 函数名(形参列表){
函数体
}
在 JavaScript 语言中,如何定义带有返回值的函数?
只需要在函数体内直接使用 return 语句返回值即可!

示例代码:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //定义一个无参函数
    function fun(){
      alert("无参函数");
    }
    //函数调用才会被执行
    //fun();

    function fun2(a,b){
      alert("有参函数 a-->" + a + "b--->"+b);
    }
    //fun2(1,2);

    function fun3(num1,num2){
      var result =  num1 + num2;
      return result;
    }
    alert(fun3(100,200))

  </script>
</head>
<body>

</body>
</html>

5.2 函数的第二种定义方式

使用格式如下:
var 函数名 = function(形参列表) { 函数体}

示例代码:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    var fun = function (){
      alert("无参函数");
    }
    //fun();

    var fun2 = function (a,b) {
      alert("有参函数a-->"+ a +"b-->"+b);
    }
    //fun2(1,2)

    var fun3 = function (num1,num2){
        var result = num1 + num2;
        return result;
    }
    alert(fun3(50,41));

  </script>
</head>
<body>

</body>
</html>

原文地址:https://www.cnblogs.com/flypigggg/p/15041336.html