JavaScript概述

JavaSciput简称js，是一个运行在客户端浏览器端的解释性、面向对象、弱类型的脚本语言。

js运行环境：

浏览器自动解释器，不需要自己安装环境。

解释性：

运行代码时，不需要检查语法是否正确，直接运行，遇到错误会停止运行后续代码。

弱类型：

变量保存的数据可以随意改变，比较自由。

强类型：

变量保存的数据不可以随意改变。

如何使用js

第一种

直接在html里面写<script></script>,在标签中间写js代码

第二种

创建一后缀名为js的文件，在里面书写js代码，html里面写<script src='js文件路径'></script>,标签中不能写代码。

输出日志

控制台输出

console.log(内容);

弹窗

alert();缺点：要关闭弹窗后才执行后续代码。

html页面

document.write(内容);缺点：会覆盖掉原有的html。

分支结构

if分支

语法

if(条件){代码段}满足条件就执行代码段.
if(条件){代码段1}else{代码段2}满足条件就执行代码段1，不满足条件就执行代码段2
if(条件1){代码段1}else if(条件2){代码段2}else{代码段3}满足条件1就执行代码段1，满足条件2就执行代码段2，都不满足就执行代码段3，只会执行一个代码段，所以条件的先后顺序有区别，代码从上往下执行，else if()多少由程序员决定。

switch分支

语法

switch(变量/表达式){ case 值1:代码段1; break; default:代码段2; }当变量==值1的时候就执行代码段1，默认只要1个case满足就会执行完所有的case；解决方法后面添加一个break；执行完满足的就退出，case的多少由程序员决定，default默认值，不满足case时执行

循环

for循环

语法

for(循环变量;循环条件;循环变量变化){代码段}定义一个变量，当循环变量满足条件就执行代码段，循环执行一次，变量就随变量变化而变化，当变量不满足条件时退出循环；

死循环语法

for(;;;){}

while循环

语法

while(循环条件){ 循环变量变化代码段 }和for循环原理差不多，for循环更简洁

to{}while()循环

语法

to{代码段;循环变量变化}while(循环条件)和while循环原理相同，不同处是无论循环条件满不满足都先执行一次代码段在判断是否满足。

运算符

算术运算符

+ - * / %

- * / %自带隐式转换，默认转换为数字类型，转换时遇到字符串，默认转换为NAN，NAN不是一个数字，但是是一个数字类型，任何计算碰到NAN结果都为NAN。
+两个数字类型相加，就正常计算，如果碰到其中一个为字符串类型相加，就会默认把另外一位转变为字符串类型，然后拼接。

比较运算符

> < == >= <= != === !==自带隐式转换，默认左右两边都转换为数字比较，如果遇到字符串，转换为十六进制进行比较

逻辑运算符

&&并且，必须全部条件都满足
||或者，只需要满足其中一个就行
!颠倒布尔值

赋值运算符

=

变量=参数

自增自减运算符

++ -- 用法：变量名++每一次递增1变量名--每一次递减1

强制类型转换

转换字符串

语法string(参数)万能的都可以转换

转换数字类型

语法parseInt(参数)如果是以数字开头的字符串，就只识别开头的数字到不是数字的位置。

转换布尔

语法Boolean(参数)只有6个转换为flase：0、undefined、null、""、NAN、false，其他都为true

函数function

如何使用

1.创建函数

1.声明方法

语法：function 函数名(形参){代码段}

2.量方式创建函数

语法：var 变量名=function(参数){代码段}

2.使用函数

直接在需要调用的地方，写函数名()或者变量名()就行，如果创建函数的时候有形参就必须传实参，位置和数量一一对应

返回参数

语法:function 函数名(){return 参数;}return可以忽略不写，默认返回undefind，return只负责返回，不负责保存

数组

数组创建方法

var 数组名=[参数,参数,.....]
var 数组名=new Array(参数,参数,.....)

参数可放可以不放，如果不放参数就是一个空数组，参数类型不固定，参数多少不固定，可以是数字可以是字符串，参数与参数之间用，(逗号)隔开

数组的使用

获取数组中的数据

数组名[下标]只能获取数组里面一个数据
for(i=0;i<数组名.length;i++){数组名[i]}可以获取数组所有数据

增加或者修改数组中的数据

数组名[下标]='新值'
for(i=0;i<数组名.length;i++){数组名[i]='新值'}

数组里面每一个数据都有一个下标(坐标)，下标从0开始，length是数组唯一的一个属性(数组的长度)，添加数据时如果下标处有数据就是修改，如果下标处没有数据就是增加

查找元素

document.getElementById('ID名')通过id去查找元素
document.getElementsByTagName('标签名')通过标签名去查找元素
document.getElementsByClassName('class名')通过class名去查找元素

document可以更换为已经查找到的父元素，查找到的元素为一个数组，不能直接使用

关系网

父亲：已找到元素的变量名.parentNode;//单个元素
儿子：已找到元素的变量名.children;//数组
第一个儿子：已找到元素的变量名.firstElementChild;//单个元素
最后一个儿子：已找到元素的变量名.lastElementChild;//单个元素
前一个兄弟：已找到元素的变量名.previousElementSibling;//单个元素
后一个兄弟：已找到元素的变量名.nextElementSibling;//单个元素

操作元素

变量名.innerHTML获取标签开始到标签结束的内容
变量名.value获取单标签属性value的内容
变量名.getAttribute('属性名')简化版变量名.属性名获取叫这个的属性名的标签
变量名.setAttribute('属性名')='新内容'简化版变量名.属性名='新内容'修改叫这个的属性名的标签
变量名.style.css属性获取css样式
变量名.style.css属性=新css属性修改css样式简化版只能获取标准属性，不能获取自定义属性，这种css样式修改方法只能修改内部样式，css属性-js里面会编译为减号，解决方法用小驼峰命名法如： background-color-->backgroundColor

绑定点击事件

已找到的元素的变量名.onclick=function(){} 关键词this只能在事件内部使用

如果单个元素绑定事件，this-->这个元素
如果多给元素绑定事件，this-->发生事件的元素

js第一周学习