JavaScript 基础
循环
JavaScript 支持不同类型的循环：
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
switch
<script type="text/JavaScript">var myweek =1;//myweek表示星期几变量switch(myweek){case 1:case 2:document.write("学习理念知识");break;case 3:case 4:document.write("到企业实践");break;case 5:document.write("总结经验");break;case 6:case 7:document.write("周六、日休息和娱乐");default:document.write("想干点儿啥就干点儿啥")}</script>
for
for (语句 1; 语句 2; 语句 3){被执行的代码块}
语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
var mymoney,sum=0;//mymoney变量存放不同面值，sum总计for(mymoney=1;mymoney<=10;mymoney++){sum= sum + mymoney;}document.write("sum合计:"+sum);// 输出结果为 "sum合计:55"
while 循环遍历
和for循环有相同功能的还有while循环, while循环重复执行一段代码，直到某个条件不再满足。
while语句结构：
while(判断条件){循环语句}
使用while循环，完成从盒子里取球的动作，每次取一个，共6个球。
<script type="text/javascript">var num=0; //初始化值while (num<=6) //条件判断{document.write("取出第"+num+"个球<br />");num=num+1; //条件值更新}</script>
do…while 循环遍历
do while结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。
do…while语句结构：
do{循环语句}while(判断条件)
我们试着输出5个数字。
<script type="text/javascript">num= 1;do{document.write("数值为:" + num+"<br />");num++; //更新条件}while (num<=5)</script>
退出循环break
在while、for、do…while、while循环中使用break语句退出当前循环，直接执行后面的代码。
格式如下：
for(初始条件;判断条件;循环后条件值更新){if(特殊情况){break;}循环代码}
当遇到特殊情况的时候，循环就会立即结束。看看下面的例子，输出10个数，如果数值为5，就停止输出。
<script type="text/javascript">let num;for(num=1;num<=10;num++){if(num == 5){break;}document.write("数值为: "+num+"</br>");}</script>
考试成绩输出，如果成绩及格继续输出下个成绩，如果成绩不及格，退出并且后面成绩不输出， 我们使用break语句，退出循环。
<script type="text/JavaScript">var mynum =new Array(70,80,66,90,50,100,89);//定义数组mynum并赋值var i=0;while(i<mynum.length){if(mynum[i]<60){document.write("成绩"+mynum[i]+"不及格，不用循环了"+"<br>");break;}document.write("成绩:"+mynum[i]+"及格，继续循环"+"<br>");i=i+1;}</script>
继续循环continue
continue的作用是仅仅跳过本次循环，而整个循环体继续执行。
语句结构：
for(初始条件;判断条件;循环后条件值更新){if(特殊情况){ continue; }循环代码}
考试成绩输出，如果成绩及格继续输出下个成绩，如果成绩不及格，则不输出该成绩，我们使用continue语句完成
<script type="text/JavaScript">var mynum =new Array(70,80,66,90,50,100,89);//定义数组mynum并赋值var i;for(i=0;i<mynum.length;i++){if(mynum[i]<60){document.write("成绩不及格，不输出！"+"<br>");continue;}document.write("成绩:"+mynum[i]+"及格，输出!"+"<br>");}</script>
在一个大学的编程选修课班里，我们得到了一组参加该班级的学生数据，分别是姓名、性别、年龄和年级.
学生信息如下：
('小A','女',21,'大一'), ('小B','男',23,'大三'),('小C','男',24,'大四'), ('小D','女',21,'大一'),('小E','女',22,'大四'), ('小F','男',21,'大一'),('小G','女',22,'大二'), ('小H','女',20,'大三'),('小I','女',20,'大一'), ('小J','男',20,'大三')
接下来呢，我们要利用JavaScript的知识挑出其中所有是大一的女生的名字哦。
<script type="text/javascript">let infos = new Array;infos[0] = ['小A','女',21,'大一'];infos[1] = ['小B','男',23,'大三'];infos[2] = ['小C','男',24,'大四'];infos[3] = ['小D','女',21,'大一'];infos[4] = ['小E','女',22,'大四'];infos[5] = ['小F','男',21,'大一'];infos[6] = ['小G','女',22,'大二'];infos[7] = ['小H','女',20,'大三'];infos[8] = ['小I','女',20,'大一'];infos[9] = ['小J','男',20,'大三'];let newArr = new Array;for(let i=0;i<infos.length;i++){if(infos[i][3] == '大一'){newArr.push(infos[i]);}}let girls = new Array;for(t=0;t<newArr.length;t++){if(newArr[t][1] == '女'){girls.push(newArr[t]);}}</script>
函数
定义一个函数
function 函数名( ){函数体;}
function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。
函数调用
函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。
第一种情况:在<script>标签内调用。
<script type="text/javascript">function add(){sum = 1 + 1;alert(sum);}add();//调用函数，直接写函数名。</script>
第二种情况:
在HTML文件中调用，如通过点击按钮后调用定义好的函数。
<html><head><script type="text/javascript">function add(){sum = 5 + 6;alert(sum);}</script></head><body><form><input type="button" value="click it" onclick="add()"> //按钮,onclick点击事件，直接写函数名</form></body></html>
有参数的函数
上面add函数不能实现任意指定两数相加。其实，定义函数还可以如下格式：
function 函数名(参数1,参数2){函数代码}
注意:参数可以多个，根据需要增减参数个数。参数之间用(逗号，）隔开。
按照这个格式，函数实现任意两个数的和应该写成：
function add(x,y){sum = x + y;document.write(sum);}
x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。
例如，计算5、8、3/7、1、4两组三个数的和。
<script type="text/JavaScript">function add(x,y,z){sum = x + y +z;document.write(x+"、"+y+"、"+z+"和:"+sum+"<br/>");}add(5,8,3);add(7,1,4);</script>
函数的返回值
上面函数中，通过”document.write”把结果输出来，如果想对函数的结果进行处理怎么办呢？我们只要把”document.write(sum)”这行改成如下代码
<script type="text/JavaScript">function add(x,y,z){sum = x + y +z;return sum;}console.log(add(5,8,3));console.log(add(7,1,4));</script>
函数实例
<script type="text/javascript">//定义函数function add(x,y){return x-y;}//函数体，判断两个整数比较的三种情况function compare(m,n){let res = add(m,n);if(res == 0){return "一样大";}else if(res > 0){return m;}else{return n;}}let show1 = compare(5,4);let show2 = compare(6,3);//调用函数，实现下面两组数中，返回较大值。document.write(" 5 和 4 的较大值是:"+show1+"<br>");document.write(" 6 和 3 的较大值是:"+show2);</script>
事件
鼠标点击事件
onclick=”funcName()”
onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
比如，我们单击按钮时，触发 onclick 事件，并调用两个数和的函数add2()。代码如下：
<html><head><script type="text/javascript">function add2(){var numa,numb,sum;numa=6;numb=8;sum=numa+numb;document.write("两数和为:"+sum); }</script></head><body><form><input name="button" type="button" value="点击提交" onclick="add2()" /></form></body></html>
鼠标经过事件
onmouseover=”funcName()”
鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。
现实鼠标经过”确定”按钮时，触发onmouseover事件，调用函数info()，弹出消息框，代码如下:
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 鼠标经过事件 </title><script type="text/javascript">function message() {let info = document.getElementById("password").value;if (isEmpty(info)) {confirm("请输入密码后，再单击确定!");}}/*** 判断变量是否为空，* @param {[type]} param 变量* @return {Boolean} 为空返回true，否则返回false。*/function isEmpty(param) {if (param) {var param_type = typeof (param);if (param_type == 'object') {//要判断的是【对象】或【数组】或【null】等if (typeof (param.length) == 'undefined') {if (JSON.stringify(param) == "{}") {return true;//空值，空对象}} else if (param.length == 0) {return true;//空值，空数组}} else if (param_type == 'string') {//如果要过滤空格等字符var new_param = param.trim();if (new_param.length == 0) {//空值，例如:带有空格的字符串" "。return true;}} else if (param_type == 'boolean') {if (!param) {return true;}} else if (param_type == 'number') {if (!param) {return true;}}return false;//非空值} else {//空值,例如：//(1)null//(2)可能使用了js的内置的名称，例如：var name=[],这个打印类型是字符串类型。//(3)空字符串''、""。//(4)数字0、00等，如果可以只输入0，则需要另外判断。return true;}}</script></head><body><form>密码:<input id="password" name="password" type="password"><input name="确定" type="button" value="确定" onmouseover="message()" /></form></body></html>
鼠标移开事件
onmouseout = funcName()
鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
当把鼠标移动到”登录”按钮上，然后再移开时，触发onmouseout事件，调用函数message()，代码如下:
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 鼠标移出事件 </title><script type="text/javascript">function message() {let info = document.getElementById("password").value;console.log(123);console.log(info.length);if (info.length < 1) {confirm("请输入密码后，再单击确定!");}}</script></head><body><form>密码:<input id="password" name="password" type="password"><input name="确定" type="button" value="确定" onmouseout=message() /></form></body></html>
获取焦点事件
onfocus=funcName()
当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
如下代码, 当将光标移到文本框内时，即焦点在文本框内，触发onfocus 事件，并调用函数message()。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>获取焦点事件</title><script type="text/javascript">function message(){console.log("在此输入姓名!");}</script></head><body><form>姓名: <input type="text" class="username" value="请输入姓名" onfocus=message()></form></body></html>
失去焦点事件
onblur = funcName()
onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。
如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发onblur事件，并调用函数message()。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>失去焦点事件</title><script type="text/javascript">function message(){let name = document.getElementsByClassName("username")[0].value;if(name.length <1){alert("姓名不能为空!");}}</script></head><body><form>姓名: <input type="text" class="username" placeholder="请输入姓名" onblur=message()></form></body></html>
内容选中事件
onselect = funcName()
选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。
如下代码,当选中用户文本框内的文字时，触发onselect 事件，并调用函数message()。
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title> 内容选中事件 </title><script type="text/javascript">function message() {alert("您触发了选中事件！");}</script></head><body><form>个人简介：<br><textarea onselect=message() name="summary" cols="60" rows="5">请写入个人简介，不少于200字！
