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 |
|
<body> 中的 JavaScript
1 |
|
外部的 JavaScript
1 |
|
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
<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
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
JavaScript变量
变量的命名规则
- 变量命名必须以字母或是下标符号”_”或者”$”为开头。
- 变量名长度不能超过255个字符。
- 变量名中不允许使用空格。
- 不用使用脚本语言中保留的关键字及保留符号作为变量名。
- 变量名区分大小写。(javascript是区分大小写的语言)
变量的作用域:
根据变量的作用范围可以分为全局变量和局部变量
全局变量
- 在最外层声明的变量。
1 | var carName = " Volvo"; |
- 在函数体内部,但是没有声明var的变量也是全局变量
1 | // 此处可调用 carName 变量 |
局部变量
在函数体内部声明的变量。
1 | // 此处不可调用 carName 变量 |
JavaScript中的事件
事件名 | 说明 |
---|---|
onclick | 鼠标单击 |
ondbclick | 鼠标双击 |
onkeyup | 按下并释放键盘上的一个键时触发 |
onchange | 文本内容或下拉菜单中的选项发生改变 |
onfocus | 获得焦点,表示文本框等获得鼠标光标 |
onblur | 失去焦点,表示文本框等失去鼠标光标 |
onmouseover | 鼠标悬停,即鼠标停留在图片等的上方 |
onmouseout | 鼠标移出,即离开图片等所在的区域 |
1 | 事件源.事件 = function(){ 事件处理函数 } |
1 | <button onclick="this.innerHTML=Date()">现在的时间是?</button> |
JavaScript函数
函数的定义
函数:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
自定义函数
1 | function fun(){ |
函数直接量声明
1 | var fun1 = function(){ |
利用Function关键字声明
1 | var fun2 = new Function("var a = 10; var b = 20; alert(a+b)"); |
函数体内变量声明提升
在函数体内,声明变量,会把该声明提升到函数体的最顶端,只会提升变量声明,不会赋值。
1 | function fun(){ |
相当于1
2
3
4
5function fun(){
var num;
console.log(num);
num = 20;
}
例如:1
2
3
4
5
6
7
8
9var a = 18;
f1();
function f1(){
var b=9;
console.log(a);
console.log(b);
var a = '123';
}
//输出结果: undefine 9
入口函数
1 | window.onload = function(){ |
这个函数的意思就是说,当我们页面加载完毕(页面结构样式节点等加载完)之后,采取执行函数体里面的js部分。所以这句话可以在页面的顶端。