网页前端学习第五次(HTML)二

简介: 网页前端学习第五次(HTML)

正文


<head> 中的 JavaScript 函数


在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
function myFunction(){
  document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>


<body> 中的 JavaScript 函数


在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用:


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script>
function myFunction(){
  document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>


外部的 JavaScript


也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>
</body>
</html>

你可以将脚本放置于 <head> 或者 <body>中,放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致。


myScript.js 文件代码如下:

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}


JavaScript 语法


JavaScript 是一个程序语言。语法规则定义了语言结构。


JavaScript 语法


JavaScript 是一个脚本语言。

它是一个轻量级,但功能强大的编程语言。


JavaScript 字面量


在编程语言中,一般固定值称为字面量,如 3.14。

数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 123e5;
</script>
</body>
</html>


字符串(String)字面量 可以使用单引号或双引号:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>
</body>
</html>

表达式字面量 用于计算:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>
</body>
</html>


数组(Array)字面量 定义一个数组:

[40, 100, 1, 5, 25, 10]


对象(Object)字面量 定义一个对象:

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}


函数(Function)字面量 定义一个函数:

function myFunction(a, b) { return a * b;}


JavaScript 变量


在编程语言中,变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p id="demo"></p>
<script>
var length;
length = 6;
document.getElementById("demo").innerHTML = length;
</script>
</body>
</html>


注:

变量是一个名称。字面量是一个


JavaScript 操作符


JavaScript使用 算术运算符 来计算值:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>
</body>
</html>


JavaScript使用赋值运算符给变量赋值:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p id="demo"></p>
<script>
var x, y, z;
x = 5;
y = 6;
z = (x + y) * 10;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>


JavaScript 语句


在 HTML 中,JavaScript 语句向浏览器发出的命令。

语句是用分号分隔:

1. x = 5 + 6;
2. y = x * 10;

 

1be473bb6d1e5a98e77f55ffad3e0b39_watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5oOz56eD5aS055qE5a2m55Sf,size_20,color_FFFFFF,t_70,g_se,x_16.png


JavaScript 注释


不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略:

// 我不会执行


JavaScript 数据类型


JavaScript 有多种数据类型:数字,字符串,数组,对象等等:

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值


数据类型的概念


编程语言中,数据类型是一个非常重要的内容。

为了可以操作变量,了解数据类型的概念非常重要。

如果没有使用数据类型,将无法执行。


JavaScript 函数


JavaScript 语句可以写在函数内,函数可以重复引用:

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}


JavaScript 字母大小写


JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数 getElementByIdgetElementbyID 是不同的。

同样,变量 myVariableMyVariable 也是不同的。


JavaScript 字符集


JavaScript 使用 Unicode 字符集。

Unicode 覆盖了所有的字符,包含标点等字符。


目录
打赏
0
0
0
0
14
分享
相关文章
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
HTML5实现好看的劳动节网页源码
HTML5实现好看的劳动节网页源码,劳动节网页,劳动节网页源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、劳动节介绍、劳动节由来、劳动节习俗、劳动节文化、劳动节活动、劳动节故事、劳动节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
29 4
|
1月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
45 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
12天前
|
HTML5实现好看的中秋节网页源码
HTML5实现好看的中秋节网页源码,中秋节网页,中秋节网页源码,节日网页大作业,作业源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、中秋节介绍、中秋节由来、中秋节习俗、中秋节文化、中秋节美食、中秋节故事、中秋节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
39 0
HTML5实现好看的中秋节网页源码
HTML5实现好看的端午节网页源码
HTML5实现好看的端午节网页源码,包含十个页面:网站首页、端午节介绍、由来、习俗、文化、美食、故事、民谣、联系我们及登录/注册。页面设计简洁美观,内容丰富,兼容手机端,代码规范且注释完整,易于扩展和修改。提供完整的源码下载和视频演示,方便学习和使用。
40 2
网页 HTML 自动播放下一首音乐
在 HTML5 中实现自动播放下一首音乐,通过管理音乐列表、操作音频元素和监听事件完成。创建包含多个音乐链接的列表,使用 `&lt;audio&gt;` 元素加载音乐,监听 `ended` 事件,在当前音乐结束时自动播放下一首。示例代码展示了如何使用 JavaScript 实现这一功能,确保无缝切换音乐。
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
97 25
(html在线预览cad图纸插件)网页CAD绘制条形码、二维码的教程
本文介绍了如何在mxcad中绘制条形码和二维码。对于条形码,首先根据应用场景选择合适的编码标准(如CODE39、EAN13等),通过编码规则将数据转换为二进制,并利用`McDbHatch`绘制条和空的组合,同时支持自定义实体及属性管理。 对于二维码,因其能存储更多信息且具备更强纠错能力,采用开源库QRCode.js进行编码处理,再通过`McDbHatch`绘制黑白矩阵,同样封装成自定义实体以便管理和扩展。文中还给出了完整的绘制流程与效果展示,包括创建二维码对象、设置参数、调用绘制方法以及最终的效果图。整个过程体现了灵活运用API与第三方库来实现复杂图形绘制的能力。
|
3月前
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码,为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑,还具备丰富的界面设计和用户交互功能,使得玩家能够轻松上手并享受扫雷带来的乐趣。
142 22
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML

热门文章

最新文章