JavaScript详细教程

最新推荐文章于 2024-05-21 14:15:14 发布
最新推荐文章于 2024-05-21 14:15:14 发布
阅读量978 收藏 21
点赞数 37
分类专栏： 前端开发 文章标签： javascript 开发语言 ecmascript python 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2203_75327677/article/details/136967415
版权

文章目录

前言

JavaScript 是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D 动画、滚动播放的视频等等——JavaScript 就在其中。

一、代码位置

  • 在HTML文件中
    • head中
    • body中（常用，防止先执行该代码，不符合用户的体验）
  • 在static文件夹的js文件夹中，导入使用，放在body的最下部分
    请添加图片描述
<!-- 导入代码 -->
<body>
	<script src="static/js/my.js"></script>
</body>

二、注释

语言注释
HTML<!-- 注释内容 -->
CSS/* 注释内容 */
Javascript// 注释内容 or /* 注释内容 */

三、变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var name = "poker";
        console.log(name);   //打印变量
    </script>
</body>
</html>

请添加图片描述

1.字符串类型

  • 常用功能
//声明
var name = "helloworld";
var name = String("helloworld");
var name = "中国联通"

//长度
var v1 = name.length;

//下标操作
var v2 = name[0];

//去除空白
var v3 = name.trim();

//切片, 前闭后开
var v4 = name.substring(0,2);
  • 实例：跑马灯
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <div id="txt">欢迎中国联通领导poker莅临指导</div>

    <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中的定时器
        //每秒钟执行这个show函数
        setInterval(show, 1000);    //毫秒
    </script>
</body>
</html>

请添加图片描述

2.数组

  • 常用功能
//声明
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);

//下标操作
v1[1]
v1[0] = "poker"

//追加
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 index in v1){
	//data=v1[index]
	...
}

for(var i=0; i<v1.length; i++){
	...
}
  • 实例：动态数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title> 
</head>
<body>
    
    <ul id="city">
        <!-- <li>北京</li>
        <li>天津</li>
        <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>

请添加图片描述

3.对象（字典）

  • 常用功能
//声明
info = {
	"name":"poker",
	"age":18,
}

info = {
	name:"poker",
	age:18
}

//组成与修改
info.age;
info.name = "toker"

info["age"]
info["name"] = "toker";

//删除
delete info["age"]

//遍历
for(var key in info){
	//key值 data=info[key]
	...
}
  • 实例：动态表格
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">
            <tr>
                <!-- <td>1</td>
                <td>poker</td>
                <td>25</td> -->
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">

        var dataList = [
            { id: 1, name: "poker", age: 25 },
            { id: 1, name: "poker", age: 25 },
            { id: 1, name: "poker", age: 25 },
            { id: 1, name: "poker", age: 25 },
            { id: 1, name: "poker", age: 25 },
            { id: 1, name: "poker", age: 25 },
        ];

        for (var idx in dataList) {
            var info = dataList[idx];
            //1.创建 tr 标签
            var tr = document.createElement("tr");
            for (var key in info) {
                var text = info[key];
                //2.创建 td 标签
                var td = document.createElement("td");
                td.innerText = text;
                tr.appendChild(td);
            }
            //3. 追加数据
            var bodyTag = document.getElementById("body");
            bodyTag.appendChild(tr);
        }
    </script>
</body>
</html>

请添加图片描述

四、条件语句

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

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

五、函数

function func(){
	...
}

//执行
func()

六、DOM模板

  • DOM 是一个模块,模块可以对HTML页面中的标签进行操作
  • 常见功能
//根据 ID 获取标签
var tag = doucment.getElementById("xx");

//根据 ID 创建标签
var tag = document.createElement("xx");

//获取标签中的文本
tag.innerText

//修改标签中的文本
tag.innerText = "hhhhhhh";
  • 事件绑定
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <input type="text" placeholder="请输入内容" id="content">
    <input type="button" value="点击添加" onclick="addCityInfo()">

    <ul id="city">
    </ul>

    <script type="text/javascript">
        function addCityInfo() {
            //1.找到标签
            var userContent = document.getElementById("content");
            //2.获取input中用户输入的内容
            var newString = userContent.value;
            //判断用户输入是否为空
            if (newString.length > 0) {
                //3.创建 li 标签,传入用户输入的内容
                var newTag = document.createElement("li");
                newTag.innerText = newString;
                //4.标签添加到 ul 中
                var parentTag = document.getElementById("city");
                parentTag.appendChild(newTag);
                //5.将 input text 内容清空
                userContent.value = "";
            }else{
                alert("输入不能为空!")
            }
        }
    </script>
</body>
</html>

请添加图片描述

  • 还有很多的DOM操作没有介绍,我们后面会使用JQuery来实现DOM的功能,所以这里的内容了解即可
Calebbbbb
关注
  • 37
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端】JavaScript详细教程（二）
孤寒者的博客
11-19 3万+
❤️JavaScript必备知识详解❤️第一部分：JS操作符（1）JS操作符的分类：（2）JS操作符的注意点：第二部分：流程控制第三部分：循环第四部分：字符串方法第五部分：数组方法第六部分：补充点常用方法：        ???? ????????直接跳到末尾???????? ——>领取专属粉丝福利????        ☝️  ????上两篇博文保姆级教程HTML两万字笔记大总结【建议收藏】（上篇）和保姆级教程HTML两万字笔记大总结【建议收藏】（下篇）被众多小伙伴们阅读之后，很多小伙伴私信我—
【前端】JavaScript详细教程（三）
孤寒者的博客
12-04 5万+
爬虫必备前端知识之JavaScript第三弹~
javaScript详细教程
07-15
次压缩包包含javaScript教程、javaScript+DOM编程艺术、Ajax基础教程3部分文档。文档有实例说明哦！！
javaScript详细教程pdf
01-02
JavaScript详细教程，适合初学者观看学习，作为入门指导
JavaScript详细教程PPT
06-08
JavaScript详细教程PPT，老师的好帮手
JavaScript语言详细教程和案例
02-17
JavaScript语言详细教程通常会涵盖以下核心主题，并辅以大量实践案例
JavaScript 教程 （详细 全面）
热门推荐
梁辰兴的博客
10-31 6万+
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。HTML 用来定义网页的内容，例如标题、正文、图像等；CSS 用来控制网页的外观，例如颜色、字体、背景等；JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。JavaScript 诞生于 1995 年，几乎是和互联网同时出现；
JavaScript 教程
weixin_58431406的博客
02-17 1126
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备
JavaScript详细教程归纳
weixin_41719737的博客
03-27 604
JavaScript 教程 JavaScript 简介 JavaScript 用法 JavaScript 输出 JavaScript 语法 JavaScript 语句 JavaScript 注释 JavaScript 变量 JavaScript 数据类型 JavaScript 对象 JavaScript 函数 JavaScript 作用域 JavaScript 事件 Ja...
【前端】JavaScript详细教程（一）
孤寒者的博客
11-12 3万+
❤️JavaScript必备知识详解❤️第一部分：初识JavaScript（1）JS写在哪？（2）JS一些注意点：（3）JS获取和修改元素的方法：第二部分：简单事件拓展：监听事件：第三部分：修改样式（1）JS修改样式（2）JS操作标签属性第四部分：数据类型        ???? ????????直接跳到末尾???????? ——>领取专属粉丝福利????        ☝️  ????上两篇博文保姆级教程HTML两万字笔记大总结【建议收藏】（上篇）和保姆级教程HTML两万字笔记大总结【建议收藏】
javascript怎么开启详细教程
weixin_45892228的博客
10-23 1万+
。5、找到“
现代 JavaScript 教程
allway2的博客
01-19 3083
https://zh.javascript.info/https://zh.javascript.info/ 现代 JavaScript 教程 以最新的 JavaScript 标准为基准。通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。 搜索 最后修改在 18日 一月 2022 购买EPUB/PDF 分享: 5854 ★githubWeChat 和 QQ 目录 课程的核心内容包含 2 部分，涵盖了 JavaScript 编程语言相关知识和浏览器行为。此
JavaScript 高级教程
apollo_miracle的博客
12-27 1743
JavaScript 简介 JavaScript 历史 本节为您讲解 JavaScript 和客户端脚本的起源。 JavaScript 实现 完整的 JavaScript 实现是由以下 3 个不同部分组成的：ECMAScript、文档对象模型、浏览器对象模型。 ECMAScript 基础 ECMAScript 语法 Java 和 ECMAScript 有一些关键的语法特性相同，也有一...
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 117
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 197
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 758
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
Vue3详细讲解
贫僧法号依平
05-15 855
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
javascript教程doc
01-30
它提供了关于JavaScript语言的基本知识、概念、语法和用法的详细说明和解释。JavaScript教程通常包含以下内容： 1. JavaScript简介：介绍JavaScript的背景、用途和发展历程，帮助学习者对JavaScript有一个基本的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值