devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaScript_在js中获取提交的数据

作者：菜鸟追梦旅行 | 2024-06-07 15:19:33

赞

踩

在js中获取提交的数据

JavaScript

今日目标

  • 掌握 JavaScript 的基础语法
  • 掌握 JavaScript 的常用对象（Array、String）
  • 能根据需求灵活运用定时器及通过 js 代码进行页面跳转
  • 能通过DOM 对象对标签进行常规操作
  • 掌握常用的事件
  • 能独立完成表单校验案例

1，JavaScript简介

JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。

JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？如改变页面内容、修改指定元素的属性值、对表单进行校验等，下面是这些功能的效果展示：

  • 改变页面内容

    image-20210814173417834

    当我点击上面左图的 点击我 按钮，按钮上面的文本就改为上面右图内容，这就是js 改变页面内容的功能。

  • 修改指定元素的属性值

    image-20210814173719505

    当我们点击上图的 开灯 按钮，效果就是上面右图效果；当我点击 关灯 按钮，效果就是上面左图效果。其他这个功能中有两张灯泡的图片（使用img标签进行展示），通过修改 img 标签的 src 属性值改变展示的图片来实现。

  • 对表单进行校验

    image-20210814174242688

    在上面左图的输入框输入用户名，如果输入的用户名是不满足规则的就展示右图(上) 的效果；如果输入的用户名是满足规则的就展示右图(下) 的效果。

JavaScript 和 Java 是完全不同的语言，不论是概念还是设计，只是名字比较像而已。但是基础语法类似，所以我们有java的学习经验，再学习JavaScript 语言就相对比较容易些。

JavaScript（简称：JS） 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。ECMA 规定了一套标准 就叫 ECMAScript ，所有的客户端校验语言必须遵守这个标准，当然 JavaScript 也遵守了这个标准。ECMAScript 6 (简称ES6) 是最新的 JavaScript 版本（发布于 2015 年)，我们的课程就是基于最新的 ES6 进行讲解。

2，JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：

  • 内部脚本：将 JS代码定义在HTML页面中
  • 外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

2.1 内部脚本

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间

代码如下：

alert(数据) 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来。

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

<script>
    alert("hello js1");
</script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

效果如下：

image-20210814181419691

从结果可以看到 js 代码已经执行了。

提示：

  • 在 HTML 文档中可以在任意地方，放置任意数量的

2.2 外部脚本

第一步：定义外部 js 文件。如定义名为 demo.js的文件

项目结构如下：

image-20210814182345236

demo.js 文件内容如下：

alert("hello js");

  • 1

第二步：在页面中引入外部的js文件

在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

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

<script src="../js/demo.js"></script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

注意：

  • 外部脚本不能包含 <script> 标签

    在js文件中直接写 js 代码即可，不要在 js文件 中写 script 标签

  • <script> 标签不能自闭合

    在页面中引入外部js文件时，不能写成 <script src="../js/demo.js" />。

3，JavaScript基础语法

3.1 书写语法

  • 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

  • 每行结尾的分号可有可无

    如果一行上写多个语句时，必须加分号用来区分多个语句。

  • 注释

    • 单行注释：// 注释内容
    • 多行注释：/* 注释内容 */

    注意：JavaScript 没有文档注释

  • 大括号表示代码块

    下面语句大家肯定能看懂，和 java 一样 大括号表示代码块。

    if (count == 3) {
      
   alert(count); 
} 

    • 1
    • 2
    • 3
    • 4

3.2 输出语句

js 可以通过以下方式进行内容的输出，只不过不同的语句输出到的位置不同

  • 使用 window.alert() 写入警告框

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
<script>
    window.alert("hello js");//写入警告框
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    上面代码通过浏览器打开，我们可以看到如下图弹框效果

    image-20210814181419691

  • 使用 document.write() 写入 HTML 输出

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
<script>
    document.write("hello js 2~");//写入html页面
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    上面代码通过浏览器打开，我们可以在页面上看到 document.write(内容) 输出的内容

    image-20210814190302845

  • 使用 console.log() 写入浏览器控制台

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

<script>
    console.log("hello js 3");//写入浏览器的控制台
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    上面代码通过浏览器打开，我们可以在不能页面上看到 console.log(内容) 输出的内容，它是输出在控制台了，而怎么在控制台查看输出的内容呢？在浏览器界面按 F12 就可以看到下图的控制台

    image-20210814190906202

3.3 变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。格式 var 变量名 = 数据值;。而在JavaScript 是一门弱类型语言，变量可以存放不同类型的值；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数

var test = 20;
test = "张三";

  • 1
  • 2

var类型变量：

  • 作用域：全局变量

    {
     
    var age = 20;
}
alert(age);  // 在代码块中定义的age 变量，在代码块外边还可以使用

    • 1
    • 2
    • 3
    • 4
    • 5

  • 变量可以重复定义

    {
     
    var age = 20;
    var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
}
alert(age); //打印的结果是 30

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

let类型变量：

针对如上的问题，ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。

例如：

{
   
    let age = 20;
    let age = 30;
}
alert(age); 

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

3.4 数据类型

JavaScript 中提供了两类数据类型：原始类型 和 引用类型。

使用 typeof 运算符可以获取数据类型

alert(typeof age); 以弹框的形式将 age 变量的数据类型输出

原始数据类型：

  • number：数字（整数、小数、NaN(Not a Number)）

    var age = 20;
var price = 99.8;

alert(typeof age); // 结果是 ： number
alert(typeof price);// 结果是 ： number

    • 1
    • 2
    • 3
    • 4
    • 5

    注意： NaN是一个特殊的number类型的值，后面用到再说

  • string：字符、字符串，单双引皆可

    var ch = 'a';
var name = '张三'; 
var addr = "北京";

alert(typeof ch); //结果是  string
alert(typeof name); //结果是  string
alert(typeof addr); //结果是  string

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    ==注意：==在 js 中 双引号和单引号都表示字符串类型的数据

  • boolean：布尔。true，false

    var flag = true;
var flag2 = false;

alert(typeof flag); //结果是 boolean
alert(typeof flag2); //结果是 boolean

    • 1
    • 2
    • 3
    • 4
    • 5

  • null：对象为空

    var obj = null;

alert(typeof obj);//结果是 object

    • 1
    • 2
    • 3

    为什么打印上面的 obj 变量的数据类型，结果是object；这个官方给出了解释，下面是从官方文档截的图

    image-20210815173003408

  • undefined：当声明的变量未初始化时，该变量的默认值是 undefined

    var a ;
alert(typeof a); //结果是 undefined

    • 1
    • 2

3.5 运算符

JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的，不同的是 JS 关系运算符中的 == 和 ===，一会我们只演示这两个的区别，其他运算符将不做演示

  • 一元运算符：++，–

  • 算术运算符：+，-，*，/，%

  • 赋值运算符：=，+=，-=…

  • 关系运算符：>，<，>=，<=，!=，==，===…

  • 逻辑运算符：&&，||，!

  • 三元运算符：条件表达式 ? true_value : false_value

3.5.1 ==和===区别

概述:

  • ==：

    1. 判断类型是否一样，如果不一样，则进行类型转换

    2. 再去比较其值

  • ===：js 中的全等于

    1. 判断类型是否一样，如果不一样，直接返回false
    2. 再去比较其值

代码：

var age1 = 20;
var age2 = "20";

alert(age1 == age2);// true
alert(age1 === age2);// false

  • 1
  • 2
  • 3
  • 4
  • 5
3.5.2 类型转换

上述讲解 == 运算符时，发现会进行类型转换，所以接下来我们来详细的讲解一下 JavaScript 中的类型转换。

  • 其他类型转为number

    • string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN

      将 string 转换为 number 有两种方式：

      • 使用 + 正号运算符：

        var str = +"20";
alert(str + 1) //21

        • 1
        • 2

      • 使用 parseInt() 函数(方法)：

        var str = "20";
alert(parseInt(str) + 1);

        • 1
        • 2

      建议使用 parseInt() 函数进行转换。

    • boolean 转换为 number 类型：true 转为1，false转为0

      var flag = +false;
alert(flag); // 0

      • 1
      • 2

  • 其他类型转为boolean

    • number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
    • string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
    • null类型转换为 boolean 类型是 false
    • undefined 转换为 boolean 类型是 false

    代码如下：

    // var flag = 3;
// var flag = "";
var flag = undefined;

if(flag){
     
    alert("转为true");
}else {
     
    alert("转为false");
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

使用场景：

在 Java 中使用字符串前，一般都会先判断字符串不是null，并且不是空字符才会做其他的一些操作，JavaScript也有类型的操作，代码如下：

var str = "abc";

//健壮性判断
if(str != null && str.length > 0){
   
    alert("转为true");
}else {
   
    alert("转为false");
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

但是由于 JavaScript 会自动进行类型转换，所以上述的判断可以进行简化，代码如下：

var str = "abc";

//健壮性判断
if(str){
   
    alert("转为true");
}else {
   
    alert("转为false");
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

3.6 流程控制语句

JavaScript 中提供了和 Java 一样的流程控制语句，如下

  • if
  • switch
  • for
  • while
  • dowhile
3.6.1 if 语句
var count = 3;
if (count == 3) {
   
    alert(count);
}

  • 1
  • 2
  • 3
  • 4
  • 5
3.6.2 switch 语句
var num = 3;
switch (num) {
   
    case 1:
        alert("星期一");
        break;
    case 2:
        alert("星期二");
        break;
    case 3:
        alert("星期三");
        break;
    case 4:
        alert("星期四");
        break;
    case 5:
        alert("星期五");
        break;
    case 6:
        alert("星期六");
        break;
    case 7:
        alert("星期日");
        break;
    default:
        alert("输入的星期有误");
        break;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
3.6.3 for 循环语句
var sum = 0;
for (let i = 1; i <= 100; i++) {
    //建议for循环小括号中定义的变量使用let
    sum += i;
}
alert(sum);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
3.6.4 while 循环语句
var sum = 0;
var i = 1;
while (i <= 100) {
   
    sum += i;
    i++;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/685904
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号