JavaScript
介绍
通过代码/js效果演示提供资料进行效果演示。js可以让我们的页面更加的智能，让页面和用户进行交互
引入方式
第一种方式：内部脚本，将JS代码定义在HTML页面中
- JavaScript代码必须位于<script><script>标签之间
- 在HTML文档中，可以在任意地方，放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可改善显示速度
第二种方式：外部脚本将JS代码定义在外部JS文件中，然后引入到HTMl页面中
- 外部JS文件中，只包含JS代码，不包含<script>标签
- 引入外部js的<script>标签，必须是双标签
基本语法
1、书写语法
- 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
- 每行结尾的分号可有可无
- 大括号表示代码块
- 注释：
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
| api | 描述 |
|---|---|
| window.alert() | 警告框 |
| document.write() | 在HTML输出内容 |
| console.log() | 写入浏览器控制台 |
2、变量
首先JS主要通过如下3个关键字来声明变量的：
| 关键字 | 解释 |
|---|---|
| var | 早期ECMAScript中用于变量声明的关键字 |
| let | ECMAScript6中新增的用于变量声明的关键字，相比较var、let只在代码块内生效 |
| const | 声明常量的，常量一旦声明，不能修改 |
在js中声明变量还需要注意一下几点：
- JavaScript是一门弱类型语言，变量可以存放不同类型的值
- 变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线、或美元符号
- 数字不能开头
- 建议使用驼峰命名
3、数据类型和运算符
js中的数据类型分为：原始类型和引用类型
| 数据类型 | 描述 |
|---|---|
| number | 数字（整数、小数、NaN（Not a Number）） |
| string | 字符串，单双引皆可 |
| boolean | 布尔。true、false |
| null | 对象为空 |
| undefined | 当声明的变量未初始化时，该变量的默认值是underfined |
注意：在js中，绝大多数的运算规则和Java中是保持一致的，但是js中的和=是有区别的
- ==：只比较是否相等，不区分数据类型，哪怕类型不一致，==也会自动转换类型进行值的比较
- ===：不光比较值，还要比较类型，如果类型不一致，直接返回false
在js中，虽然不区分数据类型，但是有时候涉及到数值计算，还是需要进行类型转换的，js中可以通过parseInt()函数将其他类型转换成数据类型。
0，null，underfined，“”，NaN理解成false，反之理解成true
函数
JavaScript中的函数被设计为执行特定任务的代码块，通过关键字function来定义。
第一种定义格式：
function 函数名（参数1， 参数2…）{
要执行的代码
}
注意：因为JavaScript是弱数据类型的语言
- 形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义
- 返回值也不需要声明类型，直接return即可
如：
function add （a，b）{
return a + b;
}
第二种定义格式
第二种可以通过var去定义函数的名字，具体格式如下：
var functionName = function （参数1，参数2…）{
// 要执行的代码
}
基本对象
1、array对象
Array对象是用来定义数组的。常用语法格式有如下2种：
方式1：
var 变量名 = new Array（元素列表）；
如：
var arr = new Array（1，2，3，4）;
方式2：
var 变量名 = [元素列表];
如：
var arr = [1，2，3，4];
特点：与Java种不一样的是，JavaScript中数组相当于Java中的集合，数组的长度是可以变化的。而且JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值。
属性和方法
属性：
| 属性 | 描述 |
|---|---|
| length | 设置或返回数组中元素的数量 |
方法：
| 方法 | 描述 |
|---|---|
| forEach（） | 遍历数组中的每个值的元素，并调用一次传入的函数 |
| push（） | 将新元素添加到数组的末尾，并返回新的长度 |
| splice（） | 从数组中删除元素 |
splice（）函数：
splice（）函数用来删除数组中的元素，函数填入2个参数
参数1：表示从哪个索引位置删除
参数2：表示删除元素的个数
2、String对象
语法：
String对象的创建方式有2种
方式1：
var 变量名 = new String（“…”）;
例如：
var str = new String（“Hello String”）;
方式2：
var 变量名 = “…”;
例如：
var str = ‘Hello String’；
属性和方法
属性：
| 属性 | 描述 |
|---|---|
| length | 字符串的长度 |
方法:
| 方法 | 描述 |
|---|---|
| charAt（） | 返回在指定位置的字符 |
| indexOf（） | 检索字符串 |
| trim（） | 去除字符串两边的空格 |
| substring（） | 提取字符串种两个指定的索引号之间的字符 |
3、JSON对象
自定义对象
var 对象名 = {
属性名1：属性值1，
属性名2：属性值2，
属性名3：属性值3，
函数名称：function（形参列表）{}
}；
通过如下语法调用属性和方法：
对象名.属性名
对象名.函数名（）
json对象
JSON对象：JavaScript Object Notation，JavaScript对象标记法。通过JavaScript标记法书写的文本。
{
“key”:value,
“key”:value,
“key”:value,
}
其中，key必须使用引号并且是双引号标记，value可以是任意数据类型
var obj = JSON.parse(jsonstr); // 字符串转换为json对象
JSON.stringify(obj); // 将json对象转换为字符串
BOM对象
BOM的全称是Browser Object Model（浏览器对象模型）。也就是JavaScript将浏览器的各个组成部分封装成了对象。
BOM中提供了如下5个对象：
| 对象名称 | 描述 |
|---|---|
| Window | 浏览器窗口 |
| Navigator | 浏览器对象 |
| Svreen | 屏幕对象 |
| History | 历史记录对象 |
| Location | 地址栏对象 |
window对象
window对象提供了获取其他BOM对象的属性：
| 属性 | 描述 |
|---|---|
| history | 用于获取history对象 |
| location | 用于获取location对象 |
| Navigator | 用于获取Navigator对象 |
| Screen | 用于获取Screen对象 |
函数：
| 函数 | 描述 |
|---|---|
| alert（） | 显示带有一段消息和一个确认按钮的警告框 |
| comfirm（） | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
| setInterval（） | 按照指定的周期（以毫秒计）来调用函数或计算表达式 |
| setTimeout（） | 在指定的毫秒数后调用函数或计算表达式 |
setInterval（fn，毫秒值）：定时器，用于周期性的执行某个功能，并且循环执行。
fn：函数，需要周期性执行的功能代码
毫秒值：间隔时间
如：
var i = 0;
setInterval（function（）{
i++;
console.log(“定时器执行了”+i+“次”)；
}，2000）;
setTimeout(fn，毫秒值)：定时器，只会在一段时间后执行一次功能。
如：
setTimeout(function(){
alert(“js”);
},3000);
location对象
location是指代浏览器的地址栏对象，对于这个对象，常用的是href属性，用于获取或者设置浏览器的地址信息。
DOM对象
DOM：Document Object Model（文档对象模型）。也就是JavaScript将HTML文档的各个组成部分封装成对象。
获取DOM对象
document对象提供的用于获取Element元素对象的api如下表：
| 函数 | 描述 |
|---|---|
| document.getElementById（） | 根据id属性值获取，返回单个Element对象 |
| document.getElementByTagName（） | 根据标签名称获取，返回Element对象数组 |
| document.getElementsByName（） | 根据name属性值获取，返回Element对象数组 |
| document.getElementsByClassName（） | 根据class属性值获取，返回Element对象数组 |
JavaScript事件
事件：
- 按钮被点击
- 鼠标移到元素上
- 输入框失去焦点
- …
主要围绕两点：
- 事件绑定
- 常用事件
事件绑定
方式1：通过html标签中的属性进行绑定
<input type=“button” id=“btn1” value=“事件绑定1” οnclick=“on()”>
方式2：通过DOM中Element元素的事件属性进行绑定
<input type=“button” id=“btn2” value=“事件绑定2”>
通过获取id属性获取按钮对象，然后操作对象的onclick属性来绑定事件
document.getElementById(‘btn2’).onclick = function(){
alert(“按钮2被点击了…”);
}
常见事件
| 事件属性名 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完全加载 |
| onsubmit | 当表单提交时触发该事件 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
今天也是开心的一天!!!
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
