目录
JS（JavaScript）（1）
js介绍
1. 什么是JavaScript？
JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端脚本语言，用来给HTML网页添加动态功能。
2.JavaScript的组成
JavaScript包括ECMAScript、DOM、BOM。
3. ECMAScript
ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。指定的JavaScript标准语言。
4. DOM文档对象模型
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
5.BOM浏览器对象模型
BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
js写法
1、JS代码书写
1.1、行内引入
在html开始标签中引入
<div onclick="alert('点击了')"></div>//相同引号不能嵌套1. 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性)，如： onclink
2. 注意单双引号的使用：在HTML中我们推荐使用**双引号**，JS中我们推荐使用**单引号**
3. 可读性差，在 HTML 中编入 JS 大量代码时，不方便阅读
4. 特殊情况下使用
1.2、内部引入
在<script>标签中引入
<script>
alert('Hello world');
</script>特点：可以将多行JS代码写到`<script>`标签中。
内嵌 JS 是学习时常用的方式。
1.3、外部引入
新建一个js文件，并在html中的head中引入
<script src="my.js"></script>注意：引入外部文件的script标签内部不能在写js代码，不会执行
特点：利于HTML页面代码结构化，把单独JS代码独立到HTML页面之外，既美观，又方便。
引用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况
1.4、script标签放置的位置
1、HTML中script标签可以有任意多个，可以放置在任意位置
2、执行过程中遇到script标签就会暂停往下执行，去解析script标签中的js代码，解析完以后再往下执行
3、一般放置在head中、body的末尾
2、JS的基本语法
2.1、输入输出语句
| 方法 | 说明 | 归属 |
| alert(msg); | 浏览器弹出警示框 | 浏览器 |
| console.log(msg); | 浏览器控制台打印输出信息 | 浏览器 |
| prompt(info); | 浏览器弹出输入框，用户可以输入 | 浏览器 |
| confirm(info) | 浏览器弹出带有指定消息和确认及取消按钮的对话框 | 浏览器 |
- `alert()` 主要用来显示消息给用户
- `console.log()` 用来给程序员看自己运行时的消息
- `prompt(info);` 例子 prompt("请输入商品价格"); var value = prompt("请输入商品价格"); 输出用户所输入的值
- `confirm(info)` 例： var a=confirm("郭杨和小代是好朋友吗？"); 返回 确定即为 true 取消则为false
2.2、声明变量的规范
名称可以包含字母、数字、下划线和美元符
1、名称必须以字母、_和$开头
2、名称对大小写敏感
3、保留字无法用作变量名称
4、变量名不能相同（原因会把之前声明的给覆盖掉）
2.3、声明变量
声明变量用到计算机的保留字var来声明变量，为什么要声明变量？因为我们每个人都有一个自己的名字，计算机也是。它需要一个自己的名字来识别。
变量：顾名思义就是可以改变的量，存储数据的容器。
有以下声明方式：
1、先声明再赋值：var a;a=0。
2、声明变量的同时赋值：var a=0。
3、同时声明多个变量：var a=0,b=0,c=0;
4、变量连等：var a=b=c;
2.3.1、声明变量的特殊情况
| var age; console.log(age); | 只声明，不赋值 | undefined 未赋值 |
| console.log(age) | 不声明 不赋值 直接使用 | 报错 not defined 未定义 |
| age = 10; console.log(age); | 不声明 只赋值 | 10 |
2.4、JavaScript数据类型
JavaScript有6大数据类型。分别是五大基本数据类型和复杂数据类型。
2.4.1、基本数据类型
基本数据类型分别有Number(数字类型)、String(字符串)、Boolean(布尔类型)、Null和Undefined
1、数据类型Number
•Number类型包含整型和浮点型（浮点数值必须包含一个小数点，且小数点后面至少有一位数字）两种值。
•栗子：var n=123;//整型
var n=1.23; //浮点型
•在Number类型中有一个比较特殊的值：
NaN:（not a number）非数字类型。
有这样一个例子：就是说0/0返回的结果是应该是0，但是在我们js中这个算法就不一样了，在这里0/0返回的是 NaN.而0/1返回的是无穷大，负数除以0返回的是负无穷大。原因:因为计算机中不知道我们是把0当作除数
栗子：
var a=5-"b"
console.log(a)//结果是NaN 因为一个是数字一个是字符串结果肯定是一个不是数字的 所以返回NaN特点：涉及到任何关于数值的错误操作，都会返回NaN
•typeof：返回数据类型
2、数据类型String
•被单引号或者双引号包围的字符都是String类型
var s2=”abc”;//字符串
var s3='123';//字符串
•length属性：获取字符串的长度
var s1='abc';//字符串
console.log(s1.length);//获取字符串的长度，返回值 3
•charAt()方法：获取对应位置的一位字符
s2.charAt(0); //a 下标从0开始
3、数据类型Boolean
•Boolean类型只有两个值，true和false
•当进行逻辑判断时，一般会得到Boolean值，同样Boolean值也可以用作判断条件。
4、数据类型null和undefined
•Null
–Null类型只有一个值，即null，从逻辑角度来看，null值表示一个空对象指针
•Undefind
–Undefind类型只有一个值，即undefined，在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined。
•undefind和null的区别
–null表示“没有对象”，即该处不应该有值。
–undefined表示“缺少值”，就是此处应该有一个值，但是还没有定义。
2.4.2、复杂数据类型
1、复杂数据类型Object
Object对象由属性和方法构造（后面会具体讲解对象）
Object对象用花括号表示{}
•Object包括：
–window
–document
–构造函数创建的对象 new Object
–json形式的对象 obj = { “name”:”ujiuye”}
2、复杂数据类型Array
•Array数组类型：存储数据的容器，可以存储任意类型的数据，可以存储任意多个。
Array数组用中括号表示[]
•数组的表现：[1,true,null]
•获取数组长度length：arr.length
•获取数组元素：arr[下标] 下标从0开始
3、复杂数据类型function
•函数function：存储一段代码块，在需要的时候调用
•函数声明：function 函数名(){ }
•函数调用：函数名()
2.4.3、数据类型转化
•为什么需要类型转换？
•用户从键盘输入的数据，都是字符串，例如用户输入1+1预期得到结果为2，但实际结果为11。
• 数据类型转换是为了更好的数据运算以得到正确值
•数据转换分为强制转换和隐式转换。
1.强制转化为整型
•强制转换为Number类型
•Number（要转换的值）：只能转换boolean，纯数字字符串、空字符
•parseInt（要转换的值）：从左往右进行转换，遇到不能转换的字符或字符的结尾结束转换。转换成整型，舍弃小数部分。
parseInt（'12.5px'） ---- 12
•parseFloat：保留小数部分。
parseFloat('12.5px') ---- 12.5
•isNaN():判断值是不是非数字，返回布尔值
栗子：
var bool=true;
console.log(typeof(bool)+":"+bool) //结果为boolean类型 值为true
var num=123;
console.log(isNaN(num)) //结果为false
var str="Hello"
console.log(isNaN(str)) //结果为true2.强制转换为字符型
•强制转换为String类型
•String : String(转换的值)
•toString : 转换的值.toString(）
•num.toString（number）可以将数值，转换成对应进制的数字字符串，number的范围是2-36
•String（）与toString（）区别是 toString无法转化 null 和 undefined
栗子：
var str="hello"
console.log(typeof(str)) //结果为string
var str=null
console.log(typeof(str)) //结果为object
var str=null
console.log(str.toString()) //会报错，不能转化 undefined同样也是3. 运算符
•算术运算符 + - * / ++ --
•赋值运算符 = += -= *= /=
•比较运算符 > >= < <= ==（相等） !=(不相等) ===(恒等，全等) !==
•逻辑运算符 &&(与) ||（或） ！（非）
•! 取反
•三目（三元）运算符 ： 条件 ？ 条件为真的时候执行 : 条件为假的时候执行
2.4.4、数据类型的隐式转换
•隐式转换：当我们进行比较操作或者加减乘除四则运算操作时，会触发javascript的隐式类型转换机制。其中字符串和其他数据类型进行加法运算时，’+‘将变成拼接符，把其他数据类型转换成字符串。
•10+18+'age'+10+18+true
var str=10+18+'age'+10+18+true
console.log(str) //结果为28age1018true(ˇˍˇ) 为什么age后面的不是28而是1018呢？
原因是到了字符串这里代码执行就结束了，字符串后面的不会在像字符串前面的一样加起来了，所以代码执行到字符串后面就拼接起来了。就是说任何加字符串都会得到字符串。
js获取
1、获取元素
我们用window.onload来获取html中的元素
window.onload=function(){
document.getElementById('box').onclick = function (){
alert('点击了');
}
}•当把script标签放置在head中的时候，会获取不到元素
•因为代码从上往下执行，获取元素时，标签没有加载出来
2、DOM常用的事件
2.1、鼠标事件
•点击事件：onclick
•双击事件：ondblclick
•鼠标移入：onmouseover/onmouseenter
•鼠标移动：onmousemove
•鼠标移出：onmouseout/onmouseleave
•鼠标按下：onmousedown
•鼠标抬起：onmouseup
鼠标右击：oncontextmenu
2.2、键盘事件
onkeydown:某个键盘被按下。
onkeypress:某个键盘按键被按下并松开。
onkeyup:某个键盘按键被松开。
2.3、JS设置或获取元素内容的方式
1、获取表单元素的值：元素.value
2、获取元素内容：元素.innerHTML(可识别 标签)
元素.innerText(不能识别标签)
2.4、JS设置或获取元素属性的方式
1、设置或获取元素HTML属性:(元素.属性)
--元素.id
--元素.className(设置或获取类名时 比较特殊)
2、设置或获取元素css属性：(元素.style.属性)
--元素.style.width
--元素.style.fontSize （当css属性由两个单词组成，比如font-size，这类属性在js使用驼峰标识）
2.5、cssText属性
•cssText 的本质就是设置 HTML 元素的 style 属性值。
–元素.style.cssText ='width:200px;height:200px;background:red'
2.6、JS设置或获取元素属性的其他方法
•通过id获取元素：
–document.getElementById('id名');
•通过class名获取元素:
–document.getElementsByClassName('类名')
–父元素.getElementsByClassName('类名')
•通过标签名获取元素:
–document.getElementsByTagName('标签名')
–父元素.getElementsByTagName('标签名')
•通过tagName和ClassName获取的元素是元素集合
用法和数组一样，使用的时候必须通过[]获取出来具体的元素
•栗子：
var oLi = document.getElementsByTagName('li');
console.log(oLi.length); //获取元素集合的长度
oLi[1].onclick = function () { alert('点击了');}
202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
