认识JavaScript

JavaScript是一种属于网络的脚本语言，已经被广泛用于web应用开发，常来为网页添加各种各样的动态功能，为用户提供更流畅的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能。

  • HTML定义了网页的内容
  • CSS渲染了网页的布局和样式
  • JavaScript制定了网页的行为

JavaScript是写给浏览器的一门脚本语言，目前所有的浏览器都支持JavaScript

JavaScript是轻量级的一门面向对象的编程语言

不得不提的一件事：JavaScript和java是没有任何关系的！（原名为LiveScript，只是蹭热度改名为JavaScript）

简单使用JavaScript

在HTML中使用JavaScript有两种方式：

  • 在HTML中使用< script>< /script>标签，嵌入JavaScript脚本的内嵌式
  • 在HTML中使用< script src="" >< /script>标签，引入外部.js文件的外链式

注意：如果使用了外链式，又在该标签内写了js代码，那么标签内的代码不会执行，如果还想在页面中使用内嵌式，再写一个script标签即可。script是一个双标签，即使使用外链式标签中没有内容，也要有结束标签。

<!-- 外链式-->
    <script src="../js/js_demo1.js"></script>
    <!-- 内嵌式-->
    <script>
        document.write("hello javaScript")
    </script>

语法规则

JavaScript严格区分大小写

JavaScript是弱类型语言。

  • 弱类型语言：不是没有类型，而是定义变量时，不需要明确具体的数据类型

JavaScript变量的定义：var 变量名=值

JavaScript中的数据类型：

  • 数字类型：number，表示任意数字
  • 布尔类型：boolean，可以为true、false
  • 字符串类型：string，单引号和双引号都可以声明字符串，因为JavaScript没有字符类型
  • 引用类型：object
  • 空值：null，表示空，属于object类型
  • undefined：表示一个未初始化的变量

使用typeof可以返回变量的真实类型

//定义变量
var num1 = 100;
var num2 = 99.99;
var str = "haha";//单引号双引号都可以用来表示字符串
var flag = true;

document.write(num1+"<br>");
document.write("num1的数据类型是："+typeof(num1)+"<br>");
document.write(num2+"<br>");
document.write("num2的数据类型是："+typeof (num2)+"<br>")
document.write(str+"<br>");
document.write("str的数据类型是："+typeof str+"<br>")
document.write(flag+"<br>")
document.write("flag的数据类型是："+typeof flag+"<br>")

三种输出方式

  • window.alert("")，提示框效果显示
  • console.log("")，在控制台以日志的方式显示
  • document.write("")，直接显示在HTML页面中
var num="哈哈哈";
        //输出在弹出的对话框中
        window.alert(num);
        //输出在页面上（不管script标签写在哪，该输出的语句都在body标签内）
        document.write(num);
        //输出在浏览器控制台中
        console.log("日志信息");
        console.warn("警告信息");
        console.error("错误信息");

知识点

运算符中存在一个 === 。

=表示赋值，==表示比较值相等，===表示比较类型和值相等

var str = "100";
        var num = 100;
        document.write("使用==相等吗？--"+(str==num))
        document.write("<br>使用===相等吗？--"+(str===num))

布尔类型的运算中：

  • 数字类型非0就是真
  • 字符串类型非""（空串）就是真
  • 0，null，undefined等都是false
var num1 = 15;
        if (num1){
            console.log("真的")
        }
        var str1 = "";
        if (str1){
            console.log("真的")
        }else{
            console.log("假的")
        }

函数

JavaScript中的函数其实就是方法。但是格式和java中的方法不太相同

function 函数名(参数列表){
    方法体
    //有返回值就写return，没有就不写
}

特点：

  • 函数中不需要声明返回值类型
  • 参数列表中的参数不需要指定数据类型
  • 不存在java中的重载的概念，只要两个函数的函数名相同，后面的函数就会把前面的函数覆盖掉
  • 使用函数时，如果函数需要参数，调用时不传参也不会报错，如果函数不需要参数，调用时传入了参数也不会报错

事件

JavaScript使我们有能力创建动态页面，事件是可以被JavaScript检测到的行为，当事件发生时，就可以动态的做一些事情

事件三要素：

  • 事件源：在页面中，用户可以操作的元素都是事件源
  • 事件：用户对于事件源作出的行为（比如鼠标点击、悬浮···）
  • 监听器：用来监听事件，当事件发生时，就会调用相应的函数处理事件

事件通常和函数配合使用，这样就可以通过发生事件来驱动函数执行，从而根据用户的行为来实现一些动态的效果

事件可以是浏览器的行为，也可以用户的行为

常用事件：

事件名

说明

onload

某个页面被完成加载

onsubmit

表单被提交时（事件源是form表单）

onclick

鼠标单击一个对象

onblur

鼠标双击一个对象

onfocus

失去焦点

onchange

获得焦点（鼠标指针放在元素上，该元素就获得焦点）

onkeydown

对象中的内容被改变

onkeypress

某个键盘按键被按下

onkeyup

某个键盘按键被按下或按住

onmousedown

鼠标按键被按下

onmouseup

鼠标按键被松开

onmouseover

鼠标被移动到某个元素上

onmouseout

鼠标移出某个元素

onmousemove

鼠标被移动

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript事件</title>

    <script>
        function clickMethod(){
            window.alert("你点击了按钮");
        }
        function loadMethod(){
            window.alert("页面被加载了");
        }
        function changeMethod(){
            window.alert("你修改了文本框的内容")
        }
        function focusMethod(){
            window.alert("文本框获得了焦点")
        }
    </script>
</head>
<body onload="loadMethod()">
    <input type="submit" onclick="clickMethod()" value="按钮">
    <input type="text" onchange="changeMethod()" onfocus="focusMethod()">
</body>
</html>