30分钟学会JS，最简单的JavaScript学习，JavaScript(一门客户端脚本语言)

30分钟学会JS，最简单的JavaScript学习，JavaScript(一门客户端脚本语言)

1.JS概述
1）概念
js全程：JavaScript(一门客户端脚本语言)
a.js可以直接嵌入在html页面中，由浏览器解释执行，不进行预编译
b.用于向页面添加动态交互行为
c.具有与java语言类似的语法，一种网页编程语言

操作方向：
—操作DOM元素（html元素）
—操作BOM元素（浏览器对象）

2）js特点：
1.解释执行：不需要预编译，逐行执行
2.基于对象：内置了大量的现成对象

3）作用
a.实现客户端数据简单计算
b.客户端表单合法性验证
c.添加浏览器事件的突发
d.网页特殊显示效果的制作
e.实现服务器的异步数据提交

4）遵循es规范（es6）
a.严格区分大小写
b.数字、字母、下划线、$组成，不能用数字开头
c.驼峰命名法

5）写法
a.行内式（定义事件）
在事件中定义操作，直接写js代码
alert(); 弹出警告框
事件：
onclick 鼠标点击
ondblclick 鼠标双击
onmouseover 鼠标移入
onmouseout 鼠标移出
onkeydown 键盘按下
onkeyup 键盘抬起
onblur 失去焦点
onfocus 获取焦点
写法：
οnclick=“函数()”; 事件=“事件触发的函数”;

b.内部式（嵌入式）
嵌入在页面的

c.外部式(文件调用)
js代码位于单独的.js文件中（注意保存的编码）
写法：
step1：在js文件中写js代码（定义行数）
step2：将.js文件引入到当前页面中

step3：在html行内添加事件，调用函数

js注释
单行：//注释文字
多行：/注释文字/

js控制台：
不需要页面也可以直接在控制台（console）写js代码
F12（右击检查）---->打开控制台
Enter回车键：执行
Shift+Enter：换行

console.log(内容);//将内容打印到控制台

2.js组成
1）变量（var let const 无）
js是弱类型语言，使用var关键字声明变量
刑如：
var a = 1;
var s = “李四”;

拆：
var a;//a没有类型
var a=1;//初始化a才会有类型，a为number类型
a=“李四”;//a为String类型

typeof 变量名;//用来验证变量名

注意：
1.js是弱类型语言，不同的变量类型会根据数值自动给定类型
2.变量没有类型，统一用关键字var声明，变量值是有类型的
3.使用“=”进行赋值，没有初始化的变量自动取值为undefined
4.js存在变量声明提升（js会根据不同的值自动转换为对应的数据类型）

js数据类型
a.基本类型number、string，boolean
number：不区分整数和小数
 

 string：一对引号包裹的字符串（单双引都可以）
 ----单双引号只能交替引用，特殊字符需要转义   \n  \t  \s
 常用函数：
 str.indexof("",from[int index]);
 返回指定字符串在str中第一次出现的位置（从from开始第一次出现的位置）
 str.replace("","");
 将指定字符串替换为指定字符串，只替换第一个，属于不完全替换
 
 boolean:仅有两个值，true、false
 可以参与运算，自动作为数值，true值为1，false为0

b.特殊类型undefined、null
undefined
变量声明未初始化，该变量的值和类型均为undefined
null
代表"无值"或者"无对象"，可以通过一个变量赋值null来清空变量内容

c.对象类型object
内置对象 外部对象 自定义对象

数据类型转换：
a.自动转换（直接转换属于默认规则）
number+string=string
boolean+string=string
boolean+number=number
boolean+boolean=number

b.强制转换（利用类型转换函数）
toString();任何类型转换成string类型

parseInt();强转为整数，全局函数，具有截取功能

parseFloat();强转为小数，全局函数，具有截取功能

NaN:Not a Number(不是数字，不能转换成数字)

isNaN();全局函数，判断是否为非数字（true表示非数字，false表示数字）

案例1：
验证用户输入的是否位数字，若是数字则求平方，若不是数字则给出提示。

运算符
a.数学运算符 + - * / % ++ –
+：表示数学加法，或者字符串连接运输
-、*：若字符串参与，将数值字符串以数字参与运算
/：java中7/2=3，js中7/2=3.5
 

b.关系运算  > >= < <= == !=
==：只比较值，不比较类型
===：比较类型和值
 
c.逻辑运算符&&(与) ||(或) !(非) 
 短路逻辑：结果为boolean类型，true或者false
 非短路逻辑：结果为number类型（1或者0）
 
d.三元运算符（三目）
语法：判断表达式？表达式1:表达式2;

注意：js中出现的判断表达式或者调解表达式可以为任意表达式，可以为任何类型
转换规则：
非0数字、非空字符串、{}、对象----->true
0、null、“”、undefined、NaN------->false

案例2：
用户在页面输入一个值，判断是否为50，要求提升用户输入大，小，对？

js的流程控制
a.分支流程if-else ，switch-case

b.循环流程	for，while，do-while

案例3：
统计输入框重点敏感字（gun）出现的次数，将敏感字替换为"***"

调错方式：
1.在js代码中添加console.log()或者alert()
2.检查浏览器缓存的js文件，看错误信息
3.浏览器自带的断点debugger调试

内置对象：
简单内置对象：Number String
组合内置对象：Math Date Array
复杂内置对象：Funtion RegExp
 

1.Number:对象
var age=10;
var salary=new Number(10);//不常用

常用函数：
num.toFixed(n);
将数值转成为字符串，并通过四舍五入保留小数点后n位，如果位数不够补0
 
2.String:对象
var str1="abc";
var str2=new String("abc");	//不常用

常用属性与函数：
length;返回字符串长度
toUpperCase();小转大
toLowerCase();大转小
charAt(index);返回指定位置的字符串
indexOf(findStr,[fromIndex]);从指定下标位置查找字符串第一次出现的位置
lastIndexOf(findStr);返回一个指定字符串最后一次出现的位置
substring(start,[end]);截取指定下标位置的字符串（前包括后不包括）
split(byStr,[howmany]);将字符串进行拆分，得到字符串数组（几个）
replace(findStr,toStr);字符串替换（不完全替换）

组合内置对象：Math Date Array
复杂内置对象：Funtion RegExp

3.Math对象
常用函数：
Math.sqrt(a);//返回数字a的平方根
pow(a,b);//返回a的b次幂（方）
random();//返回0-1之间的随机数
round(x);//返回数字x四舍五入最接近的整数
max(x,y,z…);//找出其中最大值
min(x,y,z…);//找出其中最小值
abs(x);//返回x的绝对值
floor();//向下取整
ceil();//向上取整

4.Date对象
var date=new Date();//当前系统时间
var date1=new Date(“2009/02/05”);//指定日期时间

常用函数：
getTime();//获取当前时间的毫秒值
getDate();//获取当前日期
getDay();//获取当前一周的第几天
getFullYear();//获取当前的年份
toLocalString();//转换成字符串数据（当前时间）
setDate();//修改日期本身的值

5.Array对象（数组的数据类型可以不一致）
var arr1=[10,“张三”,30,true];//常用
var arr2=new Array(10,“张三”,30,true);
var arr3=new Array();
var arr4=new Array(5);//指定数组长度

注意：数组长度是可变的，由内部元素撑开大小

常用属性和函数：
length;获取数组长度
reverse();翻转数组
sort([函数名]);数组排序，默认规则：数组的数据首个字母排序；自定义规则：根据传的函数名排序。

6.Function对象
js中函数就是Function对象，函数名就是指向Function对象的引用，
可以直接使用函数名访问函数对象，函数名()是调用函数。

函数定义：
方式一，使用function关键字声明一个函数	
function 函数名([参数]){
   函数体；
   return 返回值；
}
函数的返回值默认返回undefined，可以使用return返回具体的值

方式二，匿名函数
var 函数名=function([参数]){
    函数体；
   return 返回值；
}

方式三，创建一个Function对象
var 函数名=new Function("参数1","参数2","函数体;");
ps：小括号里面前面是函数的参数，后面是函数体

补充：
方式四，箭头函数（c6以后）
var 函数名=([参数])=>{函数体;}

注意:在js中没有类似于java的重载，如果方法名相同，则以最后一个为准


js如果需要实现类似于java的重载效果，可以使用arguments对象实现
arguments代表当前方法被传入的所有参数形成的参数数组
arguments.length：函数的参数个数
arguments[i]:取第i个下标的元素

补充：变量的作用域（var 无 let const）
 1.var声明的变量，可以修改，不初始化输出undefined，有作用域
        定义在函数内部--->私有变量--->整个函数体
		定义在函数外部--->全局变量--->整个js（存在变量提升）
 2.let是块级作用域，函数内部使用let定义后，对函数外部无影响
 3.const定义的变量初始化以后不可以修改--->类似于java常量
 4.没有任何关键字声明的变量--->全局变量

全局函数：所有js对象都可以使用
parseInt(); parseFloat(); isNaN();
eval(“js代码”);-----执行函数
只接受合法的表达式和语句/只接受原始的字符串

7.RegExp正则对象
var reg=/正则表达式/tag;
var reg=new RegExp(“正则表达式”,“tag”);

tag标识：
g(globel):设定当前匹配为全局匹配
i(ignore):忽略匹配中的大小写检查

正则表达式的常用组成部分：
() 普通
[] 枚举，范围 [12345]/[1-5]
{} 次数，个数

/a/：不完全匹配
/^a/:以a开头
/a/:以a结尾/a/:以a结尾/^a/:以a结尾/ 
a
 /:完全匹配

常用函数：
正则对象.text(字符串);
判断一个字符串是否匹配该正则表达式，符合返回true，不符合返回false

String对象中适用正则的函数：
str.replace(reg,toStr);//替换
str.match(reg);//返回匹配字符串匹配正则的内容，形成数组
str.search(reg);//返回字符串第一次匹配正则的下标

外部对象：
BOM(Broswer Object Model):浏览器对象模型
用来访问和操作浏览器窗口，是js有能力和浏览器对话，
执行操作不与页面内容发生直接关系，没有相关标准，但被广泛支持和使用

DOM(Document Object Model):文档对象模型（html文档）
用来操作文档，定义了访问和操作html文档的标准方法，应用程序通过DOM操作，
来实现对html文档数据的操作，当页面被加载时，浏览器会创建页面的文档对象模型（DOM树），
通过可编程的对象模型，js能够创建动态的html（元素、属性、样式、事件）。
DOM常用操作：读取节点的信息、修改节点的信息、创建新节点、删除节点

1.BOM对象
window是前台最大的对象，用来表示浏览器窗口。全部的js都是全局变量、全局对象和全局函数。
比如：alert(111);等价于window.alert(111);

5个属性：
document：窗口中显示的html文档
history：浏览器窗口的历史记录
location：窗口文件地址
screen：浏览器当前屏幕
navigator：浏览器相关信息

5个对象：
Document:
History:
length:返回访问的地址个数
back();返回上一个地址
forward();进入下一个地址
go(index:index<0 回退,index>0 前进)
Location:
href:当前窗口正在浏览的网页地址
reload();重新载入当前页面
Screen:
width;实际的屏幕宽度
height;实际屏幕的高度
availWidth;可用的屏幕宽度
availHeight;可用的屏幕高度
Navigator:
userAgent;获取浏览器相关信息的属性

全局函数：
对话框：
window.alert(msg);//提示对话框（警告框）
window.confirm(msg);//确认对话框
window.prompt();//文本输入框
 

打开新窗口：
window.open(url);//打开新窗口

定时器：
a.一次性定时器
在一个设定的事件间隔后执行代码，不是函数被调用之后立即执行
var t=window.setTimeout(执行语句|函数名,time);
t表示返回已经启动的定时器对象
time表示时间间隔，单位毫秒

停止定时器：clearTimeout(t);

b.周期性定时器
以一定的时间间隔循环执行代码
var t=setInterval(执行语句|函数名,time);

停止计时器：clearInterval(t);

案例：
显示时间按钮，启动时间按钮，停止时间按钮

DOM对象（DOM树）在页面加载时候由浏览器生成的整个html文档，
操作文档中任何内容，都需要通过document

js可以创建动态的html（元素（节点）、属性、样式、事件）
js对DOM操作：查找、读取、修改、新增、删除

查找(节点)：
1.通过id查找
document.getElementById(“id名”);
如果id值错误，则返回null

2.通过标签名查找
     document.getElementsByTagName("标签名");
	 根据指定标签名返回全部元素组成数组，
	 如果标签名错误，返回长度为0的节点数组，根据下标定位具体的节点
	 
3.通过添加name属性查找
    document.getElementsByName("name属性");
	根据指定的name返回全部的元素组成数组
	
4.通过层次查找节点
    ele.parentNode
	遵循文档的上下层次结构，查找单个父节点
	
	ele.childNodes
    遵循文档的上下层次结构，查找多个子节点

5.根据选择器查找节点
    document.querySelector("选择器");
	选择符合选择器的第一个节点
	
	document.querySelectorAll("选择器");
	选择符合选择器的所有节点

6.根据class属性查找
    document.getElementsByClassName("选择器");
	根据指定的class返回全部的元素组成的数组

读取、修改（文本、属性、样式…）
innerHTML属性：
设置或者获取位于对象起始和结束标签内的文本
不解析html文本，将文本内容当成字符串打印

innerText属性：
设置或者获取位于对象起始和结束标签内的文本
只能获取解析之后的文本内容

 读取：ele.innerHTML       ele.innerText
 修改：ele.innerHTML=值    ele.innerText=值

读取、修改样式
读取：ele.style
修改：ele.style=“样式:样式值”;
ele.style.样式属性=“样式”;

注意：样式属性的写法 font-size改成fontSize（驼峰写法）

读取、修改属性
读取：

  读取：ele.getAttribute(属性名);	  
  修改：ele.setAttribute(属性名,属性值);	  

ele.属性；
修改：ele.属性=值；

获取、修改节点class(推荐)
ele.className
ele.className=值;

案例：
图片的显示和隐藏

轮播图

新增节点：
1.通过innerHTML属性给页面添加节点
ele.innerHTML=“html代码”;

2.通过函数给页面添加节点
a.创建节点
document.createElement(“节点名称”);
 

 b.添加新节点到指定位置
 追加：新节点作为父节点的最后一个子节点添加
 父节点.appendChild(新节点);
 
 旧节点为参考点，新节点位于此节点之前添加
 父节点.insertBefore(新节点,旧节点);

删除节点：
父节点.removeChild(删除的指定节点);

js的事件：
事件是指页面元素状态改变，用户在操作鼠标或者键盘时触发的动作

鼠标事件：
onclick; 鼠标单机
ondblclick; 鼠标双击
onmouseover; 鼠标移入
onmouseout; 鼠标移出
onmousedown; 鼠标按下
onmouseup; 鼠标抬起

键盘事件： e.keyCode 键盘键码值
onkeydown 键盘按键按下
onkeyup 键盘按键抬起

状态事件：
onfocus 获取焦点
onblur 失去焦点
onchange 选择（下拉框、单选框、复选框）
onsubmit 表单提交
onload 加载

事件的定义：
方式一，在元素上添加对应的事件
如：

方式二，在js中直接给元素节点添加事件
元素节点.事件名=function(){}

方式三，元素节点.事件名=函数名；

event对象
任何事件触发之后都会产生一个event对象

事件冒泡：
若子节点和父节点有相同的事件，子节点会向上触发父节点的同名事件

取消事件冒泡：e.cancelBubble=true;

**
js自定义对象
自定义对象是一种特殊的数据类型，有属性和方法封装而成

属性：指与对象有关的值，访问方式：对象名.属性名
方法：指对象可以执行的行为或者可以完成的功能
访问方式：对象名.方法名

创建自定义对象的三种方式：
方式一：直接创建对象（直接创建Object对象）
var user=new Object();

方式二："构造器"创建对象

方式三：JSON创建对象（JSON是一个轻量级数据交换格式）
JSON使用属性名：属性值的方式定义，所有的名称都要用双引号引起来，多个属性直接用逗号隔开