JavaScript基础
JavaScrip对于网页的作用有提供网页特效、用户交互、表单验证、控制结构和样式。
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript是一种脚本语言, 主要目的是动态的控制web标准中的结构和样式（结构、样式、行为）
1
| document.getElementById("demo").style.width = "200px";
|
JavaScript用法
HTML 中的脚本必须位于 <scrip>与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
通常的做法是把函数放入
部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
<head> 中的 JavaScript 函数
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<html>
<head>
<script>
alert("我的第一个 JavaScript");
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
</body>
</html>
|
<body> 中的 JavaScript
1
2
3
4
5
6
7
8
9
| <!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<script>
alert("我的第一个 JavaScript");
</script>
</body>
</html>
|
外部的 JavaScript
1
2
3
4
5
6
| <!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
|
JavaScript中常用的输出语句
alert()
使用 window.alert()可以弹出一个警示框
1
2
3
4
5
6
| <script>
function myTestFunction1(){
window.alert(5+6);
}
</script>
<button type="button" onclick="myTestFunction1()">尝试一下</button>
|
console.log()
使用 console.log() 可以控制台输出, 按F12查看Console结果
document.write()
使用 document.write() 方法将内容写到 HTML 文档中。
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>
|
innerHTML
使用 innerHTML 写入到 HTML 元素。
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
|
JavaScript变量
变量的命名规则
- 变量命名必须以字母或是下标符号”_”或者”$”为开头。
- 变量名长度不能超过255个字符。
- 变量名中不允许使用空格。
- 不用使用脚本语言中保留的关键字及保留符号作为变量名。
- 变量名区分大小写。(javascript是区分大小写的语言)
变量的作用域
根据变量的作用范围可以分为全局变量和局部变量
全局变量
- 在最外层声明的变量。
1
2
3
4
5
| var carName = " Volvo";
function myFunction() {
}
|
- 在函数体内部，但是没有声明var的变量也是全局变量
1
2
3
4
5
|
function myFunction() {
carName = "Volvo";
}
|
局部变量
在函数体内部声明的变量。
1
2
3
4
5
|
function myFunction() {
var carName = "Volvo";
}
|
JavaScript中的事件
| 事件名 | 说明 |
|---|
| onclick | 鼠标单击 |
| ondbclick | 鼠标双击 |
| onkeyup | 按下并释放键盘上的一个键时触发 |
| onchange | 文本内容或下拉菜单中的选项发生改变 |
| onfocus | 获得焦点，表示文本框等获得鼠标光标 |
| onblur | 失去焦点，表示文本框等失去鼠标光标 |
| onmouseover | 鼠标悬停，即鼠标停留在图片等的上方 |
| onmouseout | 鼠标移出，即离开图片等所在的区域 |
1
| 事件源.事件 = function(){ 事件处理函数 }
|
1
| <button onclick="this.innerHTML=Date()">现在的时间是?</button>
|
JavaScript函数
函数的定义
函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
自定义函数
1
2
3
4
| function fun(){
alert("我是自定义函数")
}
fun();
|
函数直接量声明
1
2
3
4
| var fun1 = function(){
alert("直接量声明")
}
fun1();
|
利用Function关键字声明
1
2
| var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");
fun2();
|
函数体内变量声明提升
在函数体内，声明变量，会把该声明提升到函数体的最顶端，只会提升变量声明，不会赋值。
1
2
3
4
| function fun(){
console.log(num);
var num = 20;
}
|
相当于
1
2
3
4
5
| function fun(){
var num;
console.log(num);
num = 20;
}
|
例如：
1
2
3
4
5
6
7
8
9
| var a = 18;
f1();
function f1(){
var b=9;
console.log(a);
console.log(b);
var a = '123';
}
|
入口函数
1
2
3
| window.onload = function(){
}
|
这个函数的意思就是说，当我们页面加载完毕（页面结构样式节点等加载完）之后，采取执行函数体里面的js部分。所以这句话可以在页面的顶端。
