JS基础
用途：主要目的是，验证发往服务器端的数据、增加 Web互动、加强用户体验度等。可用于开发网站、游戏、移动端app等
编写位置：
1.在script标签中引入，（css的为style.)
<script type="text/javascript">
alert('你好') //altert 为一个弹窗，不建议用来调试代码，会阻塞后面代码
</script> //的执行
2.js文件
<script type="text/javascript" src="js/common.js"><script>
带src属性的script标签内不能写js代码,写了也没有效果。
js可以放在html文档中的任意位置，但是建议放在文档的后面，js过大可能会影响页面的加载时间。应先保证页面的布局的正常加载，再加载动画js部分。总的来说一句话，增强用户体验。
JS变量的定义，赋值。
-
变量的定义：var关键字。
var age; //var 是关键字，age是变量名
注意：Js区分大小写，同一个单词大小写分别代表着不同的变量。
-
赋值，可多个变量一起赋值。
ar name="zhangsan", age=18, weight=108;
定义变量后应赋值，不然为引用时会出现报错：undefined 声明未赋值。
JS代码规范:
- 变量的命名规范
- 数字,字母,下划线
_和美元符$组成; - 第一个字符不能为数字
- 不能使用关键字或保留字
- 数字,字母,下划线
- 代码可读性
- 标识符区分大小写，如：age和Age是不同的变量。强烈不建议用同一个单词的大小写区分两个变量。
- 变量命名尽量遵守驼峰原则: myStudentScore
- 变量命名尽量见名知意（尽量英文翻译）
- JS语句的末尾尽量写上分号（无强制要求）;
- 运算符两边都留一个空格, 如
var n = 1 + 2; - 注释
- 单行注释：//注释内容，可以放在代码后面
- 多行注释（和CSS注释一样）
/*注释内容*/- 多行注释不能嵌套
JS数据类型
-
基本数据类型
- Number：数值
- NaN：是一个特殊的值，即非数值(Not a Number)。数学运算无法得到数字时，就会返回NaN
- 不代表任何值，也不等于任何值，甚至自己都不等于自己
- 任何数据与它运算都返回NaN
- isNaN(a)：用来判断a到底是不是非数字,返回布尔值
- NaN：是一个特殊的值，即非数值(Not a Number)。数学运算无法得到数字时，就会返回NaN
- String：字符串
用引号（单/双引号）括起来的内容 - Boolean: 布尔类型
Boolean 类型有两个值：true和false
- Number：数值
-
引用数据类型
- Array：数组
- Object：对象
-
数据类型判断-----可以判断数据属于哪种数据类型
-
typeof
typeof 'html5'; //=>string typeof 100; //=>number typeof true //=>boolean typeof null //=>object
-
-
数据类型转换
基本数据类型转换：利用内置函数进行转换
字符串-----String(a) 数字-----Number(a) 布尔值----Boolean(a)
-
隐式转换
如果运算符两边是两种数据类型，系统会内部尝试转换成相同的数据类型进行运算。如：var a = '3'; //a为字符串类型 var b = 4; // b为数值类型 sum = a * b; // 运行结果为12，系统会把 a 转为数值类型后在再进行计算。 // 值得注意的是，+号两侧只要有一个是字符串则为字符串拼接， //因此在做数值上的 + 运算时候要注意两边数值类型的是否都为数值型。
支持隐式转换的运算：逻辑运算、关系运算、算术运算
算术运算：
+, -, *, /, %:加,减,乘,除,取余(取模)
- num.toFixed(n): 在数字后面调用，n为小数位，有四舍五入的功能，保留多少位小数。
- parseInt()：取整函数:
- parseFloat()：浮点型。
+ 的特殊用法：字符串拼接
+号两侧只要有一个是字符串则为字符串拼接
赋值操作：
- =
var num1=10;//表示把10赋值给num1变量 - +=：在原来的内容基础上追加内容
str += 'test' <==> str = str + 'test' - -=：
var n=10; n -= 2 <==> n = n - 2 - *=,/=,%=
关系运算（返回布尔值）
- ==(等于), !=(不等于)
- <(小于)、>(大于)、<=(小于等于)、>=(大于等于)
- ===、恒等于/全等于，比较的时候要求值和类型都相等（不会进行类型隐式转换）
- !==、不全等于
- 关系运算符的比较规则:
- 数字和数字比较, 直接比较大小
- 数字和字符串比较, 字符串转换为数字后再比较
- 字符串和字符串比较, 进行字符的ASCII码值比较
逻辑运算（返回布尔值）
逻辑运算符的特性
与 && 真真为真，左假右不算、（右边代码不会执行）
或 || 一真为真 左真右不算（右边代码不会执行）
非 ！ 取反操作
i++ i–
-
++: 自增1（在原来的数值基础上加1）
-
–：自减1（在原来的数值基础上加1）
var b = 4;
console.log('b='+b) //b=4
res = --b;
console.log('res=' + res +' b='+b) // res=3 b=3
总结： ++ – 符号前置效果：先自增或自减，再执行其他操作
console.log('b='+b) //b=4
res = b++;
console.log('res=' + res +' b='+b) //res=4 b=5
符号后置效果: 先执行其他操作再自增（减）
八进制和十六进制的介绍
- 二进制
var num = 0b10101101; - 八进制
var num = 0o0123 - 十进制
- 十六进制
var num = 0xef9302;
相互转换
-
十进制转其他
var number = 20; number.toString(2); //转成2进制 number.toString(8);//转成8进制 -
其他转十进制
var x='110'; parseInt(x,2); parseInt(x,8); parseInt(x,16); -
其他转其他
先用parseInt转成十进制再用toString转到目标进制
弹窗类，都会阻塞代码的执行，要慎用
-
alter(‘警告信息’) 警告弹窗
-
confirm(‘警告信息’) 警告弹窗能够确定和取消，放回bool值（true | false）
-
prompt（‘警告信息的标题’） 课输入的警告弹窗，确定返回输入的内容，取消返回空。
通过点击事件获取表单的值，并赋值到div中
-
获取和设置表单的内容。
节点.value = 值
-
获取和设计普通节点的内容
设置内容：节点.innerHTML = 内容 ; 获取内容：var con = 节点 .innerHTML;
设置内容：节点.innerText = 内容 ; 获取内容：var con = 节点 .innerText;
找到需要的节点。
var text1=document.getElementById('tex1');
绑定点击事件
btn.onclick = function(){ //事件所需要执行的代码 }
进制的转换：
*十进制：toString(其他进制):十进制转成是他进制
parseInt（其他进制，2）其他进制转成十进制
生成随机数：Math.randm（） 生成0-1的不包含1的数
生成 a 到 b 之间的随机数：res = Math.randon() * (b - a + 1) + a
灵活使用 console.log（）可以检测代码的错误，或检验逻辑是否正确。
事件的分类
鼠标类的事件：
| 事件 | 解释 | 功能 |
|---|---|---|
| onmouseover | 鼠标经过 （经过范围时触发） | |
| onmouseout | 鼠标离开 | |
| onmouseenter | 不会冒泡 | |
| onmouseleave | ||
| onblur（） | 失去焦点 （表单检验使用较多） | |
| onmouseup | 鼠标抬起瞬间 | |
| onmousedown | 鼠标按下 | |
| onclick | 鼠标点击 | |
| onmousemove | 鼠标抚摸事件（在规定区域内移动会触发） |
键盘类
| onkeydown | 在键盘上按下一瞬间 |
|---|---|
| onkeyup | 在键盘上抬起的一瞬间 |
| onkeypess | 按下非功能键的一瞬间 |
其他事件
| oninput | 内容发生改变触发 |
|---|---|
| onblur | 失去焦点的时触发 （表单验证常用事件） |
| onfocus | 聚焦的时候，光标 |
| onchange | 失去焦点时触发，联动式（多级菜单）用的多 |
程序得结构：顺序结构；循环结构；选择结构
上面代码出现问题，下面的就不执行：阻塞机制
三目运算：
var max = num1 > num2 ? num1 : num2 ;
num1 大于 num2时，max = num1，否则max = num2.
Date（） 获取完整的时间戳
var date = new Date();//获取完整的时间戳
var year = date.getFullYear();//年
var month = date.getMonth() + 1;//月 月份是从0开始的
var day = date.getDate();//日
var hours = date.getHours();//时
var mins = date.getMinutes();//分
var secs = date.getSeconds();//秒
var week = date.getDay();//星期几 从0开始：星期天 0-6;0代表星期天
switch 判断
switch(判断值){
case 值1:
//操作。。。
break;
case 值2:
//操作。。。
break;
....
default:
//上述条件都不满足时执行，不需要写break。
}
如果判断条件为区间，把判断值改为true，值1、2。·······等改成对应判断区间
循环结构
与 c语言、java的多种编程语言一样，都是大同小异。
for 循环
while
do······while
幂运算 Math.pow( num , 次数)
函数
函数：就是具有某个功能的代码块
*可以实现对代码的复用，节约代码量，提高页面性能。
*使代码简洁、明了，一个块就是一 个功能。方便使用和管理
*封装好的代码，可以在任意时间任意地方，不限次数使用
函数结构：
*声明
*声明式
function 函数名 （）{
//代码块
}
*赋值式
var sum = function （）{ //没有名字饿函数为匿名函数
}
*调用
-普通调用方式
*函数名（）；
*sum（）； //赋值式的调用，调用的地方也叫做函数的人口。
*事件驱动调用
id名字.事件 = 函数； 即可，不用括号。
函数的分类
*是否自己声明
*自定义函数：自己封装的函数
*系统函数：系统提供的，如alter（）；
*会调用即可
*函数是做什么的？
*有没有参数、参数功能是什么
*有没有返回值
*弹窗：alter（‘数据；）
*确定取消框： var res = confirm（’数据‘）
*是否有名字
*匿名函数：没有名字的函数
*有名字的函数：有函数名
*是否有参数
*有参数：实参、形参
*无参
*形式
*面向过程：普通函数
*面向对象：构造函数
*是否有返回值
*有：return
*无
函数的两种声明方式的区别
-
声明式
函数入口可以写咋在页面的任意位置，都可以调用函数体
-
赋值式
函数入口必须写在函数体下方，先声明后调用
作用域
*全局变量
作用于全局，可被子算后代继承。
*局部变量
只对局部有用，富含鼠及其以上都不能访问。
变量访问规则（取值）：就近原则，往父函数----> 爷函数方向去找，最近的那个起作用，近水楼台先得月。
两种变量的区别
*作用范围不同，外面拿不到里面的，里面的都可以拿到外面的饿
*生命期限不一样;尽量不要写全部变量。
原因：全部变量一但生成就永久存在内存中，不会消失，而局部变量声明可以在局部使用，函数结束后，局部变量会被垃圾回收机制回收，清理内容。
return 返回值后，后面的代码不会执行
伪验证码：
需求：
*随机生成4位数显示在控件中；
*点击可以切换获得一个新的随机数
*点击提交时，验证是否正确。
5390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
