JavaScript基础

1 JavaScript引入方式

2 JavaScript 基础语法

2.1 输出语句

window.alert() 写入警告框 （可以省略window）

document.write() 写入HTML输出

console.log() 写入浏览器控制台

2.2 变量

var关键字定义变量

        1 弱类型

        2 作用域：全局变量

        3 变量可以重复定义

let关键字定义变量，只在代码块内有效，且不允许重复声明。

const关键字定义常量，声明后只读且值不允许改变。

2.3 数据类型

JavaScript中分为 原始类型 和 引用类型

5种原始类型

        number：数字（整数、小数、NAN(Not a Number)）

        string：字符、字符串、单双引号

        boolean

        null：对象为空

        undefined：当声明的变量未初始化时，该变量的默认值是undefined

使用typeof运算符可以获取变量数据类型：

        alert(typeof age);

2.4 运算符

基本与Java一致，只是在JavaScript中多了“===”运算符

== ：判断类型是否一致，不一致则先进行类型转换后再比较其值

===：若类型不一致，直接返回false

类型转换：

其他类型转为number：

        1.string：按照字符串字面值转为数字，若字面值不是数字则转为NaN。一般使用parseInt()

        2.boolean：false转0，true转1

其他类型转为boolean：

        1.number：0和NaN转为false，其他数字转为true

        2.string：空字符串转为false，其他转为true

        3.null：false

        4.undefined：false

2.5 流程控制语句

同Java

2.6 函数

定义方式一：通过function关键字定义

function functionName(参数1，参数2...){

        函数体

}

定义方式二：

var functionName = function(参数列表){

}

注意：

        形式参数不需要类型，因为JavaScript是弱类型语言

        返回值也不需要定义类型，可以在函数内部直接使用return返回

3 JavaScript常用对象

具体可以查看手册

1. Array

        定义：

                var arr = new Array(1,2,3); //方式一

                var arr = [1,2,3]; //方式二

        特点：数组边长变类型，类似于Java集合

        方法：

                push：添加方法

                splice：删除元素

2.String

        定义：

                var str = new String("hello"); // 方式一

                var str = "hello"; 方式二

        方法：

                charAt()  返回指定位置的字符串

                indexOf()  返回字符串第一次出现的位置

                trim()  去除字符串前后两端的空白字符

3.自定义对象

        定义;

        var 对象名称 = {

                属性名称1：属性值1，

                属性名称2：属性值2，

                ...

                函数名称：function (形参列表){}

                ...

        };

4 BOM

Browser Object Model 浏览器对象模型，JavaScript将浏览器各个组成部分封装为对象

组成：

        Window：浏览器窗口对象

                方法：

                        alert()  显示带有一段消息和一个确认按钮的警告框

                        confirm()  显示带有一段消息和确认/取消按钮的对话框，有返回值true/false

                        setInterval(function,毫秒值)  按照指定的周期(以毫秒计)来调用函数或计算表达式

                        setTimeout(function,毫秒值)  在指定的毫秒数后调用函数或计算表达式

        Navigator：浏览器对象  （使用不多）

        Screen：屏幕对象  （使用不多）

        History：历史记录对象

                使用：window.history.方法();  //其中window. 可以省略

                方法：

                        back()  加载history列表中的前一个url，即浏览器中后退按钮的功能

                        forward()  加载history列表中的后一个url

        Location：地址栏对象

                使用：location.方法();

                属性：href  设置或者返回完整的url

                        location.href = “http://www.baidu.com”;  跳转到百度首页

5 DOM

具体查看手册

Document Object Model 文档对象模型，将标记语言的各个组成部分封装为对象

组成：

        Document：整个文档对象

                获取Element对象：

                        getElementById()、getElementsByTagName()、getElementsByName()、getElementsByClassName

        Element：元素对象

        Attribute：属性对象

        Text：文本对象

        Comment：注释对象

6 事件监听

事件绑定两种方式

1. 通过HTML标签中的事件属性进行绑定

2.通过DOM元素属性绑定 （推荐使用）

常见事件

onclick  鼠标单击事件

onblur   元素失去焦点

onfocus  元素获得焦点

onload  某个页面或图像被完整加载

onsubmit  当表单提交时触发该事件

onkeydown  某个键盘的键被按下

onmouseover  鼠标被移到某元素上

onmouseout  鼠标从某元素移开