js基础

js基础-课堂笔记

一、js简介

1. 什么是js

• js：JavaScript。是web开发中不可缺少的脚本语言，不需要编译就可以运行（解释型语言）。它“寄生”在html体内随网络传输到客户端，在浏览器内存中运行。

2. js的作用

• 实现动态效果的：

  • 让浏览器动起来（js可以操作浏览器）

  • 让网页动起来（js可以操作网页）

3. js的组成

网景，NetScape，网景浏览器，火狐浏览器，LiveScript， Microsoft的IE，JScript， ECMA ，ECMAScript

• ECMAScript：基本语法规范

• dom：Document Object model，文档对象模型。js调用dom对象，可以操作网页

• bom：Browser Object Model，浏览器对象模型。js调用bom对象，可以操作浏览器

4. js的引入

• 内部js

<script>
    alert();
</script>

• 外部js

<script src="js文件路径"></script>

• 注意事项

  • 一个script标签功能要单一的（不能既内部，又引入外部）

  • js代码越晚加载越好，通常是放在body结束标签之前

二、js的基本语法

1. 基本语法

1.1 变量定义

js的弱类型语言：声明变量时，不需要声明类型

• 一切变量定义，都使用：var

1.2 数据类型

js是动态类型语言

• boolean：布尔类型，true，false

• number：数字类型，一切数字都是number

• string：字符串类型

• object：对象类型（js的引用数据类型，内置类，只有9个，下节课讲）

• undefined：未定义类型，值只有一个：undefined

1.3 运算符

• js里也有：+,-,*,/,+=,-=,*=,/=,%,%=,>,<,>=,<=,==,!=,&&,||,!,++,--。需要特殊说明的：

  • ==和===

    • ==：比较值。只要值一样，就是true

    • ===：全等，比较值和类型。只有值和类型都一样，才是true

    建议使用===，更严谨

  • -*/：

    • 如果运算的都是数字，结果是数字运算的结果

    • 如果有变量不是数字，js会尝试转换成数字再运算；如果转换不成功，结果是NaN

    • 如果除数是0，结果是Infinity

    是因为js是弱类型语言导致的

1.4 流程控制语句

• js里也有：if, else, for, switch, while。特殊的是if判断

  • if判断：

    • false, 0, "", undefined, null 是false；其它是true

2. ==函数==

2.1 普通函数（命名函数）

//定义一个普通函数
function 函数名(形参1, 形参2, ...){
    //函数体
    //需要返回值，就return；否则就不return
}
​
//调用函数
var result = 函数名(实参1,实参2,...);

2.2 匿名函数

//1. 匿名函数赋值给一个变量，通过变量名调用匿名函数
var fn = function(){
    //函数体
}
var result = fn();
​
//2. 匿名函数作为另外一个函数的实参
setInterval(function(){}, 2000);

2.3 函数没有重载

• js的函数没有重载：同名函数里，最后一个函数会覆盖前边所有同名函数

• js的实参个数和形参个数无关：每个js函数里都隐含有一个变量arguments，是函数的实参数组

3. ==事件==

3.1 相关的概念

• 事件源：被监听的对象，通常是html标签

• 事件（监听器）：用于监听事件源上发生的动作或者状态变化。监听状态变化或者动作的

• 响应行为：监听到事件源变化之后，要执行的代码，通常是我们编写代码

3.2 事件（监听器）

事件(监听器)	描述：监听什么动作、监听什么状态变化
onclick	监听鼠标单击的
ondblclick	监听鼠标双击的
onsubmit	监听表单提交的
onchange	监听域内容改变的，通常用于监听下拉框的选项变化
onload	监听加载完成的
onfocus	监听获取焦点的（光标）
onblur	监听失去焦点的（光标）
onkeydown	监听键盘按键被按下
onkeypress	监听键盘按键被按下或按住
onkeyup	监听键盘按键被弹起
onmousedown	监听鼠标按键被按下
onmouseup	监听鼠标按键被弹起
onmouseover	监听鼠标进来了
onmouseout	监听鼠标出去了
onmousemove	监听鼠标在移动

3.3 事件绑定

<!--1.普通函数的方式-->
<input type="button" value="点击弹窗1" onclick="show()">
<!--2.匿名函数的方式-->
<input type="button" value="点击弹窗2" id="btn2">
​
<script>
    function show() {
        alert("点我干嘛");
    }
​
    document.getElementById("btn2").onclick = function () {
        alert("还点？点我干嘛？")
    }
</script>

三、js的bom（操作浏览器的）

1. bom对象简介

• bom：Browser Object Model，浏览器对象模型。是把浏览器抽象封装成的对象，让js操作bom对象，来操作浏览器的。

• 有哪些bom对象：

  • window：把浏览器窗口封装成的对象

  • location：把浏览器地址封装成的对象。可以操作地址，进行跳转

  • history：把浏览器的历史记录封装成的对象。可以操作历史记录，进行前进、后退

  • screen：浏览器的屏幕显示信息对象。可以操作浏览器大小、位置、颜色等等显示信息

  • navigator：浏览器信息对象，只读的。可以获取浏览器的内核、版本、操作系统等信息

2. bom对象的使用

2.1 通过window操作浏览器窗口

2.1.1 让浏览器弹窗

• 普通弹窗：alert(msg)，没有返回值

• 确认弹窗：confirm(msg)，返回boolean值。确定返回true，取消返回false

• 输入弹窗：prompt(msg)，返回输入的内容。确定返回string，取消返回null

2.1.2 让浏览器开启定时器

• 执行多次的定时器：

  • 开启：var timer = setInterval(函数对象,间隔毫秒值)

  • 清除：clearInterval(timer)

• 执行一次的定时器（延时器）：

  • 开启：var timer = setTimeout(函数对象,延迟毫秒值)

  • 清除：clearTimeout(timer)

2.1.3 提供了一些方法

• parseInt(string)：转换成整数

• parseFloat(string)：转换成小数

• eval(string)：把string作为js代码执行一次

2.2 通过location操作浏览器地址

• 获取当前地址：var url = location.href;

• 网址跳转：location.href = "http://www.baidu.com"

• 页面刷新：location.reload()

2.3 通过history操作浏览器的历史记录

四、js的dom（操作网页的）

 

内容总结

1. js的作用：实现动态效果的

   • 操作浏览器，用bom对象

   • 操作网页，用dom对象

2. js的基本语法：

   • 变量定义：var

   • 数据类型：boolean,number,string,object,undefined

   • 运算符：和Java基本一样，不同的是：===和==， -*/

   • 流程控制语句：和Java基本一样，不同的是：if判断：false,0,"",null,undefined是false，其它是true

3. ==函数==

   • 普通函数（命名函数）的定义和调用

   • 匿名函数的定义和调用

   • js的函数没有重载，实参个数和形参个数无关

4. ==事件==

   • 常见事件：onclick, onsubmit, onchange, onload

   • 事件绑定方式：普通函数方式，匿名函数方式

5. 使用bom操作浏览器

   • window对象：

     • 让浏览器弹窗：alert(), confirm(), prompt()

     • 让浏览器开启定时器：setInterval(), setTimeout()

     • 提供了一些函数：parseInt(), parseFloat(),eval()

   • location对象：

     • ==跳转：locatioin.href = "网址";==

     • 刷新：location.reload();