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部分。所以这句话可以在页面的顶端。