Javascript基础内容

150 阅读3分钟

BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。

DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。

JSON 是一种基于文本的数据交换格式;JSONP是一种非官方跨域数据交互协议。

AJAX 用于交互式页面,实现页面异步更新,减少后台与服务器的数据交换。

引入方式

内部脚本

将JS代码定义在HTML页面中

Javascript代码必须位于< script>< /script>标签之间

在HTML文档中,可以在任意地方,放置任意数量的< script>

一般会把脚本置于< body>元素的底部

外部脚本

将JS代码定义在外部JS文件中,然后引入到HTML页面中

外部JS文件中,只包含JS代码,不包含< script>标签

< script>标签不能自闭和

基础语法

书写语法

区分大小写,每行的结尾;可有可无

输出语句

使用window.alert()写入警告框

使用doucument.write()写入html输出

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

变量

用var关键字来声明变量,不需要指定类型

特点:作用域大,全局变量,可以重复定义

let关键字来定义变量,但是所声明的变量只在代码框内有效,局部变量,且不能重复声明。

const定义常量,不能重复声明。

数据类型

原始类型

number:数字

string:字符串,单双引号都可以

Boolean:布尔,true,false

null:对象为空

undefined:当声明的变量未初始化时,该变量的默认值是undefined。

typedef运算符可以获取数据类型

运算符

与Java相同

==会进行类型转换,===不会进行类型转换

类型转换
字符串类型转为数字:

parseInt:将字符串字面值转为数字,如果字面值不是数字,则转为NaN。(从前往后转换,碰到第一个不是数字的字符,就停止转换)

其他类型转换为boolean:

Number:0和NaNcy为false,其他均转为true。

String:空字符串为false,其他均转为true。

Null和undefined:均转为false。

函数

通过function来定义

function function Name(参数1,参数2){ //将要执行的代码 }

对象

Array

定义

方法一:var 变量名=new Array(元素列表);

方法二:var 变量名=【元素列表】;

特点:长度可变 类型可变

遍历数组

1.for循环

2.forEach:遍历数组中有值的元素

数组名.forEach(function(e){ console.log(e); })

箭头函数(简化):(...)=>{...} 数组名.forEach(e)=>{ console.log(e); }

push:添加元素到数组末尾

splice:从数组中删除元素

String

image.png

自定义对象
定义格式

image.png

调用格式

image.png

JSON

定义

var 变量名 = '{"key1":value1,"key2":value2}';

image.png

JSON字符串转为JS对象

var jsObject = JSON.parse(userStr) ;

JS对象转为JSON字符串

var jsonStr = JSON.stringify(jsObject);

BOM

组成

image.png

window

image.png

示例

var userSstr ='{"name":"Jerry","age":18,"addr":["北京","上海"]}';

location

image.png

DOM

image.png

image.png

image.png

对HTML进行操作:

1.改变HTML元素的内容

2.改变HTML元素的样式(css)

3.对HTML DOM事件作出反应

4.添加和删除HTML元素

HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的。

image.png 获取之后可以用innerHTML来改变其内容

事件监听

事件

HTML事件是发生在HTML元素上的事情,比如:按钮被点击、鼠标移动搭配元素上、按下键盘按键

事件监听

Javascript可以在事件被侦测时执行代码

事件绑定

方法一:通过HTML标签中的事件属性进行绑定

image.png 方法二:通过DOM元素属性绑定

image.png

常见事件

image.png 例子

image.png image.png

image.png

image.png