04 JavaScript

JavaScript 介绍

特点：

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释 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>

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

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

    function fun(){
      alert("无参函数")
    }

    function fun(a,b){
      alert("有参函数"+ a+b);
    }

    function fun(){
      alert("无参函数fun（）")
    }
    fun(1,2);

  </script>
</head>
<body>

</body>
</html>

六、JS 中的自定义对象（扩展内容）

示例代码：

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

    //对象的定义
    //  var 变量名 = new Object();  //对象实例(空对象)
    //  变量名.属性= 值  //定义一个属性
    //  变量名.函数名  = function(){};  //定义一个函数

    var obj = new Object();
    obj.name = "Tom";
    obj.age =18;
    obj.fun = function (){
      alert(this.name + this.age);
    }


    //对象的访问
    //变量名.属性 / 函数名()
    //alert(obj.age);
    obj.fun()


  </script>
</head>
<body>

</body>
</html>

示例代码：

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

    //对象的定义
    //var 变量名 = {   //空对象
    //    变量名:值    //定义一个属性
    //    变量名:值    //定义一个属性
    //    函数名:functoin(){} //定义一个函数
    // };

    var obj = {
      name:"jason",
      age:12,
      fun:function (){
        alert(this.age + this.name);
      }
    };

    alert(obj.name);
    obj.fun();

  </script>
</head>
<body>

</body>
</html>

posted @ 2021-07-21 20:09 flypiggg 阅读(45) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）

公告

昵称： flypiggg
园龄： 4年
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

flypiggg

04 JavaScript

JavaScript 介绍

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

1.1 第一种方式

1.1 第二种方式

二、变量

三、关系(比较)运算

三、逻辑运算

四、数组(重点)

五、函数(重点)

5.1 函数的第一种方式

5.2 函数的第二种定义方式

六、JS 中的自定义对象（扩展内容）

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜