5.JavaScript

已于 2022-05-08 18:51:06 修改
阅读量438 收藏
点赞数
分类专栏： 前端基础 文章标签： javascript 前端 html
于 2022-05-08 18:45:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41891186/article/details/124652263
版权

概要：

  • JavaScript，是一门编程语言。浏览器就是JavaScript语言的解释器。

  • DOM和BOM

    相当于编程语言内置的模块。
例如：Python中的re、random、time、json模块等。

  • jQuery

    相当于是编程语言的第三方模块。
例如：requests、openpyxl

注意：知识点回顾。

5. JavaScript

JavaScript是一门编程语言。

JavaScript的意义是什么？

让程序实现一些动态的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            width: 200px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: gold;
            padding: 20px 10px;
        }
    </style>
</head>
<body>
    <div class="menus">
        <div class="header" onclick="myFunc()">大标题</div>
        <div class="item">内容</div>
    </div>

    <script type="text/javascript">
        function myFunc() {
            //alert("你好呀");
            confirm("是否要继续？")
        }
    </script>
</body>
</html>

前端三大组件：

  • HTML，裸体。
  • CSS，好看的衣服。
  • JavaScript，动态。

5.1 代码位置

在这里插入图片描述
JS代码的存在形式：

  • 当前HTML中。

    <script type="text/javascript">
	// 编写JavaScript代码
</script>

  • 在其他js文件中，导入使用。

在这里插入图片描述

5.2 注释

  • HTML的注释

    <!-- 注释内容 -->

  • CSS的注释，style代码块

    /* 注释内容 */

  • JavaScript的注释，script代码块

    // 注释内容

/* 注释内容 */

5.3 变量

  • Python，编程语言。

    name = "高倩"
print(name)

  • JavaScript，编程语言。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var name = "高倩";
        
        console.log(name);
    </script>
</body>
</html>

5.4 字符串类型

// 声明
var name = "高倩";
var name = String("高倩");

// 常见功能
var name = "中国联通";

var v1 = name.length; 
var v2 = name[0];   // name.charAt(3)
var v3 = name.trim();
var v4 = name.substring(0,2); // 前取后不取
案例：跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<span id="txt">欢迎中国联通领导高倩莅临指导</span>

<script type="text/javascript">
    function show() {
        // 1.去HTML中找到某个标签并获取他的内容（DOM）
        var tag = document.getElementById("txt");
        var dataString = tag.innerText;

        // 2.动态起来，把文本中的第一个字符放在字符串的最后面。
        var firstChar = dataString[0];
        var otherString = dataString.substring(1, dataString.length);
        var newText = otherString + firstChar;

        // 3.在HTML标签中更新内容
        tag.innerText = newText;
    }

    // JavaScript中的定时器，如：每1s执行一次show函数。
    setInterval(show, 1000);
</script>
</body>
</html>

5.5 数组

// 定义
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);

// 操作

var v1 = [11,22,33,44];

v1[1]
v1[0] = "高倩";

v1.push("联通");        // 尾部追加 [11,22,33,44,"联通"]
v1.unshift("联通");     // 尾部追加 ["联通", 11,22,33,44]
v1.splice(索引位置,0,元素);
v1.splice(1,0,"中国");  // 尾部追加 [11,"中国",22,33,44]

v1.pop()     //尾部删除
v1.shift()   //头部删除
v1.splice(索引位置,1)
v1.splice(2,1);  // 索引为2的元素删除 [11,22,44];

var v1 = [11,22,33,44];
for(var idx in v1){
    // idx=0/1/2/3/    data=v1[idx]
}

var v1 = [11,22,33,44];
for(var i=0; i<v1.length; i++){
    // i=0/1/2/3   data=v1[idx]
}

注意：break和continue

案例：动态数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="city">
        <!-- <li>北京</li> -->
    </ul>

    <script type="text/javascript">

        // 发送网络请求，获取数据
        var cityList = ["北京","上海","深圳"];
        for(var idx in cityList){
            var text = cityList[idx];

            // 创建 <li></li>
            var tag = document.createElement("li");
            // 在li标签中写入内容
            tag.innerText = text;

            // 添加到id=city那个标签的里面。DOM
            var parentTag = document.getElementById("city");
            parentTag.appendChild(tag);
        }
    </script>
</body>
</html>

5.6 对象（字典）

info = {
    "name":"高倩",
    "age":18
}

info = {
    name:"高倩",
    age:18
}

info.age
info.name = "郭智"

info["age"]
info["name"] = "郭智"

delete info["age"]

info = {
    name:"高倩",
    age:18
}

for(var key in info){
    // key=name/age      data=info[key]
}
案例：动态表格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="body">

    </tbody>
</table>

<script type="text/javascript">
    var info = {id: 1, name: "郭智", age: 19};

    var tr = document.createElement("tr");
    for (var key in info) {
        var text = info[key];
        var td = document.createElement('td');
        td.innerText = text;
        tr.appendChild(td);
    }
    var bodyTag = document.getElementById("body");
    bodyTag.appendChild(tr);

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="body">

    </tbody>
</table>

<script type="text/javascript">

    // 网络请求获取，写入到页面上。
    var dataList = [
        {id: 1, name: "郭智1", age: 19},
        {id: 2, name: "郭智2", age: 19},
        {id: 3, name: "郭智3", age: 19},
        {id: 4, name: "郭智4", age: 19},
        {id: 5, name: "郭智5", age: 19},
    ];
    for (var idx in dataList) {
        var info = dataList[idx];

        var tr = document.createElement("tr");
        for (var key in info) {
            var text = info[key];
            var td = document.createElement('td');
            td.innerText = text;
            tr.appendChild(td);
        }

        var bodyTag = document.getElementById("body");
        bodyTag.appendChild(tr);
    }

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

5.7 条件语句

if ( 条件 )  {
    
}else{
    
}

if (1==1){
    
}else{
    
}

if ( 条件 ){
    
}else if ( 条件 ){
    
}else if ( 条件 ){
    
}else{
    
}

5.8 函数

def func():
    函数的内容...
    
func()

function func(){
    ...
}
    
func()
Automatic_tester
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
5.JavaScript基础语法.zip
01-29
5.JavaScript基础语法.zip
md5.js javascript
04-30
md5.jsmd5.jsmd5.jsmd5.jsmd5.jsmd5.jsmd5.jsmd5.jsmd5.js
The Dangers of JavaScript’s Automatic Semicolon Insertion
weixin_34038293的博客
10-05 86
Although JavaScript is very powerful, the language’s fundamentals do not have a very steep learning curve. Prior to the explosion of web applications, JavaScript was thought of as a toy language for ...
5.JavaScript合法的标识符的命名规则和关键字
guqigongzi的博客
02-27 2937
第一个字符必须是字母、下划线、美元符号 标识符不能和JavaScript中用于其他目的的关键字同名 关键字 abstract arguments boolean break byte case catch char class* const continue debugger default delete do ...
Web全栈~09.JavaScript入门
qq_41424688的博客
01-13 9325
Web基本笔记~09.JavaScript入门 上一期        JavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。 JavaScript简介        JavaScript是诞生于1995年,很多没接触过JavaScript的人可能会认为这个语言一定和Java有关系,然而事实并不是这样。 &nb
JavaScript学习--splice()函数详解
热门推荐
xian的博客
09-07 16万+
splice()函数详解 splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 注释：该方法会改变原始数组。 参数： index —— 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 howmany —— 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 item1, …, itemX —— 可选。向数组添加的新项目。 返回值 Array —— 包含被删除项目的新数组，如果有的话。 一、情况一 示例：pandas 是基于NumPy 的
JavaScript基本语法
weixin_62859027的博客
04-27 2914
JavaScript基本语法一·JavaScript简介1.JavaScript发展历史2.JavaScript的组成3.JavaScript的添加方式4.JavaScript的输出方式二·JavaScript基本语法1 .语法规范2.变量变量的声明3.数据类型4.运算符算数运算符赋值运算符字符串运算符比较运算符逻辑运算与类型运算位运算符5.语句选择语句循环语句跳转语句6.数组7.对象8.函数9.预编译三.总结 一·JavaScript简介 1.JavaScript发展历史 JavaScript是一种可嵌入
javascript测试题
Purple_night_的博客
02-11 2698
javascript
JavaScript实现简单计算器
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
1.javascript 自动定时刷新网页脚本
终回首的博客
08-31 2万+
一、问题 跑一些spark任务时要运行很久，每次想看最新进度都要手动刷新一下，手按F5按多了很累，就想为什么不搞个自动刷新脚本呢 二、解决 1.思路 输入时间间隔 如果时间间隔大于0那么每次时间超过输入的时间间隔后，执行reload 2.实现 var timeout = prompt("设置刷新时间间隔[S]"); var current = location.href; if(timeout > 0) { setTimeout('reloa
javascript中的typeof返回值类型
青山不改，绿水长流。
09-24 5998
比如：typeof(eval)，typeof(Date)返回的值都是function。一、对于数字类型的操作数而言， typeof 返回的值是 number。比如typeof(window)，typeof(document)，typeof(null)返回的值都是object。三、对于布尔类型， typeof 返回的值是 boolean。上面是举的常规数字，对于非常规的数字类型而言，其结果返回的也是number。JavaScript中代表的是特殊非数字值，虽然它本身是一个数字类型。
JavaScript if...else 语句
zsx0728的博客
04-09 3297
文章目录JavaScript if 语句示例 1：if 语句 在本教程中，您将了解 if…else 语句，并借助示例创建决策程序。 在计算机编程中，可能会出现您必须在多个备选方案中运行一段代码的情况。例如，根据学生获得的分数分配等级A、B或C。 在这种情况下，您可以使用 JavaScript if…else 语句创建一个可以做出决策的程序。 在 JavaScript 中，if…else 语句有三种形式。 if 语句 if…else 语句 if…else if…else 语句 JavaScript if
javascript-md5.js
04-25
js纯算法实现md5
Apress.JavaScript.Frameworks.for.Modern.Web.Development.2nd.Edition.pdf
11-02
This book will serve as an introduction to both new and well established libraries and frameworks, such as Angular, VueJS, React, Grunt, Yeoman, RequireJS, Browserify, Knockout, Kraken, Async.js, ...
Beginning.JavaScript.5th.Edition
03-04
Beginning JavaScript, 5th Edition shows you how to work effectively with JavaScript frameworks, functions, and modern browsers, and teaches more effective coding practices using HTML5. This new ...
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1384
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
最新发布
浩星
06-18 176
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 515
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
盲盒App开发时有哪些技术框架可以借鉴
bytekj的博客
06-14 593
在开发盲盒App时，可以根据项目需求和团队技术栈选择合适的技术框架。前端可以选择微信小程序框架、React Native或Vue.js等；后端可以选择Node.js或Spring Boot等；数据库可以选择MySQL或MongoDB等。同时，还需要考虑缓存、消息队列、支付和物流接口等其他技术来完善应用的功能和性能。
1.Document对象除了拥有大量的方法和属性之外，还拥有大量的 它可以用来控制HTML文档中的图片、超链接、表单元素等控件。 2.通过 、 、 、 、 、 等属性获取子节点。。 3.Document对象的_ 属性可以返回整个HTML文档中的所有HTML元素 4.JavaScript 通过 指定延迟时间，延迟执行某程序。 5.JavaScript中若已知元素的name属性，通过 可以获得一组元素。 6. JavaScript中，如果已知HTML页面中的某元素对象的id="username", 用 方法获得该元素对象。 7. 终止定时器的方法是 。 8. nodeType属性可用于获取节点类型，如果返回值为1.则表明该节点是 。 9. 在HTML DOM树中， 是最顶层节点对象。
06-02
1. Document对象除了拥有大量的方法和属性之外，还拥有大量的DOM属性。它可以用来控制HTML文档中的图片、超链接、表单元素等控件。 2. 通过childNodes、firstChild、lastChild、nextSibling、previousSibling等属性获取子节点。 3. Document对象的documentElement属性可以返回整个HTML文档中的所有HTML元素。 4. JavaScript 通过setTimeout指定延迟时间，延迟执行某程序。 5. JavaScript中若已知元素的name属性，通过getElementsByName可以获得一组元素。 6. JavaScript中，如果已知HTML页面中的某元素对象的id="username", 用getElementById方法获得该元素对象。 7. 终止定时器的方法是clearTimeout。 8. nodeType属性可用于获取节点类型，如果返回值为1，则表明该节点是元素节点。 9. 在HTML DOM树中，document对象是最顶层节点对象。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Automatic_tester

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值