JavaScript 到底是什么
JavaScript 是一门动态编程语言,可为网站添加交互功能。(例如:游戏、动态样式,动画,以及在按下按钮或收到表单数据时做出的响应,等)。
JavaScript 的应用场合极其广泛。简单到幻灯片、照片库、浮动布局和响应按钮点击。复杂到游戏、2D 和 3D 动画、大型数据库驱动程序,等等
JavaScript 相当简洁,却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具,可以使 开发工作事半功倍。其中包括:
- 浏览器应用程序接口(API)—— 浏览器内置的 API 提供了丰富的功能,比如:动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成3D 图像与音频样本,等等。
- 第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者(Twitter、Facebook 等)提供的功能。
- 第三方框架和库 —— 用来快速构建网站和应用。
注:也可以将 <script> 放在 body 中,但要放在底部。这是因为浏览器会按照代码在文件中的顺序解析 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加载而失效。所以,要将 JavaScript 代码放在 body 中,应置于 HTML 页面底部。
<script> 若置于 head 中,必须指明 async
,而置于 body 中则无需指明。
变量的不同类型
函数
函数 用来封装可复用的功能。如果没有函数,一段特定的操作过程用几次就要重复写几次,而使用函数则只需写下函数名和一些简短的信息。
document.querySelector
和 alert
是浏览器内置的函数,随时可用。
事件
事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是 点击事件,鼠标的点击操作会触发该事件。
HTML DOM querySelector() 方法
document.querySelector("#demo");
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
设置属性的语句有:setAttribute(), myHeading.textContent ,prompt('请输入你的名字')会弹出对话框,localStorage全局缓存
setItem(),getItem()
let myImage = document.querySelector('img');
myImage.onclick = function() {
let mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute('src','images/firefox2.png');
} else {
myImage.setAttribute('src','images/firefox-icon.png');
}
};
function setHeading(name) {
let myHeading = document.querySelector('h1');
myHeading.textContent = 'Mozilla 酷毙了,' + name + '!';
}
function setUserName() {
let myName = prompt('请输入你的名字');
localStorage.setItem('name', myName);
setHeading(myName);
}
let storedName = localStorage.getItem('name');
let myButton = document.querySelector('button');
myButton.onclick = setUserName;
补充
Web Storage 概念和用法
Web Storage 包含如下两种机制:
-
sessionStorage
为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。 -
localStorage
同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在。