4.20 前端JavaScript学习笔记
一、简介
- JavaScript是Netscape公司开发的一种脚本语言
- 是以Java为基础，但无需编译，可由浏览器直接解释运行
- 特点：脚本语言、基于对象、简单性、安全性、动态性、跨平台型
二、JavaScript和Java的区别
- Java是一种真正面向对象的语言，即使是开发简单的程序，必须设计对象；JavaScript是一种脚本语言，可以用来制造与网络无关的，与用户交互作用的复杂软件。
- Java的源代码在传递到客户端执行之前，必须经过编译；JavaScript是一种解释性编译语言，其源代码在发往客户端执行前不需要经过编译，而是将文本格式的字符代码传给客户编由浏览器解释执行。
- java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式，可以直接嵌入HTML中。
- Java是强类型变量检查；JavaScript是弱类型
三、语法结构
这是我的第一个JavaScript程序 alert("第一个JavaScript程序!")（一）数据类型
数值型：整数和浮点数型
布尔型：true和false
字符串型：由单个或多个文本字符组成
空值：由关键字null代表
未定义：由关键字undefined代表
（二）命名规则
变量可以包含数字0-9、大小写和下划线
首字符必须是字母或下划线
字母的大小写敏感
长度必须在一行内
不能有空格与其他标点符号
（三）变量与表达式
var number =137
var string1 = “1”
var string1 = “ Hello！”
变量可以是一个数也可以是一个字符串
（四） ==与===
==是一定会做类型转换
===首先会比较两个值的类型是否相等，如果不相等直接false
（五）函数
function 函数名（参数）{
函数体；
return 表达式；
}
四、对象
JavaScript 将对象分为三类：内置对象、宿主对象和自定义对象：
-
内置对象是由 ES 标准中定义的对象，如 Object、Math、Date、String、Array、Number、Boolean、Function 等；
-
宿主对象是 JavaScript 的运行环境提供的对象，主要指由浏览器提供的对象，如 BOM、DOM、console、document 等；
-
自定义对象可以理解为自己创建的类，可以通过 new 关键字创建出来对象实例进行应用。
1.通过new关键字定义对象
在 JavaScript 中，可以使用 new 关键字和 Object 构造函数来显式地定义实例对象
new Object（ ）;
语法中通过 new 来执行 Object 函数，此时 Object 称为构造函数，此时会返回对应的实例对象。
var obj = new Object（ ）;
段代码通过“new Object()”产生并返回一个实例对象，使用 obj 来接收这个实例对象，后面我们就可以通过 obj 来访问该实例对象。
向对象内部增加属性，可以使用中括号“[]”操作符或者点“.”操作符。
obj.name = "hello"; obj[ "age"] = 9; console.log(obj);
代码通过点“.”操作符向 obj 对象添加了 name 属性，其值为“hello”。通过中括号“[]”操作符向 obj 对象添加了 age 属性，其值为 9。
我们除了为对象设置属性和属性值，还可以为对象设置函数
obj.eat = function () { console.log(this.name + "在吃饭"); } obj.run = function () { console.log(this.name + "在跑步"); }2.对象字面量
JavaScript 中可以使用对象字面量快速定义对象，这是实际开发中最常用的方式，也是最高效、最简便的方式。
{属性名1：属性值1,...,属性名n:属性值n}JavaScript对象的使用
// 属性 // 语法：对象.属性 console.log(obj.name); console.log(obj.age); // 函数 // 语法：对象.函数(实参) obj.eat(); obj.run();
五、与数据类型相关的核心对象
（一）字符串对象
1.String
属性：length属性表明字符串长度
方法：toString（）：将非字符串对象显示转化为字符串
substring（）：将括号中参数所指字符串片段返回
charAt（）：返回括号中指定位置字符串的内容
split（）：根据所指定的分隔符分割字符串
2.Array
var 数组名 = new Array （数组大小）；
var emp = new Array（3）；
属性：length属性表明数组长度
方法：join（）：将数组值连接变为一个字符串
reverse（ ）：将数组值倒序
sort（）：将对数组值进行排序
3.Date
设定日期：setDay（ ），setMonth（ ）,setYear（ ），setTime（ ）
获取日期：getDay（ ），getMonth（ ）,getYear（ ），parse（ ）
处理时区：
toAMTString（ ）将日期时间值转换为的字符串
tolocaleString（ ）将日期时间值转换为的字符串
4.Math
（二）与文档相关的对象
1.document
getElementByID：获得指定ID值的对象
getElementsByName：获得指定Name值的对象
2.form
name、method、action、target...
六、DOM
DOM:动态的访问和更新文档的内容、结构以及样式的平台和语言中立的接口
分为三类：Core DOM定义了一套标准的针对任何结构化文档的对象
XML DOM 定义了一套标准针对XML文档的对象
HTML DOM定义了一套标准针对HTML文档的对象
HTML DOM
document.write(Date());
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=新的 HTML
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=新属性值
document.getElementById("image").src="landscape.jpg";
七、事件
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
οnclick=JavaScript
点这里
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
菜鸟教程(runoob.com) Mouse Over Me function mOver(obj){ obj.innerHTML="Thank You" } function mOut(obj){ obj.innerHTML="Mouse Over Me" }
