03-JavaScript

1、介绍

JavaScript

JavaScript：一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，
内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言。

组成部分：

ECMAScript： JS 基础语法(规定关键字运算符语句函数等等…)
BOM： 浏览器对象模型
DOM： 文档对象模型

作用：修改html页面的内容；修改html的样式；完成表单的验证。

注意：JS 可以在页面上直接写，也可以单独出去；JS 的文件的后缀名 .js

JS 和 HTML 的整合：

方式1：在页面上直接写，将 js 代码放在 <script></script> 标签中,一般放在head 标签中

<script type="text/javascript">funtion fuc1(){alert(111);}
</script>

方式2：独立的 js 文件，通过 script 标签的src属性导入。eg：<script type="text/javascript" src="test.js" ></script>

2、JavaScript 基础

JS 中的变量声明：

var 变量名=初始化值;
var 变量名; 变量名=初始化值;

注：var可以省略，建议不要省略；一行要以分号结尾，最后一个分号可以省略,建议不要省略。

JS 的数据类型：

1、原始类型（5种）

Null
String
Number
Boolean
Undefined

通过 typeof 运算符可以判断一个值或者变量是否属于原始类型，若属于原始类型，还可以判断出属于那种原始类型。typeof 变量|值;

若变量为 null，使用 typeof 弹出的值 object

使用 typeof 的返回值：

undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的

2、引用类型

运算符：

关系运算符：
- 两边值都是字符，比较 ascii 码
- 两边都是数字，和 java 一样
- 一边是数字，一遍是字符串形式的数字 eg：3>"2" 可以比较，将字符串形式的数字转换成数字在进行比较。
- 一边是数字，一遍是普通字符串 eg：3>"hello" 可以比较，值永远是 false
等性运算符：== 只判断值是否相同；=== 不仅判断是否相同,还要判断类型是否相同
```
"66"==66  true
"666"===666 false
```

JS 的语句：

if、while、for 等和 java 一样，switch 和 java 一样(区别：switch 后面跟字符串，还可以跟变量)

JS 操作：

获取元素：var obj=document.getElementById("id值");
获取元素的value属性：var val=document.getElementById("id值").value;
设置元素的value属性：document.getElementById("id值").value="sdfsdf";
获取元素的标签体：var ht=document.getElementById("id值").innerHTML;
设置元素的标签体：document.getElementById("id值").innerHTML="ssss";

定义函数：

方式1：function 函数名(参数列表){函数体}
方式2：var 函数名=function(参数列表){函数体}

注意：函数声明的时候不用声明返回值类型；参数列表上不要写参数类型；通过return 结束方法和将值返回；函数调用的时候：函数名(参数)

事件：

onclick 单击
onsubmit 表单提交，加在 form 表单上的 onsubmit="return 函数名()" ，函数返回值为boolean类型
onload 页面加载成功或者元素加载成功

事件和函数绑定：

方式1：通过元素的事件属性，<xxx onxxx="函数名(参数列表)">，若参数为 this 是将当前的 dom 对象传递给了函数
方式2：给元素派发事件（相当于给元素绑定事件）
```
document.getElementById("id值").onxxx=function(){...};
document.getElementById("id值").onxxx=函数名;
```
注意：内存中应该存在该元素才可以派发事件，怎么理解？因为网页是从前往后解析，如果把派发事件写在页面元素的前面，而HTML页面其实还没加载完毕，在这之前获取元素是获取不到，即不能派发事件。

做法：
1. 将 js 代码放在html页面的最下面
2. 在页面加载成功之后在运行 js 代码 onload 事件.

3、BOM（浏览器对象模型）

所有的浏览器都有 5 个对象。

window:窗口
location:定位信息 (地址栏)
history:历史

▶ Windows 对象详解

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

PS：若是 window 对象的属性和方法,调用的时候可以省略 window

常用的属性：通过 window 可以获取其他的四个对象
- window.location 等价于 location
- window.history 等价于 history
- …
常用的方法：
- 消息框：
  alert("....") 警告框
  confirm("你确定要删除吗?")确定框，返回值：boolean
  prompt("请输入您的姓名") 输入框，返回值：你输入的内容
- 定时器：
  设置定时器：setInterval(code,毫秒数):周期执行；setTimeout(code,毫秒数):延迟多长事件后只执行一次，例如：setInterval(showAd,4000);，serInterval("showAd()",4000);
  清除定时器：clearInterval(id):，clearTimeout(id):
- 打开和关闭：open(url) 打开；close() 关闭

▶ location 对象：定位信息，地址栏

常用属性：

href 获取或者设置当前页面的 url(定位信息)
location.href; 获取 url
location.href=”…”;设置 url，相当于 a 标签，超链接

▶ history 对象：操作历史*

back(); 后退
forward(): 向前
go(int)
- go(-1) 相当于 back()
- go(1) 相当于 forward()

4、DOM（文档对象模型）

就是我们的 HTML 代码加载到内存中会形成一颗 document 树。

节点：

文档节点 document
元素节点 element
属性节点 attribute
文本节点 text

获取一个元素节点：通过 document 获取
操作元素的属性：dom对象.属性
操作元素的标签体：dom对象.innerHTML

5、其他及注意

1、在方法中 (function()) this 指代的是当前的元素（当前的 dom 对象）
例如：

<input type="text" name="username" id="username" onblur="loseFocus(this.value)">
方法:function loseFocus(obj){alert(obj);}

2、事件总结：

常见事件：

焦点事件★：onfocus、onblur
表单事件：onsubmit、onchange 改变
页面加载事件★：onload
鼠标事件（掌握）：onclick
鼠标事件（了解）：ondblclick 双击、onmousedown 按下、onmouserup 弹起、onmousemove 移动、onmouserover 悬停、onmouserout 移出
鼠标事件（理解）：onkeydown 按下、onkeyup 弹起、onkeypress 按住

3、阻止默认事件的发生；阻止事件传播

4、引用型类似总结：

原始类型中的 String Number Boolean 都是伪对象，可以调用相应的方法
Array：数组

String：

语法:new String(值|变量);//返回一个对象String(值|变量);//返回原始类型
常用方法:substring(start,end):[start,end)substr(start,size):从索引为指定的值开始向后截取几个charAt(index):返回在指定位置的字符。indexOf(""):返回字符串所在索引replace():替换split():切割常用属性:length

Boolean：

语法：new Boolean(值|变量);Boolean(值|变量);非0数字 非空字符串 非空对象 转成true

Number：语法

语法:new Number(值|变量);Number(值|变量);
注意:null====>0 fale====>0 true====>1字符串的数字=====>对应的数字其他的NaN

Date：

new Date();
常用方法:toLocalString()

RegExp:正则表达式

语法:直接量语法  /正则表达式/参数直接量语法  /正则表达式/new RegExp("正则表达式")new RegExp("正则表达式","参数") 参数:i:忽略大小写g:全局常用方法:test() :返回值为boolean

Math：

Math.常量|方法
Math.PI
Math.random()  [0,1)

全局：

decodeURI() 解码某个编码的 URI。
encodeURI() 把字符串编码为 URI。Number():强制转换成数字
String():转成字符串parseInt():尝试转换成整数
parseFloat():尝试转换成小数eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。

03-JavaScript相关推荐

03.JavaScript对DOM操作
JavaScript引入方式外部引入在head或者body中,添加以下代码 <script type="text/javascript" src="js/dem ...
03 JavaScript的学习笔记
一.js简介 1.js是什么 js是可以嵌入到html中,是基于对象和事件驱动的脚本语言特点: (1)交互性 ...
JavaWeb -03 JavaScript基础
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 1.JavaScript介绍 1.1 JavaScript简介 1.2 JavaScript发展史 1.3 JavaScri ...
javascript技术教程蔡敏_程序员都必掌握的前端教程之JavaScript基础教程（上）
阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到. 本篇文章成哥继续带大家来学习前端教程之JavaScript,网页的动态事件基本上都是靠它来实现的.下面我们就一起来学习内容吧! 01 Ja ...
JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript基础和js概括
js内容概括: Html 结构化 CSS 样式 JavaScript 行为交互 01.JavaScript基础 02.JavaScript操作BOM对象 03.JavaScript操作DOM对象 ** ...
JS中URL编码解码
编码:encodeURI 解码:decodeURI 编码:encodeURIComponent 解码:decodeURIComponent 转载于:https://www.cnblogs.com ...
Java Web应用开发
Java Web应用开发 01 Web应用开发简介单元测验1 02网页开发基础节内小测 2.1 HTML 技术 2.2 CSS 2.3 [阶段案例2]图书商城首页设计 02 网页基础--单元测验 ...
让前端的子弹飞-TypeScript
" Any application that can be written in JavaScript,will eventually be written in JavaScript. & ...
Java Web应用开发钱荣华、朱勇、屠凯、姜文秀
Java Web应用开发 01 Web应用开发简介单元测验1 02网页开发基础 02 网页基础--单元测验 03 JavaScript技术 03 JS技术--单元测验返回 04 JavaWeb基础 ...