【JS基础】JavaScript语言简介及简单例子_js语言-程序员宅基地

技术标签: JavaScript  html  # 筑基05:语言基础  

1 JS简介

  1. JavaScript 是 web 开发者必学的三种语言之一:
    1. HTML 定义网页的内容;
    2. CSS 规定网页的布局;
    3. JavaScript 对网页行为进行编程。
  2. 标签
    在 HTML 中,JavaScript 代码必须位于 <script> 与 </script> 标签之间。
  3. JavaScript 函数和事件
    JavaScript 函数是一种 JavaScript 代码块,它可以在调用时被执行。例如,当发生事件时调用函数,比如当用户点击按钮时。
  4. JS脚本位置
    JS脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中,或兼而有之。甚至可以放置在文本外部。

2 功能演示:修改标签内容

  1. 可以在网站https://www.w3school.com.cn/tiy/t.asp?f=eg_js_use_body中验证以下代码。
  2. 第5行定义了一个标签,id属性为demo。
  3. 第6行定义了一个按钮,当点击是触发函数myFunction。
  4. 第8~11行定义了一段JS脚本,是一个函数,当函数触发时,修改id为demo的标签内容。
<!DOCTYPE html>
<html>
<body>
<h2>Body 中的 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>

<script>
function myFunction() {
    
    document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</body>
</html>

3 引用外部JS脚本

  1. 可以在网站https://www.w3school.com.cn/tiy/t.asp?f=eg_js_use_external中验证以下代码。
  2. 在代码第8行,引入了外部文件,该文件中已经对myFunction进行定义,其余内容与上一例子类似。
  3. 在外部文件中放置脚本有如下优势:
    1. 分离了 HTML 和代码;
    2. 使 HTML 和 JavaScript 更易于阅读和维护;
    3. 已缓存的 JavaScript 文件可加速页面加载。
<!DOCTYPE html>
<html>
<body>
<h2>外部 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<p>(myFunction 存储在名为 "myScript.js" 的外部文件中。)</p>
<script src="/demo/myScript.js"></script>
</body>
</html>

4 总结

  1. 了解JS语言与html、css的分工合作。
  2. 简单了解JS语言的使用例子。

参考文献

  1. JavaScript 教程》W3school对JS的文本教程。
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Fighting_hawk/article/details/123637127

智能推荐

Log4j2异步日志Disruptor及lookups远程执行漏洞详解_lmax disruptor 异步生成log4j2 文件 日志没有生成-程序员宅基地

文章浏览阅读2.7k次。Log4j2异步日志核心流程和涉及的组件_lmax disruptor 异步生成log4j2 文件 日志没有生成

vue加载数据量过多页面卡顿问题(不看会后悔)_商品列表用户上拉加载更多数据时,加载数据太多造成页面卡顿怎么处理-程序员宅基地

文章浏览阅读6.6k次。插件分享:https://xuliangzhan_admin.gitee.io/vxe-table/#/table/scroll/scroll_商品列表用户上拉加载更多数据时,加载数据太多造成页面卡顿怎么处理

STM32CubeMX | | 使用小熊派玩转颜色识别传感器(纯手工打造E53传感器模块)-程序员宅基地

文章浏览阅读1.6k次。关注、星标嵌入式云IOT技术圈,精彩及时送达我买来做颜色识别传感器的模块是TCS34725,如下图所示(相关资料和本文demo请滑到文末通过clone我的码云仓库链接获取):我买的是如上图..._ir和uv光谱分量效应

《OpenFOAM用户指南》阅读总结(一)_openfoam fvsolution-程序员宅基地

文章浏览阅读2.2k次。本文总结了《OpenFOAM用户指南》中的一些知识点,主要对应该文档中的第二章。FoamFile {}为字典文件。在system文件夹下的fvScheme文件中指定有限体积法的离散格式。在system文件夹下的fvSolution文件中指定方程组矩阵求解器、残差以及其它算法控制。fvSolution里面的PISO子字典中的pRefCell以及pRefValue用于封闭的不可压体系中,即压力是相对的。Paraview中,用户应该在Properties中点击Refresh Time_openfoam fvsolution

ubuntu双系统时间同步_解决Ubuntu19.10和windows双系统时间同步问题方法-程序员宅基地

文章浏览阅读224次。当安装Ubuntu19.10和windows双系统,我们会发现时间是不同步的。Windows的时间比Ubuntu的晚了8个小时,Ubuntu使用的是(UST),Windows使用的是(CST)。要解决该问题就要对这两个时间进行同步即可。Windows操作系统直接把CMOS时间认定为当前显示时间,不根据时区转换。这样每调整一次系统时区,系统会根据调整的时区来计算当前时间,确定后,也就同时修改了CMO..._ubuntu windows双系统时间

Anonymous 匿名_anonymousquery: 0-程序员宅基地

文章浏览阅读1k次。linq 之后select 出来的对象是匿名类型的 错误 1 无法将类型“System.Collections.Generic.Dictionary”隐式转换为“System.Collections.Generic.Dictionary”_anonymousquery: 0

随便推点

记录我的Windows编程(三)GDI+贴张图片_wwinmain gdiplus-程序员宅基地

文章浏览阅读843次。上次我用GDI成功贴图,但是比较可惜的是只能用Bitblt贴bmp图像,这种bmp的图像有很多缺点,比如比较大,不能透明等等。现在我们可以用GDI+来解决这个问题,比起BMP图像,我更喜欢png这种格式的图像,这种压缩的图像内存小,无损压缩,而且有透明度。想使用GDI+,就要先引入GDI+。以下是GDI+绘图的核心内容:#------------------------------_wwinmain gdiplus

H265网页视频播放器播放H265编码录像视频文件如何减缓卡顿情况?_如何在web端同时播放多个h.265视频-程序员宅基地

文章浏览阅读2.4k次。视频播放延时卡顿的问题从视频服务诞生以来就一直存在,即便是在技术发达的今天,延时卡顿问题仍然是不能完全解决的(不同视频流延时说明)。TSINGSEE青犀视频研发团队开发的H265播放器播放录像文件时,偶尔也会出现卡顿情况。分析问题播放器是通过地址获取数据,然后解码再编码给浏览器渲染,排查发现再编码后的数据片段缓存较少,有时会导致录像不流畅。调试发现数据片段缓存稍大些,播放就相对流畅很多。原始缓存:调大缓存:解决问题找到H265播放器项目中DecodeWorker.js 并_如何在web端同时播放多个h.265视频

Gateway+Swagger2配置聚合文档_gateway swagger2-程序员宅基地

文章浏览阅读1.7k次。Spring Cloud Gateway网关模块聚合各微服务的Swagger接口文档效果如下图:相关pom依赖 <!-- 网关路由代理 (仅网关)--> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-gateway</arti_gateway swagger2

GP的使用心得-程序员宅基地

文章浏览阅读342次。在ArcEngine时,GP无疑是GIS开发者的神器。自ArcEngine9.2开始新增一个程序集ESRI.ArcGIS.Geoprocessor,它能调用包含扩展模块在内的所有Geoprocessing工具。关于GP的使用问题,做如下总结:1.许可问题大家都知道,AE二次开发有两种许可定义方式:一是直接拖放License控件,右键设置其属性,另一种方式是使用IAoInitialize接口...

UTF-8编码的原理-程序员宅基地

文章浏览阅读6.7k次,点赞7次,收藏38次。UTF8编码的来由和工作原理_utf-8

ChartDirector 5.0 for python 笔记【4】Multi-Depth Pie Chart_pychartdir anglepie使用-程序员宅基地

文章浏览阅读741次。这篇是关于多深度饼图的。先看源代码:#-*-encoding:utf-8 -*-from pychartdir import *setLicenseCode("SXZVFNRN9MZ9L8LGA0E2B1BB");#这个是注册,防止有logo产生#数据data = [72, 18, 15, 12]#标签labels = ["Labor", "Machinery", "Fa_pychartdir anglepie使用