WEB01_Day04(中)-JavaScript概述、JS语法、JS控制页面元素内容

时间:2021-08-15
本文章向大家介绍WEB01_Day04(中)-JavaScript概述、JS语法、JS控制页面元素内容，主要包括WEB01_Day04(中)-JavaScript概述、JS语法、JS控制页面元素内容使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

一、JavaScript概述

1.1 定义

　　JavaScript简称(JS)，当前它是一个脚本语言，负责给前端页面添加动态效果。

1.2 特征

  • 弱类型语言，声明变量不需要指定对应的数据类型

  • 脚本语言，不需要像Java代码一样编译，通过浏览器进行解析执行

  • 交互性强，可以单独理解成它是一个语言，可以嵌套在html中进行使用

  • 面向对象编程的语言，和Java中的面向对象编程思想相似

  • 安全性高，JavaScript语言只能访问浏览器内部的数据，而外部的数据，像磁盘中的数据内容无法访问

1.3 JS使用

  • 内联：可以在标签的事件中添加js代码逻辑，当事件触发的时候进行执行js的代码逻辑

例如：<input type="button" value="普通按钮" onclick="alert('内联引入')">

  • 内部：在html页面中添加<script></script>，在标签内部进行书写相关逻辑的js代码

 <script type="text/javascript">
     alert('内部引入');
 </script>

  • 外部：单独新建js文件，在js文件中进行书写相关逻辑的js代码，然后在html页面中通过script的src属性进行引用外部js的文件路径位置

1.4 案例测试

js01.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>js引入使用案例</title>
 ​
 </head>
 <body>
     <!-- JS内联方式引入 -->
     <input type="button" value="普通按钮" onclick="alert('内联引入js')">
 ​
     <!-- JS内部方式引入  刷新浏览器以后执行当前逻辑-->
     <script type="text/javascript">
         alert("内部引入js");
     </script>
     
     <!-- JS外部方式引入 -->
     <script type="text/javascript" src="test01.js"></script>
 </body>
 </html>

test01.js

 // 单行注释
 /*
  * 多行注释
  */
 alert("外部引入js");

二、JS语法

2.1 变量

  • var x=10;

  • var d=3.14;

  • x=”今天是星期六”;

  • var p = new Person();

  • var b = true/false; 

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>变量</title>
 </head>
 <body>
     <script type="text/javascript">
         var x = 10;
         var d = 3.14;
         console.log(x);
         console.log(d);
         // js是弱类型语言，可以进行自动识别类型
         x = "今天是星期六，七夕我和大家一起度过";
         console.log(x);
     </script>
 </body>
 </html>

2.2 数据类型

  • JavaScript 不分基本数据类型和引用数据类型，统称对象类型。

  • 数值:number相当于java中所有数值类型的总和

  • 字符串:string 可以用单引号或双引号修饰

  • 布尔值: boolean true/false

  • 未定义: undefined 当变量只声明不赋值类型为undefined

undefined与null是划等号的，比较的结果为true

  • 自定义对象类型: Hero Airplane Bullet Person Son object

  • typeof (变量) 获取变量的类型 typeof(66 + 6) number类型

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>数据类型案例</title>
 </head>
 <body>
     <script type="text/javascript">
         var a = 99;
         var b = 3.14;
         var c = "JavaScript";
         var d = 'JavaScript';
         // 该变量只声明，没有进行初始化，是未定义类型
         var e;
         //创建日期对象
         var date = new Date();
 ​
         console.log(typeof(a));
         console.log(typeof(b));
         console.log(typeof(c));
         console.log(typeof(d));
         console.log(typeof(e));
         console.log(typeof(date));
         console.log(date);
         console.log('判断未定义变量e和null是否相等：' + (e == null));
 ​
     </script>
 </body>
 </html>

测试结果：

number number string string undefined object Sat Aug 14 2021 21:03:31 GMT+0800 (中国标准时间) 判断未定义变量e和null是否相等：true

2.3 运算符

  • 算术运算符:+-*/%

    • 除法运算: 会自动根据结果转换整数还是小数

    • Java: int x = 5; int y=2 x/y=2

    • JS: var x=5; var y=2 x/y=2.5;

  • 关系运算符:> < >= <= != == ===

    • = =：先统一两个变量的类型再比较值是否相等 “666”==666 true

    • = = =：先比较类型是否相等相等之后再比较值是否相等 “666”===666 false

  • 逻辑运算符:&& || !

  • 赋值运算符:= += -= *= /= %= ++ --

  • 三目运算符:?:

2.4 流程控制语句

分支：

  • 使用 if 来规定要执行的代码块，如果指定条件为 true

  • 使用 else 来规定要执行的代码块，如果相同的条件为 false

  • 使用 else if 来规定要测试的新条件，如果第一个条件为 false

  • 使用 switch 来规定多个被执行的备选代码块

循环：

  • for - 多次遍历代码块

  • for/in - 遍历对象属性

  • while - 当指定条件为 true 时循环一段代码块

  • do/while - 当指定条件为 true 时循环一段代码块

2.5 方法

  • 常用的四种方法:

  1. 无参无返回值 2. 无参有返回值 3. 有参无返回值 4. 有参有返回值

  • 三种声明方法的方式:

    function 方法名(参数列表){方法体}

    var 方法名 = function(参数列表){方法体}

    var 方法名 = new Function(“参数1”，“参数2”，“方法体”);

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>方法案例</title>
 </head>
 <body>
     <input type="button" value="调用fn1方法" onclick="fn1()">
     <input type="button" value="调用fn5方法" onclick="fn3(6,8)">
     <script type="text/javascript">
         var width = 100;
         var height = 35;
         console.log('方式一的方法定义');
         /* 
          * 无参无返回值方法
          * 方法定义完以后，需要调用才可以执行方法中的逻辑
          */
         function fn1 () {
             console.log("无参无返回值方法计算的面积值为：" + (width * height));
         }
         //调用无参无返回值fn1方法
         //fn1();
         console.log('-------------------------------------------------------------')
         
         /*
          * 无参有返回值方法
          */
         function fn2 () {
             var s = width * height;
             return s;
         }
         //调用无参有返回值fn2方法
         console.log(fn2());
         console.log('-------------------------------------------------------------')
 ​
         /*
          * 有参无返回值方法
          * 参数不需要指定类型(弱类型语言)
          */
         function fn3 (w , h) {
             console.log(w * h);
         }
         //调用有参无返回值方法
         fn3(width,height);
 ​
         console.log('-------------------------------------------------------------')
         /*
          * 有参有返回值方法
          */
         function fn4 (w , h) {
             return w * h;
         }
         console.log(fn4(width,height));
         console.log('-------------------------------------------------------------')
 ​
         console.log('方式二的方法定义');
         var fn5 = function(w , h) {
             return w * h;
         }
         console.log(fn5(width,height));
 ​
         console.log('方式三的方法定义');
         var fn6 = new Function("w" , "h" ,"return w * h");
         console.log(fn6(width,height));
 ​
     </script>
 </body>
 </html>

三、JS控制页面元素内容

3.1 获得页面元素

  • 通过id获取页面中的元素对象

    var d = document.getElementById(“id”);

  • 给div设置文本

    d.innerText=”abc”;

  • 给文本框设置文本

    i.value=”abc”;

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>获取页面元素案例</title>
 </head>
 <body>
     <div id="div1">男同胞们加油脱单啊！！！</div>
     <input type="text" id="txt" value="今天是星期六">
     <input type="button" value="赋值按钮" onclick="fn1()">
 ​
     <script type="text/javascript">
         // 获取div元素，通过js所提供的方式进行获取
         var d1 = document.getElementById("div1");
         console.log(d1.innerText);
         d1.innerText = "女同胞们要给男同胞们机会脱单！！！";
 ​
         // 获取input元素，通过js所提供的方式进行获取
         var inp = document.getElementById("txt");
         console.log(inp.value);
         inp.value = "明天是星期日";
 ​
         /*
         根据用户在输入框中输入的内容，
         进行更改div显示的文本内容
         */
         function fn1 () {
             // var d1 = document.getElementById("div1");
             // var inp = document.getElementById("txt");
             /*
             谷歌浏览器可以省略上面两行代码，
             通过标签元素的id调用innerText或者value
             */
             div1.innerText = txt.value;
             
         }
 ​
     </script>
 </body>
 </html>

3.2 练习

  • 计算平方数

  • 计算器

  • 猜数字

 

原文地址：https://www.cnblogs.com/XiaoCui-blog/p/15144876.html

随机文章
Javascript知识点必读
最近更新