网页前端学习第五次（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;
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 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。
JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆盖了所有的字符，包含标点等字符。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 网页前端学习第五次（HTML）二
本文地址： https://pptw.com/jishu/296319.html