09_js

最新推荐文章于 2024-08-12 09:24:46 发布
最新推荐文章于 2024-08-12 09:24:46 发布
阅读量769 收藏 14
点赞数 18
分类专栏： JavaWeb 文章标签： javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43357398/article/details/136336410
版权

文章目录

JS

概念：

  • JavaScript 是一种轻量级的编程语言
    • 轻量级: js
    • 重量级: Java, C++, C#
  • JavaScript 是可插入 HTML 页面的编程代码
  • JavaScript是一种弱类型语言
    • 比如Java就是强类型，所有变量定义都需要明确的类型定义
  • 主要用来向HTML页面添加交互行为

HTML、CSS、JS的关系：

  • HTML主要负责页面的搭建
    • 比如页面上文字的展示，图片，输入框等元素
  • CSS主要负责页面的美化
    • 比如文字的大小调整，图片大小，各种样式
  • JS主要负责页面的交互
    • 比如点击一个按钮后弹框等

在HTML中引入JS的方式

方式一：内部引入

  • 在html页面中， 用一个script标签包裹，直接写js代码
  • 可以在head标签内部，也可以在body内部，也可以在body后
  • 一般是在body标签的结尾前

eg：

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

<div>
    这是div
</div>

<!--可以在页面的任意地方去写script标签
    一般放在body结束的前面
-->

<script>
    alert("123")
</script>

</body>
</html>

方式二：外部引入

  • 创建js文件，在html页面上引入js文件

  • 在head标签内部，添加script标签

eg：

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

    <script src="./js_test.js"></script>
</head>
<body>

</body>
</html>

js的变量

变量声明

JavaScript在声明时统一使用无类型（untyped）的"var"关键字

  • var来声明一个变量，这是一个固定的写法，是js的语法
  • JavaScript并没有避开数据类型，它的数据类型是根据所赋值的类型来确定的
  • JavaScript 变量区分大小写

eg：

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

<script>
    // 直接使用var来定义变量
    var num = 123;

    /* 语法比较松散*/
    // 可以对定义好的变量进行重新赋值
    num = "helloworld"

    alert(num)
</script>

</body>
</html>

命名规范：保持跟Java一致

变量类型

  • String
  • Number
  • Boolean
  • 数组
    • var cars=["hello", "hi", "nihao"];
  • 对象
    • var person={firstname:"Bill", lastname:"Gates", id:5566};

不要使用变量类型，了解即可

JS中的方法

js中方法的定义：

function 方法名(){

// 方法体

}

eg：

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

<!-- onclick = js方法名()-->
<button onclick="deleteNum()">按钮</button>

<button onclick="deleteNum1(111)">按钮</button>

<!-- 要注意html里面的元素，怎么和js联动-->

<script>
    function deleteNum(){
        alert(123);
    }

    /*可以传递参数，参数不用var去接，直接写变量名即可*/
    function deleteNum1(num){
        alert(num);
    }
</script>

</body>
</html>

运算符

算数运算符

+, -, *, /, %, ++, --

=, +=, -=, *=, /=, %=

与Java之间的差异：
对待减法，如果是字符串 - 数字，会首先尝试将字符串转换为数字，然后计算。如果转化失败，会返回NaN。

eg：

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

<script>
    var str = "15";
    var num = 5;

    // 字符串和普通数字做加法，其实是做了一个拼接
    console.log(str + num);

    // 首先把str尝试转成数字
    // 如果没转成功，则会返回一个NaN
    // 任何数字和NaN计算都是NaN
    console.log(str - num);

    var str = "str";
    console.log(str - num);
</script>

</body>
</html>

在这里插入图片描述

逻辑运算符

 > , <, >=, <=, ? : 三元

&& , ||, !

==, ===, !=, !==

注：

  • == : 只判断值是否相等
  • === : 不仅仅判断值, 还要判断类型
  • != : 只判断值是否不相等
  • !== : 不仅仅判断值, 还要判断类型

逻辑分支语句

if

  • 在js中很多东西都可以充当if-else的条件
  • 但是有些东西默认表现为假: 0, 空字符串, null, NaN, false, undefined

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

for

一般我们使用普通的fori循环用来遍历数组, 一般我们使用foreach循环遍历对象

eg：

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


<script>
    var object = {name: "Jack", age: 25, address: "China"};

    for(var obj in object){
        console.log(obj + " ---- " + object[obj]);
    }

    var array = [1, 2, "hello", false];
    for (let i = 0; i < array.length; i++) {
        console.log(array[i]);
    }
</script>

</body>
</html>

核心对象/类型

Number

  • toString() 以字符串返回数值

  • toFixed() 返回字符串值，它包含了指定位数小数的数字(四舍五入)

  • toPrecision() 返回字符串值，它包含了指定长度的数字

  • parseInt() 允许空格。只返回首个数字

eg：

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

<script>
  var num = 12345678;

  var smallNum = 3.1415;

  console.log(num.toString()); // 12345678

  console.log(smallNum.toFixed(3)); // 3.142

  console.log(smallNum.toPrecision(3)); // 3.14

  console.log(parseInt(1234)); // 1234
</script>

</body>
</html>

String

  • length ：属性返回字符串的长度

  • indexOf() ：返回字符串中指定文本首次出现的索引（位置）

    • 不存在返回-1

    • // 头一个China返回的下标
str.indexOf("China");

// 从28开始，找往后的China的下标
str.indexOf("China", 28);

  • slice() ：提取字符串的某个部分并在新字符串中返回被提取的部分

  • split() ：将字符串转换为数组

Array

  • toString() 返回数组转换的数组值（逗号分隔）的字符串。
  • pop() 方法从数组中删除最后一个元素，返回删除的元素
  • push() 方法（在数组结尾处）向数组添加一个新的元素，返回数组长度
  • splice()
    • 删除指定位置开始的指定个元素。fruits.splice(2, 2);
    • 方法可用于向数组添加新项, 返回([])。fruits.splice(2, 0, "Lemon", "Kiwi");
  • sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组
  • reverse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组

eg：

// toString() 返回数组转换的数组值（逗号分隔）的字符串。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.toString()); //Banana,Orange,Apple,Mango

// pop() 方法从数组中删除最后一个元素,返回删除的元素
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）
var x = fruits.pop();      // x 的值是 "Mango"

// push() 方法（在数组结尾处）向数组添加一个新的元素,返回数组长度
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

// splice() 方法可用于向数组添加新项, 返回([])
  
fruits.splice(2, 0, "Lemon", "Kiwi");
// 第一个参数:添加新元素的起始位置。第二个参数:定义应删除多少元素。
// 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

// sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组
fruits.sort();            // 对 fruits 中的元素进行排序

// reverse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组
fruits.reverse();            // 对 fruits 中的元素进行排序

Math

  • Math.ceil(x)返回大于等于x的最小整数

  • Math.floor(x)返回小于等于x的最大整数

  • Math.random() 返回 0 ~ 1 之间的随机数

  • Math.round(x) 把一个数四舍五入为最接近的整数

  • Math.max(x,y,z,...,n) 返回最高值

  • Math.min(x,y,z,...,n) 返回最低值

DOM

文档对象模型（Document Object Model，简称DOM）

  • DOM的加载顺序： 指的就是浏览器获得了一份html代码之后, 从获得代码到显示的过程

  • 解析HTML结构(从上向下的过程)，一边解析， 一边构建dom树结点/节点

    • 加载外部脚本和样式表文件，异步加载外部的css和js文件
    • 解析并执行脚本代码

eg：
在这里插入图片描述

在DOM树中获取结点

  • getElementById()：根据id获取一个结点
  • getElementsByName()：根据name属性, 获取所有对应name结点的集合
  • getElementsByTagName()：根据标签名, 获取所有对应标签结点的集合

其中：

  • getElementById() 返回的是一个节点
  • getElementsByName(),getElementsByTagName() 返回的是一个集合

eg：

<div id="div1">
    div1
</div>

<div id="div2" name="div2222">
    div2
</div>


<script>
    // element是指定的id 的div块
    let element = document.getElementById("div1");
    console.log(element)

    // 获取的是一个集合。 获取了两个div块
    let elementsByTagName = document.getElementsByTagName("div");
    console.log(elementsByTagName[0])
    console.log(elementsByTagName[1])

    // 获取的是一个div集合，只有一个 是div2
    let elementsByName = document.getElementsByName("div2222");
    console.log(elementsByName)

</script>

在DOM树中添加结点

  • appendChild: 给某个结点添加一个孩子(孩子也应该是一个结点。注意类型 )
  • 比如：
    • 要添加一个li类型的节点，需要使用以下方式: document.createElement("li")
    • 要添加文本类型的节点： document.createTextNode("zs")

eg：

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

    <ul id = "ul_1">
        <li>water</li>
        <li>coke</li>
        <li>juice</li>
        <li>milk</li>
    </ul>

    <input id = "input_1">

    <button onclick="addElem()">添加元素</button>

</body>

<script>

    function addElem(){
        var inputNode = document.getElementById("input_1")
        var inputStr = inputNode.value


        var ulNode = document.getElementById("ul_1")

        // 创建一个文本结点
        var textNode = document.createTextNode(inputStr)

        // 创建一个li类型的结点对象
        // document.createElement创建一个指定类型的结点
        var liNode = document.createElement("li")

        liNode.appendChild(textNode)

        // appendChild 给某个结点添加孩子
        // 参数是一个孩子'结点'
        ulNode.appendChild(liNode)

        inputNode.value = ""
    }


</script>
</html>

在DOM树中删除结点

  • removeChild: 给某个结点删除其一个孩子(注意：参数是要删除的孩子 )

  • 注意输入的参数，是一个children类型的

eg：

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


    <ul id = "ul_1">
        <li>water</li>
        <li>coke</li>
        <li>juice</li>
        <li>milk</li>
    </ul>

    添加元素的名称：<input id = "input_1">

    <button onclick="addElem()">添加元素</button>

    <br>

    删除元素的下标：<input id="inputstr">

    <button onclick="deleteli()">删除元素</button>

</body>

<script>

    function addElem(){
        var inputNode = document.getElementById("input_1")
        var inputStr = inputNode.value


        var ulNode = document.getElementById("ul_1")

        // 创建一个文本结点
        var textNode = document.createTextNode(inputStr)

        // 创建一个li类型的结点对象
        // document.createElement创建一个指定类型的结点
        var liNode = document.createElement("li")

        liNode.appendChild(textNode)

        // appendChild 给某个结点添加孩子
        // 参数是一个孩子'结点'
        ulNode.appendChild(liNode)

        inputNode.value = ""
    }


    function deleteli(){
        var index = document.getElementById("inputstr").value
        var ulNode = document.getElementById("ul_1")

        // childNodes: 专门用来获得一个结点的所有孩子
        var childNodes = ulNode.childNodes;


        // removeChild: 给某个结点删除其一个孩子
        //  参数要删除的孩子
        ulNode.removeChild(childNodes[index])
    }


</script>
</html>

在DOM树中修改结点

  • replaceChild： 给某个结点替换孩子结点

  • 第一个参数: 新孩子；第二个参数: 旧孩子

eg：

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


    <ul id = "ul_1">
        <li>water</li>
        <li>coke</li>
        <li>juice</li>
        <li>milk</li>
    </ul>

    添加元素的名称：<input id = "input_1">

    <button onclick="addElem()">添加元素</button>

    <br>

    删除元素的下标：<input id="inputstr">

    <button onclick="deleteli()">删除元素</button>

    <br>

    修改元素的下标: <input id="inputtag">
    替换内容: <input id="inputstrNew">
    <button onclick="changeli()">替换</button>

</body>

<script>

    function addElem(){
        var inputNode = document.getElementById("input_1")
        var inputStr = inputNode.value


        var ulNode = document.getElementById("ul_1")

        // 创建一个文本结点
        var textNode = document.createTextNode(inputStr)

        // 创建一个li类型的结点对象
        // document.createElement创建一个指定类型的结点
        var liNode = document.createElement("li")

        liNode.appendChild(textNode)

        // appendChild 给某个结点添加孩子
        // 参数是一个孩子'结点'
        ulNode.appendChild(liNode)

        inputNode.value = ""
    }


    function deleteli(){
        var index = document.getElementById("inputstr").value
        var ulNode = document.getElementById("ul_1")

        // childNodes: 专门用来获得一个结点的所有孩子
        var childNodes = ulNode.childNodes;


        // removeChild: 给某个结点删除其一个孩子
        //  参数要删除的孩子
        ulNode.removeChild(childNodes[index])
    }

    function changeli() {
        var inputTag = document.getElementById("inputtag").value
        var inputStr = document.getElementById("inputstrNew").value

        var ulNode = document.getElementById("ul_1")

        var childNodes = ulNode.childNodes;

        var changeNode = childNodes[inputTag]

        // console.log(changeNode)

        // replaceChild: 给某个结点替换孩子结点
        // 第一个参数:  新孩子
        // 第二个参数:  旧孩子
        changeNode.replaceChild(document.createTextNode(inputStr), changeNode.childNodes[0])
    }



</script>
</html>

inner

  • innerText: 会按照text全部放入

  • innerHTML: 会按照html解析。比如一些标签等

coo1heisenberg
关注
  • 18
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
python转换js_python转换Javascript
weixin_39888180的博客
12-20 1871
PythonJS —— Python 转 JavaScript 代码PythonJS 详细介绍PythonJS 是一个用 Python 写的转换器，用来将 Python 代码转成快速的 JavaScript，可运行于 Node.js 平台上。PythonJS 的设计思路的快速和易于集成现有的 JavaScript 代码。使用方法：var pythonjs = ...文章青衫无名2017-06-02...
Vue-basic 09_监视属性
呵呵哒!的博客
07-06 74
Vue-basic 09_监视属性
【2021-09-17】JS逆向之某某查询网cookie(yjs_js_security_passport)
骑毛驴的猴的博客
09-17 2083
本文仅供参考，禁止用于非法活动 文章目录前言一、页面分析二、获取cookie三、调试 前言 目标网址:aHR0cHM6Ly8zZ21mdy5jbi9zby8lRTglQTUlQkYlRTclOTMlOUMv 描述:获取cookie – yjs_js_security_passport 一、页面分析 第一次不携带ck访问返回这些东西，里面有个yjs_js_challenge_token是后面要用到的，后面的js就是生成后续的参数了 然后看到这个检验的接口，传了上面的token 以及加密的一大串东西
javascript java 语法_JavaScript
weixin_36029647的博客
02-25 400
Day09_javaScript基础0.1学习目标1、能够掌握js基本语法2、能够掌握js的基本数据类型3、能够掌握js常用的对象0.2学习指南Js基本语法(重要)Js基本数据类型(重要)Js常用对象(重点)第一堂课本节知识点1、今日内容2、JavaScript_简介3、JavaScript_发展史4、JavaScript_语法_与html结合方式本节目标js的概述和发展史今日内容...
js更新mysql数据库_更新javascript方法
weixin_39980234的博客
01-27 871
JavaScript图书推荐JavaScript权威指南(第6版) David Flanagan经典权威的JavaScript工具书JavaScript高级程序设计Professional JavaScript for Web Developers Nichbolas C. Zakas全能前端人员必读之经典，...文章狗尾巴呢2013-03-09964浏览量在 Eclipse 中使用 JSHin...
js 获取当前gmt时间_javascript怎么获取当前时间？
weixin_30311179的博客
02-17 574
javascript怎么获取当前时间？下面本篇文章就来给大家介绍一下使用javascript获取当前时间的方法，希望对大家有所帮助。在JavaScript中可以使用Date对象中的Date()方法来获取当前时间。Date 对象用于处理日期和时间，Date()方法可返回当天的日期和时间。说明：Date 对象会自动把当前日期和时间保存为其初始值。语法：Date()示例1：输出今天的日期和时间docum...
js 修改backgroundimg_Javascript改变this.style.backgroundImage
weixin_35921127的博客
12-29 1402
给定以下代码,我将如何完成tileClick()以便从“tileBack.jpg”更改单击的图像,而是显示在shuffleDeck()中分配给该特定div的图像？我的意思是,tileClick()函数应该采用当前显示tileBack图像的图块,并在单击时显示该图块“反面”的图像.到目前为止,您可以看到我是如何尝试定位被点击的特定磁贴,但我不确定这一点.在这里正确使用.在该陈述的另一方面,我试图做一...
cocos_Js 向量转角度
ashmoc的博客
12-01 519
向量转角度
js 获取当前gmt时间_javascript-如何将日期转换为GMT？
weixin_39710295的博客
12-21 1119
尽管看起来很合逻辑，但是可以接受的答案是错误的，因为JavaScript日期不能那样工作。在此必须特别注意的是，JavaScript中的日期(即new Date()-0或x)的数值始终以毫秒为单位，以纪元为准，该纪元是无时区的量，基于宇宙历史中精确的精确时刻。 您不需要对new Date(x)返回的数值加或减任何东西，就可以将数值转换为时区，因为该数值没有时区。 如果确实具有时区，则JavaScr...
java代码挡板接球_js视频教程（对象）第5天09_挡板球小游戏上集.mp4
weixin_42512723的博客
02-26 137
本js视频教程详细课程目录如下：├─1.JS进阶视频教程-特效 3天课程│ ├─第1天│ │ JavaScript特效视频教学第1天01_早上考试向上滚动的间歇动画.mp4│ │ JavaScript特效视频教学第1天02_拼图轮播的原理.mp4│ │ JavaScript特效视频教学第1天03_拼图轮播的实现.mp4│ │ JavaScript特...
day09_JavaScript基础1
08-08
如今，JavaScript已经成为Web开发不可或缺的一部分，广泛应用于前端开发、服务器端(Node.js)、移动应用等领域。 在学习过程中，通过课堂提问、练习和习题答案来巩固知识是非常有效的。例如，可以提问“JavaScript的...
learnMEAN09_store
05-09
"learnMEAN09_store" 是一个学习 MEAN 堆栈（MongoDB、Express、AngularJS、Node.js）的应用程序示例，专注于构建电子商务商店。这个项目将帮助你理解如何利用这四个技术来创建一个功能完备的Web应用。在这个过程中...
node_js:＃09节点
03-08
节点JS终端应用程序 这些是没有前端的终端（CLI：命令行界面）应用程序，因此无法部署 名称/资料夹 HTML生成器 html_gen PDF生成器 pdf_generator 降价产生器 markdown_gen 团队投资组合生成器 OOP_html_gen ...
Homework_09_ALF
04-07
用法用户应在命令行中键入“ node index.js”，然后按Enter。 然后，用户应回答出现的每个查询，然后按Enter键以查看下一个查询。 最后，用户将选择他们想要应用于其项目的许可证。 当README Generator将用户的响应...
Hw09_ReadMeGenerator
02-13
git clone https://github.com/GabeSucich/Hw09_ReadMeGenerator.git 该存储库附带一个package.json，其中包含所有npm依赖项。 要下载这些文件，请导航到终端中克隆的git目录，然后输入： npm install 建于 应
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 465
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 618
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
Electron学习与总结
最新发布
song854601134的博客
08-12 121
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 315
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
js 09:00转时间戳
12-06
以下是将09:00转换为时间戳的JavaScript代码： ```javascript var timeStr = '09:00'; var dateStr = '1970-01-01 ' + timeStr + ':00'; var timestamp = new Date(dateStr).getTime() / 1000; console.log...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

coo1heisenberg

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

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

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

打赏作者

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

抵扣说明：

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

余额充值