JavaScript快速入门---基础语法&事件&动态插入数据Demo

最新推荐文章于 2022-01-18 11:21:34 发布

北海怪兽Monster

最新推荐文章于 2022-01-18 11:21:34 发布

阅读量197

点赞数 1

分类专栏：前端文章标签： javascript 脚本语言

本文链接：https://blog.csdn.net/m0_48639280/article/details/106908889

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JavaScript 快速入门

JavaScript 介绍

JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析JavaScript 的引擎。
脚本语言：不需要编译，就可以被浏览器直接解析执行了。
核心功能就是增强用户和HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！

JavaScript历史

1995 年，NetScape (网景)公司，开发的一门客户端脚本语言：LiveScript。后来，请来SUN 公司的专家来进行修改，后命名为：JavaScript。
1996 年，微软抄袭 JavaScript 开发出 JScript 脚本语言。
1997 年，ECMA (欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，统一了所有客户端脚本语言的编码方式。

JavaScript在文件中的位置

JavaScript在文件中的位置主要分为两种：

在HTML文件中的script标签中
在独立的js文件中

JavaScript三个组成部分

ECMAScript : 同一的代码规范
DOM ：Document Object Module 文档对象模型
BOM ： Browser Object Module 浏览器对象模型

JavaScript基本语法

由于大部分和Java相似就快速挑重点了。

注释：

单行注释： // 注释内容

多行注释： /* 注释内容 */
输出语句：

输入框 prompt(“提示内容”);

弹出警告框 alert(“提示内容”);

控制台输出 console.log(“显示内容”);

页面内容输出 document.write(“显示内容”);
常量和变量

JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型。

定义局部变量： let 变量名 = 值;

定义全局变量：变量名 = 值;

定义常量： const 常量名 = 值;

就像你有一个空杯子，你装可乐，果汁都随便你，反正我(变量/常量)都可以装。

基本数据类型

数据类型	说明
boolean	布尔类型，true或false
null	声明null值得特殊关键字
undefined	变量声明了但是未定义
number	整数或者浮点数
string	字符串
bigint	大整数，例如：let num = 10n;

typeof方法：用于判断变量的数据类型

let age = 18; document.write(typeof(age));   // number

运算符

算数运算符

运算符说明
+ 加法运算
- 减法运算
* 乘法运算
/ 除法运算
% 取余数
++ 自增
– 自减
赋值运算符

运算符说明
= 将等号右边的值赋值给等号左边的变量
+= 相加后赋值
-= 相减后赋值
*= 相乘后赋值
/= 相除后赋值
%= 取余数后赋值
比较运算符

运算符说明
== 判断值是否相等,不在乎类型，‘10’ == 10 为true
=== 判断数据类型和值是否相等，严格判断
>
>=
<
<=
!=
逻辑运算符

运算符说明
&& 逻辑与，并且
|| 逻辑或，或者
！取反
三元运算符

三元运算符格式 (比较表达式) ? 表达式1 : 表达式2;

执行流程

如果比较表达式为true，则取表达式1

如果比较表达式为false，则取表达式2
流程控制和循环语句
- if语句
- switch语句
- for循环
- while循环
数组

数组的使用和 java 中的数组基本一致，但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制。

定义格式： let 数组名 = [元素1,元素2,…];

数组长度：数组名.length

数组高级运算符 … 数组复制合并数组字符串转数组
函数

函数类似于java 中的方法，可以将一些代码进行抽取，达到复用的效果。

定义格式 function 方法名(参数列表) {

方法体;

return 返回值;

}

可变参数

function 方法名(…参数名) {

方法体;

return 返回值;

}

匿名函数

function(参数列表) {

方法体;

}

运算符	说明
+	加法运算
-	减法运算
*	乘法运算
/	除法运算
%	取余数
++	自增
–	自减

运算符	说明
=	将等号右边的值赋值给等号左边的变量
+=	相加后赋值
-=	相减后赋值
*=	相乘后赋值
/=	相除后赋值
%=	取余数后赋值

运算符	说明
==	判断值是否相等,不在乎类型，‘10’ == 10 为true
===	判断数据类型和值是否相等，严格判断
>
>=
<
<=
!=

运算符	说明
&&	逻辑与，并且
\|\|	逻辑或，或者
！	取反

DOM介绍

DOM(Document Object Model)：文档对象模型。

将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。

获取元素-------------------------------------------
在这里插入图片描述
元素的增删改-------------------------------------------

元素的属性操作-------------------------------------------
在这里插入图片描述

在这里插入图片描述

JavaScript事件的介绍

事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。

在这里插入图片描述

事件的绑定

方式一通过标签中的事件属性进行绑定。
方式二通过 DOM 元素属性绑定。 document.getElementById(“btn”).οnclick= 执行的功能

综合小案例：

需求：点击添加按钮，将输入框的内容添加到下方列表中。

进行非空判断

添加完成之后清空输入框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,
        th {
            text-align: center;
            border: 1px solid;
        }

        div {
            text-align: center;
            margin: 50px;
        }
    </style>

</head>

<body>

    <div>
        <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
        <input type="text" id="age" placeholder="请输入年龄" autocomplete="off">
        <input type="text" id="gender" placeholder="请输入性别" autocomplete="off">
        <input type="button" value="添加" id="add">
    </div>

    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick=myDel(this)>删除</a></td>
        </tr>

        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick=myDel(this)>删除</a></td>
        </tr>

    </table>

</body>
<script>
    //需求：在输入框中输入数据之后，点击添加，将数据添加到下面的表格中

    // 为按钮注册点击事件
    document.getElementById("add").onclick = function () {
        //获取三个输入框的值
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        let gender = document.getElementById("gender").value;
        //console.log(name+"------"+age+"-------"+gender);   测试获取值是否正常

        //如果输入内容有任意一项为空，就不进行操作
        if (name != '' && age != '' && gender != '') {
            //创建tr 和td对象
            let myTr = document.createElement("tr");
            let td1 = document.createElement("td");
            let td2 = document.createElement("td");
            let td3 = document.createElement("td");
            let td4 = document.createElement("td");

            //将td装入tr中 并且将获取的内容装进去
            myTr.appendChild(td1);
            myTr.appendChild(td2);
            myTr.appendChild(td3);
            myTr.appendChild(td4);

            td1.innerText = name;
            td2.innerText = age;
            td3.innerText = gender;
            td4.innerHTML = "<a href='JavaScript:void(0);' οnclick=myDel(this)>删除</a>";

            //将tr装入 页面中
            document.getElementsByTagName("table")[0].appendChild(myTr);

            //添加完成之后，清除输入框的内容
            document.getElementById("name").value = "";
            document.getElementById("age").value = "";
            document.getElementById("gender").value = "";
        }else{
            alert("请输入完整的内容");
        }
    }

    //将删除的方法抽取成函数,传入要删除的对象
    function myDel(str) {
        //根据表结构，我们要删除的是当前的tr，删除事件是注册在tr的子元素a标签上，传入this 是a标签
        let myTab = str.parentElement.parentElement.parentElement;
        let mytr = str.parentElement.parentElement;
        myTab.removeChild(mytr);
    }
</script>
</html>

北海怪兽Monster

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript快速入门---基础语法&事件&动态插入数据Demo

JavaScript 快速入门JavaScript 介绍JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析JavaScript 的引擎。脚本语言：不需要编译，就可以被浏览器直接解析执行了。核心功能就是增强用户和HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！JavaScript历史1995 年，NetScape (网景)公司，开发的一门客户端脚本语言：LiveScript。后来，请来SUN 公司的专家来进行修改，后命名为：Jav
复制链接

扫一扫