第一章 JavaScript基础

1、什么是JavaScript？

HTML+CSS完成了静态页面的展示，但是想要完成更好更复杂的用户交互和数据交互及展示，就需要使用JavaScript。JavaScript是基于对象和事件驱动，并具有安全性能的脚本语言

2、JavaScript的特点

a.可以向HTML页面中添加交互行为

b.脚本语言，语法与java语法类似

c.解释性语言，边执行边解释

3、JavaScript的组成

a.ECMAScript  标准

b.DOM  Document  Object  Model    文档对象模型

c.BOM   Browser    Object  Model    浏览器对象模型

4、JavaScript的基本结构

html  <script>document.write("初识JavaScript");</script>  

5、执行原理

在浏览器客户端输入一个网址，这个页面是一个包含有JavaScript的HTML页面，发送到服务器，服务器接收并下载这个包含有JavaScript的HTML页面，然后返回给浏览器客户端

6、引入JavaScript的方式

a.内部

html<script></script>  

注：可以放在任意地方，前提是要确保这段js已加载

b.外部

html  <script src="js路径" type="text/javascript"></script> 

c.行内

html<input type="button" name="btn" value="弹框" onclick="javascript:alert('你好javascript')"/>  

7、什么是变量？

在内存中开辟空间保存数据

用var声明，var是用于声明变量的关键字，变量根据值确认变量类型

javascript  var width; width = 5; //先声明在赋值  

javascript  var width = 5;  //同时声明并赋值  

javascript  width = 5;  //不声明直接赋值，不推荐使用  

8、数据类型？

undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。

Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回 一个不存在的对象

number     不论整数还是浮点数，返回的都是number类型 

boolean     布尔类型，返回true或false

string       不论单个字符还是字符串，返回的都是string类型    var ss='s' 表示的还是string类型

object       对象

注意：跟java有区别

9、typeof()运算符

用来检测变量是什么数据类型

例：

javascript var a = 10;  var b = "Joy";  var x,y,z =10; var arr = new Array(3);  

javascript
typeof(a);         //number

typeof(b);         //string

typeof(x);         //undefined

typeof(z);         //number

typeof(null);      //object

typeof(arr);       //object

typeof(true);      //boolean

10、数组

数组是一个变量，开辟了一连串的空间存储一连串相同数据类型的数据

javascript
var arr = new Array(5);   //声明一个名为arr，长度为5的数组

var arr = ["aaa","bbb","ccc","ddd","eee"];  //给数组arr赋值

arr[0] = "aaa";      //取出数组中的第一个值

a.数组的属性

javascript  arr.length   //获取arr数组的长度  

b.数组的方法

javascript  arr.join()  //把数组元素放到字符串中，并用连字符连接起来    var arr = \["aaa","bbb","ccc"\];    var arrList = arr.join("-");    document.write(arrList);   //aaa-bbb-ccc    arr.sort()       //数组排序    arr.push()      //向arr数组添加一个元素  

11、运算符

javascript为了满足逻辑过程中的计算和比较等提供了丰富的运算符

| 运算符类型 |                            运算符                            |
| :--------: | :----------------------------------------------------------: |
| 算术运算符 |                   +  -  *  /  %   ++   --                    |
| 赋值运算符 |                          =  +=  -=                           |
| 比较运算符 | > <  >=  <=  ==  !=  ===(先判断类型再判断值)   !==(先判断类型再判断值) |
| 逻辑运算符 |                &&(并且)   \|\|(或者)  ！(非)                 |

12.控制语句

a.条件句

javascript  if(条件){   //JavaScript代码  }else{   //JavaScript代码  }  //当满足if中的条件时，执行if块代码  //不满足条件时，执行else块代码  

  javascript  switch（表达式）{   case 常量：   //JavaScript代码   break；   case 常量：   //JavaScript代码   break；   default:   //JavaScript代码   break;  }  //根据switch后的表达式去匹配在case后的的常量，匹配后执行当前case代码  //遇到break会跳出当前switch结构  //不写break的后果是下面的case不用匹配，直接执行  //default块是以上case块都没有匹配成功时执行的代码  

b.循环

javascript  for(初始值；条件；增量){     //JavaScript代码    }  //for循环由四部分组成一个常规循环，初始值是循环的初始状态，条件是循环的结束条件，增量是修改循环的初始状态  //当满足循环条件时，执行for循环内的代码块  //增量不写会发生死循环的情况    

  javascript  while（条件）{   //JavaScript代码    }    //while循环中的条件符合时，进入循环    

  javascript  do{   //JavaScript代码    }while(条件)     //先执行一遍代码，再判断循环条件是否符合，符合则执行循环体  

javascript  for(var i in 数组名){   //JavaScript代码    }    //在for循环的基础上，简化了for循环的表达式部分  //针对遍历数组、集合的for循环  //数组中有多少元素，就循环几遍，i代表每次循环的下标  

13、注释

a.单行    //

b.多行    / JavaScript代码  

14、输入/输出

a.输出 document.write(); alert();

b.输入 prompt（"请输入一个数",""）;

15、语法约定

a.javascript严格区分大小写

b.遵循变量命名的规范

c.每句后边写分号

16、程序调试

a.alert()

b.浏览器的开发者工具模式，结合alert（），打断点调试

17、函数

a.系统函数

 javascript   parseInt（“12aa”）;   //12  把字符串转换成整数     parseFloat（“33aa1.34”）//  33  把字符串转换成浮点数     var a = "33vvv";     var b = "33.2aa3";     var c = "2";     document.write(parseInt(a)+","+parseInt(b)+","+parseInt(c));//33,33,2     document.write(parseFloat(a)+","+parseFloat(b)+","+parseFloat(c));//33,33.2,2      var d="你好";     isNaN(d)      //false  判断是否是非数值，返回true或false   

b.自定义函数

javascript
function study(){
//JavaScript代码
}

1 .有参

javascript  function study(参数1，参数2，参数......){    //JavaScript    }  

例：

javascript <input type="button" value="按钮" onclick="study(prompt('请输入一个数'))"/>  

javascript
<script>
function study(num){
document.write("我爱JavaScript");
}
</script>

2 .无参

javascript
function study(){
//JavaScript代码
}

例：

javascript  <input type="button" value="按钮" onclick="study()"/>  <script>   function study(){     document.write("我爱JavaScript");     }    </script>

调用函数：一般是跟表单元素的事件结合使用

18、变量的作用域

a.局部变量

说明：声明在函数中，只能在当前函数中使用，其他函数访问不到。

b.全局变量

说明：声明在函数外，所有函数都能使用。

19、事件

当用户进行一些鼠标或键盘操作或者页面发生某些情况时，我们可以对该操作进行捕捉，并进行对应的处理响应

名称 说明

onload 一个页面或一幅图像完成加载

javascript window.onload=function(){};

onlick 鼠标单击某个对象

javascript domObj.onclick=function(){}

onmouseover 鼠标指导移到某元素上

javascript domObj.onmouseover=function(){}

onkeydown 某个键盘按键被按下

javascript domObj.onkeydown=function(){}

onchange 域的内容被改变

javascript domObj.onchange=function(){}