JavaScript概述

1.简称JS，是一个运行在客户端浏览器的**【解释型】【弱类型】【面向对象】**脚本语言

特点：

解释型：在运行程序之前，不需要先检查语法是否正确，直接执行，但是碰到错误就会停止后续代码，比如：JavaScript、PHP、Node.js...
弱类型：变量保存的数据是可以随意的，数据类型是由数据来决定的。
面向对象编程方式
可以使用一切编辑器工具编写js代码，编辑器并不代表你的实力
可以做一切css完成不了的效果（轮播/选项卡/购物车/验证/数据渲染...）

如何使用JS

1、使用方式：

直接在HTML页面上写一个script标签，里面就可以书写你的js代码 - 上课使用<script>js代码</script>
外部js，进行引入 - 正式开发时使用1、创建一个xx.js的文件，里面书写js代码2、在HTML页面引入<script src="js文件路径">只要有了src属性，此处就不可以在写代码了</script>

2、输出方式/打桩输出：(帮助我们检查错误)

在控制台输出日志：console.log(想要输出/查看的东西);会在F12的console显示
在页面上输出日志：document.wrtie(想要输出/查看的东西); - document当前文档 write写入：在页面上输出，而且支持识别标签：如果绑定了点击事件后输出，会把页面上原来的HTML和CSS都全部替换掉
在警告弹出框输出日志：alert(想要输出/查看的东西); - 在一个浏览器自带的弹出框中输出日志，但是弹出框会卡住页面，用户只能看到一个白板

变量和常量

变量

创建后，值可以再次修改
何时使用：以后反复使用到的数据，都要提前把他保存在一个变量中，以后使用变量名，相当于就是在使用变量的值
如何使用：var 变量名=值;
特殊注意：

变量名其实不是随意的
1、不能以关键字命名 2、不能以数字开头 3、建议下划线命名法或小驼峰命名法name,age,gender,weight,height,hobby - 推荐 xingming,nianling,xingbie,tizhong,shengao,aihao - 不推荐 a,b,c,d,d1,d2,d3... - 此变量名无意义不推荐
如果你的变量名是name，不管你保存的数据是什么数据类型，都会悄悄的给你转变成一个字符串
多个变量创建可以简写： var 变量名1=值1,变量名2=值2,....;

常量

创建后，值不可以再次修改，只能设置一次值生活中的常量： PI - 3.1415926.... 一个小时60分钟.... 一天24个小时一年365/366天语法：const 常量名=值;

算术运算符：+ - * / %

%：读作取余，俗称模，两个数相除，不去商，而取除不尽的余数
判断奇偶性：num%2，结果为0说明是偶数，结果为1说明奇数
算数运算符具有隐式类型转换，默认转为数字在运算
+运算：如果左右两边但凡出现了一个字符串，那么悄悄的都转为字符串，+运算不再是+运算，而是字符串的拼接

数据类型

原始/基本/值类型：5个

Number - 数字，取值：无数个
String - 字符串，取值：无数个，必须写上'' 或 ""
Boolean - 布尔，取值：两个：true/false - 往往用于判断比较的条件处使用
Undefined - 取值：1个：undefined，创建了一个变量，但是没有赋值，默认值为undefined
Null - 空，取值：1个：null，释放变量/内存，节约内存空间

引用/对象类型：11个引用类型的对象

数据类型的转换

算术运算符的隐式转换

默认转为数字，在运算
+运算，碰上一个字符串，则为拼接
-*/%，字符串也可以转为数字，前提是纯数字组成的字符串，包含非数字字符，则为NaN

  	true -> 1
  	false -> 0
  	undefined -> NaN
  	null -> 0
  	"1000" -> 1000
  	"1000x" -> NaN

NaN：不是一个数字，但是确实是数字类型，不是一个有效数字

参与任何算术运算结果都是NaN
参与任何比较运算结果都是false，问题，不能用普通的比较运算来判断是不是NaN 解决：!isNaN(x); true->有效数字 false->NaN

强制转换

转字符串：var str=x.toString();//页面上的一切数据默认都是字符串类型 //x不能是undefined和null，undefined和null不能使用.
转数字：

```
  	var num=parseInt/Float(str);
```

  	var num=Number(x);//万能的，完全等效于隐式转换，还不如-0 *1 /1 %1

函数

提前预定好，以后可以反复使用的代码段

创建函数

function 函数名(形参列表,...){ 函数体; }
调用函数

函数名(实参列表,...); elem.onclick=function(){ 函数名(实参列表,...); }

分支结构

根据条件，选择部分代码执行

比较运算符：> < >= <= == !=；

作用：判断条件

结果：布尔值
逻辑运算符：&& || !

作用：综合比较

结果：布尔值
if(){}

if(){}else{}

if(){}else if(){}else{}

循环

根据条件，判断要不要再执行一次操作

var 循环变量

while(循环条件){
	循环体;
	循环变量的变化
}
for(var 循环变量=几;循环条件;循环变量的变化){
	循环体;
}

死循环：while(1){循环体} for(;;){循环体}

死循环要搭配上break才能停止循环

数组

创建： var arr=[数据,...]; var arr=new Array(数据,...);
访问： arr[i]
添加/替换： arr[i]=新值;
数组三大不限制：不限制类型/个数/下标越界
数组的长度：arr.length

1、访问倒数第n个元素：arr[arr.length-n];

2、向末尾添加元素：arr[arr.length]=新值;

3、缩容：arr.length-=n;//删除arr倒数n个;
遍历数组：把数组中的每个元素拿出来执行相同或相似的操作 for(var i=0;i<arr.length;i++){ arr[i];//当前次元素 }

DOM

Document Object Model：文档对象模型，专门用于操作HTML（css）文档

查找元素

标签名/class名：var elems=document/已经找到的父元素.getElementsByTagName/ClassName("标签名"); 特殊： 1、找到了：返回一个类数组集合，没找到：返回一个空集合; 2、DOM集合是不允许直接做操作的，要么下标找到某一个，要么遍历找到每一个 3、也不一定非要从document开始查找，也可以写一个自己已经找到的父元素，只会找到这个父元素下面的元素

通过关系获取元素：前提：至少要找到一个元素才能调用关系
	父：elem.parentNode;
	子：elem.children; - 集合
	第一个儿子：elem.firstElementChild;
	最后一个儿子：elem.lastElementChild;
	前一个兄弟：elem.previousElementSibling;
	后一个兄弟：elem.nextElementSibling;

操作元素

<标签名 id="" class="" title="" style="样式">内容</标签名> - 操作元素的前提就是要找到元素 1、内容： innerHTML（识别标签）/innerText（纯文本）/value（input准备的）; 获取：elem.innerHTML/innerText/value; 设置：elem.innerHTML/innerText/value="新内容";

2、属性：
	获取属性值：elem.getAttribute("属性名");
	设置属性值：elem.setAttribute("属性名","属性值"); 
		无敌的

	简化版：
	获取属性值：elem.属性名;
	设置属性值：elem.属性名="属性值";
		缺陷：1、只能操作标准属性，不能操作自定义属性
		           2、class必须写为className
	
3、样式：
	获取：elem.style.css属性名;
	设置：elem.style.css属性名="css属性值";
	特殊：1、内联样式：不会牵一发动全身，优先级最高
	           2、css属性名：如果出现了横线，去掉横线换成小驼峰命名法
	           3、获取时，只能获取到内联样式，样式表中的获取不到，暂时的一个小缺陷
	
4、绑定事件：
	在js中绑定事件：符合我们的原则：内容（html）、样式(css)、行为(js)分离
	elem.on事件名=function(){
		要做的操作
		this关键字：目前只能在事件之中使用，是一个指针，不同的场景，指向不同
		单个元素绑定事件：this->这个元素
		多个元素绑定事件：this->当前元素
	}
       
       计算字符串 - 脱字符串的衣服：
eval(str);

JavaScript 第一周学习笔记