js基础

一、js简介

1. 什么是js

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

2. js有什么作用

  • 实现页面的动态效果的
  • 操作浏览器
  • 操作网页

3. js的语法组成

网景，NetScape，网景浏览器，Firefox，LiveScript，Microsoft的IE，JScript，ECMA

  • ECMAScript：规定了js的基本语法
  • BOM：Browser Object Model，浏览器对象模型。js可以调用BOM对象，来操作浏览器
  • DOM：Document Object Model，文档对象模型。js可以调用DOM对象，来操作网页

4. js的引入方式


<!--1.内部js --> <script> alert(); </script> <!--2.外部js --> <script src="js文件路径"></script>


  • 注意：
  • 一个script标签的功能要单一
  • js越晚加载越好，建议放在body结束标签之前

二、js的基本语法

1. 基本语法

1.1 变量定义

js是弱类型语言

  • js里一切变量定义，都作用：var

1.2 数据类型

js是动态类型语言

  • boolean：布尔类型，true/false
  • number：数字类型，一切数字都是number类型
  • string：字符串类型
  • object：对象类型，包含任意对象和null
  • undefined：未定义类型，值只有一个：undefined

1.3 运算符

  • js也有：+,-,*,/,%,+=,-=,*=,/=,%=,++,--,>,<,=,>=,<=,==,!=,&&,||,!
  • 需要说明的有：
  • ==和===：
  • ==：比较值。只要值一样，就是true
  • ===：比较值和类型。只有值和类型都一样，才是true
  • -*/：
  • 如果是数字，正常运算
  • 如果不是数字，js会尝试转换成数字再运算
  • 如果转换不成功，结果是NaN
  • 如果除数是0，结果是Infinity

1.4 流程控制语句

  • js也有：if, else, else if, while, switch, for
  • 特殊的是：if判断时，false, 0, "", null, undefined是false，其它是true

2. ==函数==

2.1 普通函数


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


2.2 匿名函数


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


2.3 注意事项

  • js的函数没有重载，同名函数会覆盖掉，最后一个有效
  • js的形参个数和实参个数无关，在函数里可使用使用隐含的arguments（实参数组）获取所有的实参值

3. ==事件==

3.1 相关的概念

  • 事件源：被监听的对象，通常是html标签
  • 事件(监听器)：用于监听事件源状态变化的组件，由js提供的不同的事件（监听器），用于监听不同的状态变化
  • 响应行为：监听到事件源状态变化、或者发生了动作，要执行的代码，我们自己编写

3.2 常见的事件

事件(监听器)

描述，监听什么

onclick

监听鼠标单击

ondblclick

监听鼠标双击

onsubmit

监听表单提交了

onchange

监听域内容改变，通常用于监听下拉框的选项变化

onload

监听加载完成，通常用于监听浏览器加载完了页面

onfocus

监听获取焦点（光标）

onblur

监听失去焦点（光标）

onkeydown

监听键盘按键按下

onkeypress

监听键盘按键按下或按住

onkeyup

监听键盘按键弹起

onmousedown

监听鼠标按键按下

onmouseup

监听鼠标按键弹起

onmouseover

监听鼠标移入

onmouseout

监听鼠标移出

onmousemove

监听鼠标移动

3.3 事件绑定

  • 普通函数方式

<input type="button" value="点击弹窗1" οnclick="show1()"> <script>    function show1() {        alert("点我干嘛");   } </script>


  • 匿名函数方式

<input type="button" value="点击弹窗2" id="btn2"> <script>    document.getElementById("btn2").onclick = function(){        alert("点我干嘛");   } </script>


三、js操作浏览器（bom）

1. bom简介

  • BOM：Browser Object Model，浏览器对象模型。
  • 目的：让js代码调用bom对象的方法，来操作浏览器
  • 有哪些bom对象：
  • window：浏览器窗口对象，是其它bom对象的顶级对象
  • location：浏览器地址对象，可以实现网页跳转
  • history：浏览器历史记录对象，可以实现历史记录切换
  • screen：浏览器的屏幕显示信息对象，可以操作浏览器窗口大小、位置、颜色等信息
  • navigator：浏览器信息对象，只读的。可以获取浏览器的内核、版本、操作系统等信息

2. 使用bom操作浏览器

2.1 window对象

2.1.1 让浏览器弹窗

  • 普通弹窗：alert(string)，没有返回值
  • 确认弹窗：confirm(string)，返回boolean：点击确定返回true，点击取消返回false
  • 输入弹窗：prompt(string)，返回string：点击确定返回输入的内容，点击取消返回null

2.1.2 让浏览器开启定时器

  • 执行多次的定时器：
  • 开启：var timer = setInterval(函数对象, 间隔毫秒值)
  • 清除：clearInterval(timer)

//开启定时器 var timer = setInterval(function () {    alert(); }, 3000); //清除定时器 clearInterval(timer);

  • 执行一次的定时器（延时器）：
  • 开启：var timer = setTimeout(函数对象, 延迟毫秒值)
  • 清除：clearTimeout(timer)

//开启定时器 var timer = setTimeout(function(){    alert(); }, 2000); //清除定时器 clearTimeout(timer);

2.1.3 提供了一些函数

  • parseInt(string)：转换成整数
  • parseFloat(string)：转换成小数
  • eval（string)：把字符串作为js代码执行一次

2.2 location对象

  • 获取网址：var url = location.href;
  • 网址跳转：location.href = "http://www.baidu.com"
  • 刷新页面：location.reload()

2.3 history对象

四、js操作网页

 

内容回顾

  1. 知道js的作用：实现页面动态效果
  • 操作浏览器
  • 操作网页
  1. 了解js的基本语法：
  • 变量定义：var
  • 数据类型：boolean, number, string, object, undefined
  • 运算符：+-*/><.....
  • ==：比较值，值一样就是true； ===比较值和类型，都一样才是true
  • -*/：js会转换成数字再运算。如果转换不成功结果是NaN
  • 流程控制语句：if, else, else if, for, while, switch
  • if判断：false, 0, "", null, undefined是false，其它是true
  1. ==掌握js的函数定义和调用==
  • 普通函数
  • 匿名函数
  • js的函数没有重载
  1. ==掌握事件的绑定==
  • 普通函数方式
  • 匿名函数方式
  1. js如何操作浏览器
  • 通过window对象操作浏览器窗口
  • 让浏览器弹窗：alert(), confirm(), prompt()
  • 让浏览器开启定时器：setInterval()， setTimeout()
  • 提供了一些方法
  • 通过location对象操作地址
  • 获取网址：location.href
  • 网址跳转：location.href = ""
  • 刷新页面：location.reload()