Web前端基础(4)JavaScript基础

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变量

变量的命名规则

  1. 变量命名必须以字母或是下标符号”_”或者”$”为开头。
  2. 变量名长度不能超过255个字符。
  3. 变量名中不允许使用空格。
  4. 不用使用脚本语言中保留的关键字及保留符号作为变量名。
  5. 变量名区分大小写。(javascript是区分大小写的语言)

变量的作用域:

根据变量的作用范围可以分为全局变量和局部变量
全局变量

  1. 在最外层声明的变量。
1
2
3
4
5
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
  1. 在函数体内部,但是没有声明var的变量也是全局变量
1
2
3
4
5
// 此处可调用 carName 变量
function myFunction() {
carName = "Volvo";
// 此处可调用 carName 变量
}

局部变量
在函数体内部声明的变量。

1
2
3
4
5
// 此处不可调用 carName 变量
function myFunction() {
var carName = "Volvo";
// 此处可调用 carName 变量
}

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(); //函数不会被自动调用,主动调用函数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';
}
//输出结果: undefine 9

入口函数

1
2
3
window.onload = function(){
//内部放js
}

这个函数的意思就是说,当我们页面加载完毕(页面结构样式节点等加载完)之后,采取执行函数体里面的js部分。所以这句话可以在页面的顶端。