javascript概述：
javascript概述：
简称js，是运行在【js解释器】的【解释型】【弱类型】【面向对象】脚本语言
js特点：
1、代码可用任何编辑器编写
2、解释型 - 不需要检查对错，直接运行，碰到就停止
3、弱类型语言：是 由数据 决定了 数据的类型是什么 - 更自由
1 - number数字
"1" - string字符串
变量想保存什么数据类型都可以 - 随意
面向对象语言 ：万物皆对象（属性和方法）
以后语法中：对象名.属性名;
对象名.方法名();
使用javascript：2种方式
1、在HTML页面上写上一个script标签，再在里面编写代码（内部样式)
<script type="text/javascript">
js内容
</script>
2、在外部创建一个.js文件，在里面编写属于你的js代码（外部样式，正式开发中使用)
<script src="js路径" type="text/javascript" charset="utf-8">
js内容
</script>
建议：js都写在html的最后：
1、如果js非常的耗时，用户至少能看到html和css的效果，因为首先是看到html和css的效果
2、后续我们js会操作html结构，如果js放在head中可能找不到运算
js代码：
1、注释：作用：1、提示自己/别人 2、玩 - 养成一个写注释的好习惯
单行注释：//
多行注释：/**/
2、输出方式 - 3种
作用：打桩输出 - 检查错误
*1、在F12的控制台输出日志：console.log(数字/"字符串"/变量); 不会影响到用户的体验
2、在页面上输出，支持标签：document.write(数字/"字符串"/变量); - 缺点：如果绑定了一个按钮的事件，替换掉页面上所有的已有元素
3、在弹出框输出：alert(数字/"字符串"/变量); - 缺点：卡主页面，必须关闭掉弹出框，用户才能看到页面的东西
3、*变量：
相当于一个盒子：保存数据的一个地方，变量就是一个内存
语法：var 变量名=值; 变量名是自己设置的
作用：1、经常使用的数据，可以先提前保存起来
2、数据是可能被修改的
*特殊：1、变量名不是随意的：
1、不能以数字开头 2、不能使用关键字 3、尽量的见名知意
千万不要：var aa;var ab;var ac; 不要用记不住的
千万不要：var xingming; - 逼格低 不要用拼音
尽量要：var name;var age;var gender; 用英文
变量名有一个很特殊name - 不管你保存的数据是什么，最后都会变成一个字符串
2、其实想要创建一个变量只需要：var 变量名;就已经创建好了 - 不赋值也没关系，至少创建了不会报错了，但是一般来说我们都要立马跟上赋值操作，因为默认值undefined是无用
3、如果创建了多个变量，可以省略掉中间var，分号都要换为逗号简写
例如：var a,b,c,d;
4、其实var关键都可以不写，但是不推荐 - 导致全局污染
* 5、=：赋值符号，把=右边的数据保存在=左边的变量名之中，左边就单单纯纯的是一个变量名而已，不会变成变量的值
4、常量：一旦创建值不可以被修改
语法：const 常量名=值; 常量名自己取；
5、****数据类型：不同的数据类型的，做的操作也是不一样的
1、原始/基本/值类型：5个
Number - 数字，取值：无数个
String - 字符串，取值：无数个
Boolean - 布尔值，取值：2个，表示一个【判断的结果】，true（真） 、 false（假）
Undefined - 取值只有一个：undefined - 变量的默认值，undefined没有任何作用
Null - 空，取值1个：null，作用，用完了的变量（内存），可以用null释放 - 释放内存节约
2、引用/对象类型：11个对象（属性和方法） 这个我忘了
6、*算术运算符：+ - * / %
m%n：取余，俗称模，m/n不取商，而且除不尽的余数
作用：
1、*判断奇偶性
num%2 == 1 奇数
num%2 == 0 偶数
2、获取一个数字的后n位
1234%10 -> 4
1234%100 -> 34
1234%1000 -> 234
3、判断一个数字永远不超过几
num%5 -> 结果永远不会超过5
***算术运算其实具有隐式数据类型转换，默认都会转为数字，运算
特殊：+运算，如果碰到一个字符串，那么两边的数据都会悄悄转换字符串，然后+运算变为拼接操作 解决操作：把字符串转为数字
- * / %其实字符串也可以转为数字，必须是纯数字组成的字符串才行，只要包含一个非数字字符结果则为NaN
（*扩展：
1、用户输入框：var user=prompt("提示文字","默认值");
2、查看数据类型：typeof(变量/值/表达式);
3、页面上获取到的数据类型都是字符串，如果你就想转为数字：
parseInt(str) -> 转为整数
parseFloat(str) -> 转为浮点数 有一位小数点
4、分支：作用：判断
语法：1、一个条件一件事，满足就做，不满足就不做 但是后续代码还是会执行的
if(判断条件){
操作;
}
2、一个条件两件事，满足就做第一件，不满足就做第二件
if(判断条件){
操作1;
}else{
默认操作;
}
3、多个条件多件事，满足谁就做谁
if(判断条件1){
操作1;
}else if(判断条件2){
操作2;
}else{
默认操作
}
）
数据类型的转换
1、隐式转换：我们程序员看不见，悄悄执行的转换操作
*算术运算符：+ - * / %
*具有隐式转换：默认两边都转为数字，再运算
*特殊：1、+运算，碰上一个字符串，两边都会悄悄的转为字符串，变为拼接操作
2、- * / % 要是纯数字的字符串也可以转为数字，但是包含了非数字字符则为NaN
3、xx转为数字的话，会转为什么结果
true->1
false->0
undefined->NaN
null->0
"100"->100
"100px"->NaN
4、NaN：Not A Number：不是一个数字，但是确实是number类型（不是有效的数字）
全是缺点：1、NaN参与任何算术运算，结果仍为NaN
2、NaN参与任何比较/关系运算，结果都为false，甚至不认识自己 - 带来了一个问题：我们没有办法使用普通的关系/比较运算去判断x是不是NaN
解决：!isNaN(x); 判断是不是有效数字
作用：防止用户输入的必须是一个有效数字
结果：true->是有效数字 false->是NaN
2、显式/强制转换：隐式转换出来的结果不是我们想要的，程序员可以手动调用一些方法进行数据类型的转换
1、转字符串：xx.toString();//转为字符串，但是undefined和null不支持，undefined和null不能使用.操作
基本不会使用，页面上获取到的数据始终都是一个字符串
2、*转数字：
1、*语法：parseInt(str/num)
执行原理：从左向右依次读取每个字符，碰到非数字字符则停止，并且不认识小数点，如果一来就不认识则为NaN
console.log(parseInt(35.45));//35
console.log(parseInt("35.45"));//35
console.log(parseInt("3hello5"));//3
console.log(parseInt("35px"));//35
console.log(parseInt("hello35"));//NaN
console.log(parseInt(true));//NaN
2、*语法：parseFloat(str);
执行原理：几乎和parseInt一直，但是认识第一个小数点
console.log(parseFloat("35.45"));//35.45
console.log(parseFloat("35.45.45"));//35.45
console.log(parseFloat("35.4abc5.45"));//35.4
console.log(parseFloat("35.45px"));//35.45
以上两个API作用：强制转为数字的同时并且去掉单位
3、语法：Number(x);//万能的，任何人都可以转为数字，垃圾：其实就是隐式转换，还不如隐式转换简单：
还不如：*1 /1 -0
函数：Function基础：也称之为方法
url(图片路径)：完成了一个根据图片路径显示图片的功能
rotate(90deg)：完成了一个根据角度值顺时针旋转45度的功能
js的自定义函数：完成了一个......功能
1、什么是函数：函数(Function)是一段被【预定义好的】，可以【反复使用】的代码
是个独立的功能体，可以将【若干】的代码放在里面
2、语法：2部分
1、创建函数/方法
function 自己取得函数名(){
//若干代码段
}
2、调用函数/方法
自己取的函数名();//程序员写几次就调用几次
小技巧：绑定在页面元素之上，用户来触发了
<elem οnclick="js语法"></elem> 点击触发
3、什么东西适合放在函数之中？
1、不希望打开页面立刻执行，等用户来触发
2、不希望只执行一次，可以反复触发
3、本身就是一个独立的功能体：你写的每一个作业都是一个独立的功能体
4、建议：以后每一个作业都要封装为一个函数：函数在js中具有第一等公民的地位，函数中的变量都是会自动释放的
4、带有参数的函数：
榨汁机 - function：功能：榨汁
原材料 - 参数：放入一个苹果、梨子、香蕉...
如何创建带参数的函数：
function 函数名(形参,...){//形参（形式参数）其实就是一个变量，只不过不需要var
函数体;
}
调用带参数的函数的时候：
函数名(实参);//实际参数
function zzj(fruit){
console.log("榨"+fruit+"汁");
}
zzj("苹果");
zzj("梨子");
强调：
1、传入实参的顺序一定要和形参的顺序对应上
2、函数不一定非要有参数：1、如果你的操作是固定的，则不需要传递参数
2、根据传入的实参不同，做的操作略微不同，则需要添加参数
3、***分支结构：
1、程序的结构：3种
1、顺序结构：默认结构，从上向下依次执行每一句代码
2、分支结构：根据判断条件，选择一部分代码去执行（只会走一条路）
3、循环结构：根据判断条件，选择是否重复执行某一段代码
2、比较/关系运算符：> < >= <= == !=
结果：以上六个运算符结果都为布尔值：true、false
往往比较运算符出现在分支、循环的判断条件之中
其实关系运算符也具有隐式转换：
3、if结构：
1、一个条件一件事，满足就做，不满足就不做
if(判断条件){
操作
}
2、一个条件两件事，满足就做第一件，不满足就做第二件
if(判断条件){
操作1
}else{
默认操作
}
3、多个条件多件事，满足谁就做谁
if(条件1){
操作1
}else if(条件2){
操作2
}else if(条件3){
操作3
}else{
默认操作
}
强调：
1、最后的else是可以省略的，但如果条件都不满足，则分支白写
2、条件有时候写的顺序需要注意，因为分支只会走一条路
扩展：逻辑运算符：
&&：与（并且）
只有全部条件都为true，最后结果才为true
只要有一个条件为false，最后结果就为false
||：或
只有全部条件都为false，最后结果才为false
只要有一个条件为true，最后结果就为true
!：颠倒布尔值：
!true -> false
!false -> true
循环结构：
1、问题：在控制台打印输出10000句hello world
console.log("1hello world")
...
console.log("10000hello world")
2、什么是循环：【反复执行相同 或 相似的操作】
循环三要素：
1、循环条件：开始、结束：重复执行的次数
2、循环体：循环的操作：要干什么
3、循环变量，并且 变量需要不断的变化
3、while循环：
语法：
var 循环变量=几;
while(循环条件){
循环体;
循环变量变化一下;
}
执行原理：先判断循环条件，如果条件为真，则执行【一次】循环体
然后再判断循环条件，如果条件为真，则执行再【一次】循环体
...
直到条件为假，循环才会结束
注意：循环是一次一次执行的 - 并不是同事执行的，只不过计算机的CPU计算速度比较快
死循环：永远不会结束的循环 - 保存死循环也是可以退出循环
何时：不确定要执行的具体次数，但往往死循环会搭配上break进行退出
while(true){
循环体
}
循环退出语句：break; - 出现循环之中
上午练习：
1、求1-1000之间所有数字的和
2、求1-1000之间所有奇数的和
3、猜数字小游戏：要防止恶意输入、添加生命、难度选择
扩展：随机整数的公式：parseInt(Math.random()*(max-min+1)+min);
4、*for循环：while能做，for也能做，而且for看上更加的简单/简洁
语法：for(var 循环变量=几（循环的开始）;循环条件（循环结束的条件）;变量的变化（怎么循环){
循环体（循环的内容）
}
特殊：
1、死循环：for(;;){循环体} - 两个分号一个不能少
2、循环变量处其实可以创建多个变量
3、也支持break
总结：
1、while：一般都不用，何时使用：不确定循环次数的时候
2、for：常用，确定循环次数时
2、*****数组：
1、问题：保存1000个人的姓名? - 如果是以下这种写法，我们开辟1000个内存空间
var name1="张三1"
...
var name1000="张三1000"
解决：数组：多个数据/元素组成的一个集合，保存在一个变量中
数组中的元素都是按照线性顺序来排列，除了第一个元素，每个元素都有一个唯一的前驱元素
除了最后一个元素，每个元素都有一个唯一的后继元素
*数组中每个元素都有一个唯一的位置序号，称之为【下标】，用来表示数组中的每一个元素
下标是从0开始，到最大长度-1
2、创建数组：2种方式：
1、*直接量方式：
var arr=[];//空数组
var arr=[数据,数据,...];
2、构造函数方式：此方法还有一个坑，但是我不说
var arr=new Array();//空数组
var arr=new Array(数据,数据,...);
3、*访问数组：
1、获取数据
数组名[下标];
特殊：1、下标越界，获取到的是一个undefined
2、添加数据
数组名[下标]=新数据;
特殊：1、如果下标处已有元素，则为替换
2、如果下标越界，会导致你的数组变成一个稀疏数组，中间就会出现很多的undefined，而且下标也不再连续
结论：数组具有3大不限制：
1、不限制元素的长度
2、不限制元素的类型
3、不限制下标越界 - 但是这个操作并不是好事情，强烈不推荐下标越界
4、*数组对象 - 唯一属性
正是因为我们自己数下标容易数错，提供了一个属性：语法：数组名.length - 获取到数组的长度
三个固定套路：
1、向末尾添加元素：arr[arr.length]=新值
2、获取倒数第n个元素：arr[arr.length-n];
3、删除末尾的n个元素：arr.length-=n
5、*遍历数组：将数组中的每个元素都取出来 执行 相同 或 相似的操作
公式：for(var i=0;i<arr.length;i++){
arr[i];//当前次获取到的元素
}
javascript由三部分组成
1、ECMAScript（ES3/5/6） - 核心语法：前三天学习的内容 - 内功心法（以后可能做任何操作都离不开他们）
2、DOM - Document Object Model：文档 对象 模型 - 操作文档（HTML） - 外功招式（特效）
3、BOM - Browser Object Model：浏览器 对象 模型 - 操作浏览器 - 有重点但是用处不大
DOM概念：
DOM树：把HTML看做了是一个倒挂的树状结构，但是树根并不是你们理解的HTML，而是document对象（属性和方法）
document对象不需要程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document
有一些属性和方法等待我们去学习
注意：DOM会把页面上的所有的元素都看做是一个DOM对象、DOM节点、DOM元素 - 都是同一个意思
3、获取元素：
2、*通过 标签名：
语法：var elems=document/parent.getElementsByTagName("标签名");
返回：是一个DOM集合 - 是一个类数组对象：类似数组，也可以使用下标、length、遍历
特殊：
1、一个DOM集合是不允许直接做操作的，除非加下标得到某一个 或 遍历得到所有人，才能做操作
2、如果没找到，返回的是一个空集合
3、此方法不一定非要写document,也可以写一个parent（已经找到的某个父元素）
如果是写的document，则会找到页面上所有的标签
而写的是parent，只会找到parent下面的所有的标签
*通过 class名：
语法：var elems=document/parent.getElementsByClassName("class名");
返回：是一个DOM集合 - 是一个类数组对象：类似数组，也可以使用下标、length、遍历
特殊：
1、一个DOM集合是不允许直接做操作的，除非加下标得到某一个 或 遍历得到所有人，才能做操作
2、如果没找到，返回的是一个空集合
3、此方法不一定非要写document,也可以写一个parent（已经找到的某个父元素）
如果是写的document，则会找到页面上所有的标签
而写的是parent，只会找到parent下面的所有的标签
2、*通过 节点之间的关系 获取元素
前提：至少先要找到一个元素，才能找关系
1、父元素：xx.parentNode - 单个元素
2、子元素：xx.children - 集合
3、第一个儿子：xx.firstElementChild - 单个元素
4、最后一个儿子：xx.lastElementChild - 单个元素
5、前一个兄弟：xx.previousElementSibling - 单个元素
6、后一个兄弟：xx.nextElementSibling - 单个元素
4、操作元素：<elem 属性名="属性值" style="样式">内容<elem/>
1、内容：
1、*innerHTML：用于操作双标签，能够识别标签
获取：elem.innerHTML;
设置/修改：elem.innerHTML="新内容";
2、innerText：用于操作双标签，不能识别标签
获取：elem.innerText;
设置/修改：elem.innerText="新内容";
3、*value：用于操作input
获取：elem.value;
设置/修改：elem.value="新内容";
2、*属性：
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名","属性值");
简化版：
获取属性值：elem.属性名;
设置属性值：elem.属性名="属性值";
简化版注意：两个小缺点：
1、class必须写为className
2、只能操作标准属性，不能操作自定义属性
建议：开发中优先使用简化版，简化版实现不了的时候在用复杂版代替
3、样式：
内联样式：
优点：1、优先级最高 - 保证js用户触发一定会生效
2、不会牵一发动全身 - 只会操作当前元素
缺点：1、获取样式时，一定要保证此样式在内联样式中
获取样式：elem.style.css属性名;
设置样式：elem.style.css属性名="css属性值";
特殊：css属性名的写法，如果有横线要去掉横线，变为小驼峰命名法
原来CSS JS：
background-color backgroundColor
width width
border-top-width borderTopWidth
4、*绑定事件：
为什么不用以前的绑定方式了呢？
保证HTML和CSS和JS分离
语法：elem.οnclick=function(){
点击后要执行什么代码
***this关键字：
单个元素绑定事件，this->这个元素
多个元素绑定事件，this->当前触发事件的元素
}
扫一扫
156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
