1.<script>标签
HTML 中的脚本必须位于与标签之间。
<script>和</script>会告诉 JavaScript 在何处开始和结束，之间的代码行包含了 JavaScript
老旧的实例可能会在标签中使用 type="text/javascript"。现在已经不必了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
head 或 body 中的 JavaScript
可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的<head>或<body>部分中，或者同时存在于两个部分中。通常的做法是把函数放入<head>部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
1.head中的javascript
<html>
<head>
<script>
document.write("<h1>JS</h1>");
document.write("<p>javascript</p>");
</script>
</head>
<body></body>
</html>
2.body中的javascript
<html>
<head></head>
<body>
<script>
document.write("<h1>JS</h1>");
document.write("<p>javascript</p>");
</script>
</body>
</html>
运行效果
head 或 body 中的 JavaScript的运行效果相同
JavaScript函数和事件
需要在某个事件发生时执行代码，比如当用户点击按钮时。把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
head 或 body 中的 JavaScript函数
1.body 中的 JavaScript函数
<body>
<p id="p">JS</p>
<button type="button" onclick="myf()">请点击</button>
<script>
function myf() {
document.getElementById("p").innerHTML="javascript";
}
</script>
</body>
head 中的 JavaScript函数
<head>
<script>
function myf() {
document.getElementById("p").innerHTML="javascript";
}
</script>
</head>
<body>
<p id="p">JS</p>
<button type="button" onclick="myf()">请点击</button>
</body>
运行效果
初始效果
事件触发效果
外部JavaScript
可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在标签的 "src" 属性中设置该 .js 文件
<script src="../script.js"></script>
在<head>或<body>中引用脚本文件都是可以的。实际运行效果与<script>标签中编写脚本完全一致
2.JS输出
操作 HTML 元素
从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法，通过指定的 id 来访问 HTML 元素，并改变其内容
<p id="p">js</p>
<script>
bocument.getElementById("p").innerHTML="javascript";
</script>
JavaScript 由 web 浏览器来执行。在这种情况下，浏览器将访问 id="p" 的 HTML 元素，并把它的内容（innerHTML）替换为 "javascript"。
写到文档输出
直接把元素写到HTML文档输出中
<script>
document.write("<h1>JS</h1>");
document.write("<p>javascript</p>");
</script>
运行效果
警告
在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖
<h1>JS</h1>
<p>javascript</p>
<button type="button" onclick="myf()">请点击</button>
<script>
function myf() {
document.write("<p>文件覆盖</p>");
}
</script>
运行效果
初始效果
点击后HTML页面被覆盖
3.JS语法
JS代码和代码块
代码：
javascript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。javascript代码（或者只有javascript）是javascript语句的序列
document.grtElementById("demo").innerHTML="JS";
代码块：
javascript 语句通过代码块的形成进行组合。块由左花括号开始，由右花括号结束。块的作用是使语句序列一起执行。javascript 函数是将语句组合在块中的典型例子
function myf() {
document.getElementById("demo").innerHTML="javascript";
}
分号； 空格 对大小写敏感
分号；
分号用于分隔javascript 语句。在每条可执行的语句结尾添加分号。使用分号的另一用处是在一行中编写多条语句
空格
javascript会忽略多余的空格。可以向脚本添加空格，来提高可读性。
var x=5;与 var x = 5; 效果相同
对大小写敏感
javascript 对大小写是敏感的。编写javascript语句时，要留意是否关闭大小写切换键。
函数 getElementById 与 getElementByID 是不同的。
同样，变量myVariable 与 MYVariable 是不同的。
对代码进行折行
在文本字符串中使用反斜杠对代码进行换行。
document.write("Hello \
World!");
4.JS注释
javascript 不会执行注解，添加注解来对 javascript 进行解释或提高代码的可读性。
单行注释以 // 开头
//输出段落
document.write("<p>hello javascript</p>");
或： var x = 5; //声明 x 并把 5 赋值给它
多行注释： 以 /* 开始，以 */ 结束。
/*下面代码
第一行输出标题
第二行输出段落*/
document.write("<h1>JS</h1>");
document.write("<p>javascript</p>");
5.JS变量
js变量
变量是存储信息的容器。
<script>
var x = 2;
var y = 3;
var z = x*y;
document.write("<p>x="+x+"</p>");
document.write("<p>y="+y+"</p>");
document.write("<p>z="+z+"</p>");
</script>
运行效果
像代数那样： 在代数中，我们使用字母（如 x）来保存值（如 2）。在javascript 中，这些字母被称为变量。
与代数一样，javascript 变量可用于存放值（如 x = 2）和表达式（如 z = x*y）。
变量可以使用短名称（如 x , y），也可以使用描述性更好的名称（如 age, sum, totalvolume）。
变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
数据类型
javascript 变量还能保存其他数据类型，比如文本值（name="Bill Gates"）。如这样的一条文本在javascript 中被称为字符串。 javascript变量有很多种类型，但现在，我们只关注数字和字符串，
向变量分配文本值时，要用单引号或双引号包围这个值。
var name = "Bill Gates";
var age = "25岁";
运行效果：
向变量赋的值是数值时，不能使用引号。若用了引号，便会被当作文本处理！
var x = 2；
var y = 3；
var z = "x*y"；
运行效果
声明js变量，重新声明js变量
在javascript 中创建变量通常称为"声明"变量。使用关键词 var 来声明变量。
var name；
变量声明后，该变量是空的（没有值）。 向变量赋值，用等号（=）。
name = "jesk";
在声明变量时对其赋值：
var name = "jesk";
<p id="p"><p>
<script>
var name = "张三";
document.getElementById("p").innerHTML=name;
</script>
运行效果
可以在一条语句中声明多个变量，该语句以 var 开头，并使用逗号分隔变量：
var name = "Gates", age = 20, sum = "100$";
也可以横跨多行：
var name = "Gates",
age = 20,
sum = "100$";
经常声明无值的变量。未使用值来声明的变量，其值实际是 undefined（未定义）。
js算数
通过javascript 变量做算数，使用的是 = 和 +，-，*，/ 这类运算符
<script>
var x = 5-1,
y = x*6,
z = y/x+1;
document.write("<p>x=" + x + "</p>");
document.write("<p>y=" + y + "</p>");
document.write("<p>z=" + z + "</p>");
document.write("<p>(x+y)/z" + ((x+y)/z) + "</p>");
</script>
运行效果：
练习：
<p>
<input type="text" id="x"> * <input type="text" id="y"> = <span id="z"></span>
</p>
<button type="text" onclick="myf()">计算</button>
<script>
function myf() {
var x = parseInt(document.getElementById("x").value),
y = parselnt(document getElementById("y").value),
z = x * y;
if (x==""||isNaN(x)) {
alert(x+" 请输入数字");
}
if (y==""||isNaN(y)) {
alert(y+" 请输入数字");
}
else {
document.getElementById("z").innerHTML=z;
}
}
</script>
运行效果
输入为数值 结算出结果
NaN 非数值
改变z = x * y 中的运算符，可进行*（乘法），/（除法），-（减法），+（加法）四则运算
网友评论