肖sir___第二个月Javascript_04
1.1 JavaScript 简介
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行
1.2 JavaScript 简介
JavaScript能做什么
JavaScript：直接写入 HTML 输出流
document.write("<h1>这是一个标题</h1>");
JavaScript：对事件的反应
<button type="button" onclick="alert('欢迎!')">点我!</button>
JavaScript：改变 HTML 内容
x=document.getElementById("demo"); //查找元素 x.innerHTML="Hello JavaScript"; //改变内容
JavaScript：改变 HTML 图像
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" hei
ght="180">function changeImage() { element=document.getElementById('myimage') if (elem
ent.src.match("bulbon")) { element.src="/images/pic_bulboff.gif"; } else { element.src="/image
s/pic_bulbon.gif"; } } </script>
JavaScript：改变 HTML 样式
x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式
JavaScript：验证输入
if isNaN(x) { alert("不是数字"); }
2.1 JavaScript 使用
内部的JavaScript
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中
<script>
alert("我的第一个 JavaScript");
</script>
外部的 JavaScript
<script type="text/javascript“ src="myScript.js"></script>
在外部的脚本.js文件中不需要包含<script> 标签。
3.1 JavaScript 函数
JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
// 执行代码
}
调用带参数的函数
myFunction(argument1,argument2)
function myFunction(var1,var2)
{
// 执行代码
}
3.2 JavaScript 函数
JavaScript Window - 浏览器对象模型
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
有三种方法能够确定浏览器窗口的尺寸。
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
或者
document.body.clientHeight
document.body.clientWidth
4.1 JavaScript 事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
4.1 JavaScript 事件
常见的HTML事件
5.1 JavaScript 元素
HTML DOM (文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树：
5.2 JavaScript 元素
查找 HTML 元素
通过 id 找到 HTML 元素
var x=document.getElementById("main");
通过标签名找到 HTML 元素
var y=x.getElementsByTagName("p");
通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");
通过name找到 HTML 元素
var x=document.getElementByName("main");
