JavaScript 的学习

news2024/12/23 13:09:17

文章目录

  • 一、简介
  • 总结


一、简介

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

  • JavaScript 是脚本语言
    JavaScript 是一种轻量级的编程语言。

    JavaScript 是可插入 HTML 页面的编程代码。

    JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

  • JavaScript:直接写入 HTML 输出流


document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

在这里插入图片描述 您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。

  • JavaScript:对事件的反应

<button type="button" onclick="alert('欢迎!')">点我!</button>

alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。
onclick 事件只是您即将在本教程中学到的众多事件之一。
在这里插入图片描述

  • JavaScript:改变 HTML 内容
    使用 JavaScript 来处理 HTML 内容是非常强大的功能。
x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

您会经常看到 document.getElementById(“some id”)。这个方法是 HTML DOM 中定义的。
DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。
在这里插入图片描述

  • JavaScript:改变 HTML 图像
    本例会动态地改变 HTML 的来源(src):

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img decoding="async" loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

在这里插入图片描述
以上实例中代码 element.src.match(“bulbon”) 的作用意思是:检索 里面 src 属性的值有没有包含 bulbon 这个字符串,如果存在字符串 bulbon,图片 src 更新为 bulboff.gif,若匹配不到 bulbon 字符串,src 则更新为 bulbon.gif
JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片。
在这里插入图片描述

  • JavaScript:改变 HTML 样式
    改变 HTML 元素的样式,属于改变 HTML 属性的变种。
x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式

在这里插入图片描述

  • JavaScript:验证输入
    JavaScript 常用于验证用户的输入。

if isNaN(x) {
    alert("不是数字");
}

isNaN() 函数用于检查其参数是否是非数字值。

如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。

以上实例只是普通的验证,如果要在生产环境中使用,需要严格判断,如果输入的空格,或者连续空格 isNaN 是判别不出来的。可以添加正则来判断


if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
    alert("不是数字");
}

总结来自“https://www.runoob.com/js/js-intro.html”

总结

我们常常不去想,自己拥有的东西,却对得不到的东西念念不忘。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/424984.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如果要向“硅谷精神之父”提一道问题,你会问什么?| CSDN 访谈世界互联网教父 Kevin Kelly

ChatGPT 的问世不禁让人遐想&#xff0c;接下来的 5000 天&#xff0c;将会发生什么事&#xff1f; 硅谷精神之父、世界互联网教父、《失控》作者凯文凯利&#xff08;Kevin Kelly&#xff0c;以下简称 K.K.&#xff09;是这样预测的&#xff1a; 未来将会是一切都与 AI 相连的…

Vue3通知提醒框(Notification)

Vue3相关组件项目依赖版本信息 可自定义设置以下属性&#xff1a; 消息的标题&#xff08;title&#xff09;&#xff0c;默认温馨提示自动关闭的延时时长&#xff08;duration&#xff09;&#xff0c;单位ms&#xff0c;默认4500ms消息从顶部弹出时&#xff0c;距离顶部的位…

【问题】开发遇到的小问题

文章目录使用糊涂工具&#xff0c;将时间字符串转化为LocalDateTime类型Date类型转换LocalDate类型jdk8 LocalDateTime获取当前时间和前后推时间echarts图中显示表格是需要添加宽高前端往后端传值时&#xff0c;需要转一下对象再往后端传使用 value-format"yyyy-MM-dd HH:…

jwt授权

JWT格式 由header、payload、signature三部分组成&#xff0c;中间用圆点(.)连接: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJpYW0uYXBpLm1hcm1vdGVkdS5jb20iLCJleHAiOjE2NDI4NTY2MzcsImlkZW50aXR5IjoiYWRtaW4iLCJpc3MiOiJpYW0tYXBpc2VydmVyIiwib3JpZ19pYXQiOjE2MzUw…

拼团系统开发|全民拼购商业模式解读

拼团系统开发|拼团模式在市场上已经屡见不鲜&#xff0c;某夕夕就是这方面的典范。不过现在市场上又出现一种升级版的拼团商业模式&#xff0c;也就是全民拼购&#xff0c;它除了可以帮助商家提升销量&#xff0c;还有引流裂变获客的效果&#xff0c;因此受到了许多企业商家的热…

chatgpt教你练习前端算法

今天想试试chatgpt关于代码算法这一块儿是否好用。 判断质数 上面的代码有一点小问题&#xff0c;当num为2时&#xff0c;返回的结果是错误的&#xff0c;我改进了一下&#xff0c;并优化了一点性能 // 判断是否是素数&#xff08;质数&#xff09; function isprime(number)…

【Linux】用LCD文字祝愿(Framebuffer+Freetype)

目录 前言 一、LCD操作原理 &#xff08;1&#xff09;LCD和Framebuffer。 &#xff08;2&#xff09;LCD的操作&#xff1a; &#xff08;3&#xff09;核心函数&#xff08;后续也会经常用到&#xff09; ①open函数 ②ioctl函数 ③mmap函数 二、字符的点阵显示 &a…

4K高清修复,模糊视频4k修复是怎么实现的?

在当今数字时代&#xff0c;高分辨率视频已成为大众观影的标配。4K分辨率作为其中高端的选项&#xff0c;提供了比传统1080p高出四倍的细节和清晰度&#xff0c;使得观众们能够更加身临其境地享受影视作品。然而&#xff0c;有时候我们可能会遇到4K视频质量不佳的问题&#xff…

Chapter3-用适合的方式发送和接收消息

3.1 不同类型的消费者 消费者可分为两种类型。 一个是DefaultMQPushConsumer &#xff0c;由系统控制读取操作&#xff0c;收到消息后自动调用传人的处理方法来处理&#xff1b;另 一个是 DefaultMlConsumer &#xff0c;读取操作中的大部分功能由使用者自主控制 。 3.1.1 Def…

uni-app:登录与支付--用户信息

用户信息 实现用户头像昵称区域的基本布局 在 my-userinfo 组件中&#xff0c;定义如下的 UI 结构&#xff1a; <template><view class"my-userinfo-container"><!-- 头像昵称区域 --><view class"top-box"><image src"…

如何通过小程序容器技术实现App的灰度发布

在当今移动应用市场竞争激烈的环境下&#xff0c;如何更快地发布新版本、更精确地测试和调整、更好地了解用户需求和行为&#xff0c;成为了每个App开发者面临的重要挑战。在这个背景下&#xff0c;灰度发布和小程序容器技术成为了越来越受欢迎的解决方案。 灰度发布是指将新版…

【Linux高性能服务器编程】I/O复用的高级应用

文章目录一、基于 select 的非阻塞 connect二、基于 poll 的聊天室程序2.1 客户端2.2 服务器三、基于 epoll 实现同时处理 TCP 和 UDP 服务一、基于 select 的非阻塞 connect connect系统调用的 man 手册中有如下一段内容&#xff1a; EINPROGERESS The socket is nonblocking…

ChatGPT既然这么火,有没有弊端呢?

介绍 在现代社会中&#xff0c;人们越来越依赖技术来解决问题。聊天机器人是一种最新的技术趋势&#xff0c;这种技术可以为人们带来很多便利。而ChatGPT聊天机器人则是其中的一种&#xff0c;它使用了大型的语言模型GPT&#xff08;Generative Pre-trained Transformer&#…

实操干货丨ChatGPT+XMind,效率爆炸,天下无敌

日常办公中&#xff0c;常用工具我们最熟悉的莫过于office铁三角&#xff1a;Word/Excel/PPT&#xff0c;除了这哥仨&#xff0c;再让你推荐一个。 XMind&#xff0c;绝对位列其中。 今天给大家分享一个 ChatGPTXMind的绝佳玩法&#xff0c;不需要下载安装任何额外的工具。 …

【MySQL | 基础篇】05、MySQL 事务详解

目录 一、事务简介 二、事务操作 2.1 未控制事务 2.2 控制事务一 2.3 控制事务二 三、事务四大特性 四、并发事务问题 五、事务隔离级别 六、并发事务演示 6.1 脏读演示 6.2 不可重复读演示 6.3 幻读演示 一、事务简介 事务是一组操作的集合&#xff0c;它是一个不…

【云原生】Kubernetes 中容器跨主机网络是怎么样的?

文章目录前言什么是 FlannelFlannel 的后端实现有哪些UDPVXLANHost-gw基于 Flannel UDP 模式的实现跨主通信UDP 模式案例实现基于 Flannel VXLAN 模式的跨主通信VXLAN 模式案例实现总结前言 在云原生领域&#xff0c;Kubernetes 已经成为了最主流的容器管理工具。Kubernetes 支…

JMM内存模型详解

1、概要 JMM全称叫Java Memory Model&#xff08;Java内存模型&#xff09;&#xff0c;什么是JMM&#xff0c;为什么要设置JMM&#xff0c;要弄清楚这个&#xff0c;咱们要先从计算机硬件存储体系说起。 2、计算机硬件存储体系 Window任务管理器Mac资源管理器window和mac是两…

Flink 优化 (二) --------- 状态及 Checkpoint 调优

目录一、RocksDB 大状态调优1. 开启 State 访问性能监控2. 开启增量检查点和本地恢复3. 调整预定义选项4. 增大 block 缓存5. 增大 write buffer 和 level 阈值大小6. 增大 write buffer 数量7. 增大后台线程数和 write buffer 合并数8. 开启分区索引功能9. 参数设定案例二、Ch…

拐点!智能座舱破局2023

“这是我们看到的整个座舱域控渗透率&#xff0c;2022年是8.28%&#xff0c;主力的搭载车型仍然是30-35万区间。”3月29日&#xff0c;2023年度&#xff08;第五届&#xff09;高工智能汽车市场峰会上&#xff0c;高工智能汽车研究院首发《2022-2025年中国智能汽车产业链市场数…

WRF中替换LAI数据

WRF中替换LAI数据 本次下载的LAI数据是GLASS中的AVHRR(1981-2018)(V50)&#xff0c;可以从这个这里获取数据GLASS_AVHRR_LAI数据集。由于我需要做一个时间序列的模拟&#xff0c;总共下载了从1990-2018年灌溉季3-9月份对应的天数为73&#xff0c;105&#xff0c;137&#xff0…