一、JavaScript的概念和执行原理
JavaScript的概念和执行原理
（1）JavaScript也是程序语言中的一种，但是JavaScript是嵌入到HTML语言中，直接通过浏览器运行。
（2）JavaScript的执行原理：当客户端向服务器端请求某个页面时，服务器端将整个页面中包含JavaScript的脚本代码作为响应内容，发送回客户端机器，客户端浏览器根据发回的网页文件从上往下逐行读取并解析其中的html或者脚本代码。
0001.PNG
二、JS代码编写位置
（1）直接写在页面标签里面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>脚本代码的位置：直接写在页面标签里面</title>
<!--脚本代码的位置：直接写在页面标签里面-->
<script type="text/javascript">
alert("欢迎进入JavaScript编程的世界！");
</script>
</head>
<body>
</body>
</html>
（2）写在外部JS文件中
外部的JS文件:
alert("欢迎进入JavaScript编程的世界！");
HTML文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>脚本代码的位置：写在外部js文件中</title>
<!--脚本代码的位置：写在外部js文件中-->
<script type="text/javascript" src="js/Demo02.js"></script>
</head>
<body>
</body>
</html>
三、将JS脚本代码作为A标签的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>将脚本代码作为a标签的属性值</title>
</head>
<body>
<!--将脚本代码作为a标签的属性值-->
<a href="javascript:document.write('我就知道你喜欢我');">喜欢我就点击我吧</a>
<br/><br/>
<a href="javascript:alert('我就知道你喜欢我');">喜欢我就点击我吧</a>
</body>
</html>
四、JS中数据类型和变量
（1）JavaScript是弱类型语言，在定义变量的时候不用确定数据类型，在赋值的时候根据值自动确定其类型 。
（2）数据类型有：undefined，number，boolean，string，object
（3） var是声明变量的关键字 。
（4）给变量命名的时候，需要遵循如下规则：
【1】 第一个字符必须是一个字母、下划线（_）或一个美元符号$。
【2】 后面的字符可以是字母、下划线、美元符号或数字。
【3】 区分大小写。
【4】 不能与关键字同名 ，如while、for和if等。
代码演示：
var msg;
alert(typeof msg); //undefined类型
alert(typeof xyz); //undefined类型
var num = 211; //number类型
alert(typeof num);
var num = 211.11; //number类型
alert(typeof num);
v = 2;
var y = 'a';
var r = v * y;
//结果为not a number,但是数据类型仍然为number类型
alert(r); //NaN
alert(typeof r); //number类型
var flag = true; //boolean类型,取值只能是true或者false
alert(typeof flag);
var str = "JavaScript"; //string类型
alert(typeof str);
var str = 'JavaScript'; //string类型
alert(typeof str);
var now = new Date(); //获取当前时间:object类型
alert(now + "\n" + typeof now);
var obj = null;
alert(typeof obj + "\n" + obj); //object类型
var arr = [11,22,33,44]; //object类型
alert(typeof arr);
//创建你自己的个人资料，把各项资料放入相应变量中，并使用表格打印出来。
//个人资料包括 学号、姓名、出身年月、身份证号码、HTML考试成绩
var myNo = "001";
var myName = "刘德华";
var myBirth = "1977-8-7";
var myCode = "420109197708071547";
var htmlScore = 95;
document.write("<table border='1' align='center'>");
document.write("<tr>");
document.write("<td>学号</td> <td>姓名</td> <td>出身年月</td> <td>身份证</td> <td>HTML考试成绩</td>");
document.write("</tr>");
document.write("<tr>");
document.write("<td>"+myNo+"</td>");
document.write("<td>"+myName+"</td>");
document.write("<td>"+myBirth+"</td>");
document.write("<td>"+myCode+"</td>");
document.write("<td>"+htmlScore+"</td>");
document.write("</tr>");
document.write("</table>");
五、运算符
（1）算数运算符
算术运算符用在数学表达式中，它们的作用和在数学中的作用一样。下表列出了所有的算术运算符。
表格中的实例假设整数变量A的值为10，变量B的值为20：
| 操作符 | 描述 | 例子 |
|---|---|---|
| + | 加法 - 相加运算符两侧的值 | A + B 等于 30 |
| - | 减法 - 左操作数减去右操作数 | A – B 等于 -10 |
| * | 乘法 - 相乘操作符两侧的值 | A * B等于200 |
| / | 除法 - 左操作数除以右操作数 | B / A等于2 |
| ％ | 取余 - 左操作数除以右操作数的余数 | B%A等于0 |
| ++ | 自增: 操作数的值增加1 | B++ 或 ++B 后B等于 21（区别详见下文） |
| -- | 自减: 操作数的值减少1 | B-- 或 --B 后B等于 19（区别详见下文） |
其中+运算符，除了数学运算，还可以进行数据的拼接，例如：
var a = 10;
var b = "10";
alert(a+b); //此处不进行数学运算，进行拼接，结果将打印1010
此处和强类型语言不同，强类型语言例如C#，此结果应该为2，但是在JS中结果为2.5，例如：
var a = 5;
var b = 2;
alert(a/b); //将打印结果2.5
自增++运算符和自减--运算符，符号写在前面和后面的区别如下：
++在前，先自增，在运算； ++在后，先运算，在自增 （--运算符同理）
var a = 10;
++a; //或者a++,执行结果一样
alert(a); //打印11
var a = 10;
var b = a++;
alert(a); //打印结果11
alert(b); //打印结果10
var a = 10;
var b = ++a;
alert(a); //打印结果11
alert(b); //打印结果11
（2）赋值运算符
| 操作符 | 描述 | 例子 |
|---|---|---|
| = | 简单的赋值运算符，将右操作数的值赋给左侧操作数 | C = A + B将把A + B得到的值赋给C |
| + = | 加和赋值操作符，它把左操作数和右操作数相加赋值给左操作数 | C + = A等价于C = C + A |
| - = | 减和赋值操作符，它把左操作数和右操作数相减赋值给左操作数 | C - = A等价于C = C - A |
| * = | 乘和赋值操作符，它把左操作数和右操作数相乘赋值给左操作数 | C * = A等价于C = C * A |
| / = | 除和赋值操作符，它把左操作数和右操作数相除赋值给左操作数 | C / = A，C 与 A 同类型时等价于 C = C / A |
| ％= | 取模和赋值操作符，它把左操作数和右操作数取模后赋值给左操作数 | C％= A等价于C = C％A |
例如：
var a = 1; //正确
// =赋值运算符左边只能是变量，不能是数据常量。
1 = a; //错误
a + 1 = 2; //错误
var a = 10;
var b = 5;
a += b; // 等价 a = a + b;
alert(a); //打印15
alert(b); //打印5
（3）关系运算符
表格中的实例整数变量A的值为10，变量B的值为20：
| 运算符 | 描述 | 例子 |
|---|---|---|
| == | 检查如果两个操作数的值是否相等，如果相等则条件为真。 | （A == B）为假。 |
| != | 检查如果两个操作数的值是否相等，如果值不相等则条件为真。 | (A != B) 为真。 |
| > | 检查左操作数的值是否大于右操作数的值，如果是那么条件为真。 | （A> B）为假。 |
| < | 检查左操作数的值是否小于右操作数的值，如果是那么条件为真。 | （A <B）为真。 |
| >= | 检查左操作数的值是否大于或等于右操作数的值，如果是那么条件为真。 | （A> = B）为假。 |
| <= | 检查左操作数的值是否小于或等于右操作数的值，如果是那么条件为真。 | （A <= B）为真。 |
=与==的区别：
a = b; //代表将b的值赋给a
a == b //代表比较a和b的值是否相等
（4）逻辑运算符
下表列出了逻辑运算符的基本运算，假设布尔变量A为true，变量B为false
| 操作符 | 描述 | 例子 |
|---|---|---|
| && | 称为逻辑与运算符。当且仅当两个操作数都为真，条件才为真。 | （A && B）为假。 |
| | | | 称为逻辑或操作符。如果任何两个操作数任何一个为真，条件为真。 | （A | | B）为真。 |
| ！ | 称为逻辑非运算符。用来反转操作数的逻辑状态。如果条件为true，则逻辑非运算符将得到false。 | ！（A && B）为真。 |
例如：
var a = 20;
var b = 500;
alert(a > b && a > 0); //打印false
alert(a > b || a > 0); //打印true
alert(!(a > b || a > 0)); //打印false
（5）三目运算符
该运算符有3个操作数，并且需要判断布尔表达式的值。该运算符的主要是决定哪个值应该赋值给变量。
条件表达式 ？结果1 ：结果2 （表达式成立，执行结果1，否则执行结果2），例如：
var a = 10;
var b = 20;
var c = a > b ? a : b;
alert(c); //此处打印20
六、选择分支结构
（1）IF单分支结构
获取当前日期，判断当前日期是否为自己的生日，如果是则提示"生日快乐"
var now = new Date();
var nowMonth = now.getMonth();
var nowDay = now.getDate();
if(nowMonth+1==6 && nowDay==22) //月份从0开始编号
alert("生日快乐！");
（2）IF双分支
获取当前时间，判断是否为星期六，星期日，如果是提示"我要出去浪",否则提示"努力工作"
var now = new Date();
var nowWeek = now.getDay(); //星期从0开始编号，并且星期天是一个星期第一天
if(nowWeek == 0 || nowWeek == 6)
alert("我要出去浪!");
else
alert("努力工作!");
（3）if多分支
获取当前时间，如果0点-12点提示：早上好；如果12点-14点提示：中午好；如果14点-18点提示：下午好；剩下时间提示：晚上好。
var now = new Date();
var nowHour = now.getHours();
if(nowHour < 12)
alert("早上好!");
else if(nowHour < 14)
alert("中午好!");
else if(nowHour < 18)
alert("下午好!");
else
alert("晚上好!");
（4）if嵌套
获取当前时间：
如果是工作日（星期一到星期五）
10点之前提示："开会中..." 10点之后提示:"努力敲代码中..."
如果是双休日（星期六星期天）
10点之前提示："还在睡梦中..." 10点之后提示:"游戏中..."
var now = new Date();
var nowWeek = now.getDay();
var nowHour = now.getHours();
if(nowWeek >=1 && nowWeek <=5)
{
if(nowHour < 10)
alert("开会中...");
else
alert("努力敲代码中...");
}
else
{
if(nowHour < 10)
alert("还在睡梦中...");
else
alert("游戏中...");
}
（5）switch case结构
获取当前时间星期几，自动提示当天的课表信息，课表如下：
星期一：语文、体育、英语
星期二：数学、化学、计算机
星期三：政治、历史、物理
星期四：语文、数学、英语
星期五：计算机、英语、美术
星期六和星期天：休息
var now = new Date();
var nowWeek = now.getDay();
switch(nowWeek)
{
case 1: alert("语文、体育、英语"); break;
case 2: alert("数学、化学、计算机"); break;
case 3: alert("政治、历史、物理"); break;
case 4: alert("语文、数学、英语"); break;
case 5: alert("计算机、英语、美术"); break;
default: alert("休息"); break;
}
七、循环结构
（1）while循环和do...while循环
while循环打印1-10.
var i = 1;
while(i <= 10)
{
document.write(i+"<br />")
i++;
}
do...while循环打印1-100.
var i = 1;
do
{
document.write(i+"<br />")
i++;
}while(i <= 10);
while和do...while区别：
【1】while先判断后执行,do...while先执行后判断
【2】如果将上述程序修改成var i = 11,while循环将一次都不执行,而do...while会至少执行一次。
利用while或do...while循环解决如下问题：
假设迟到一次罚款10元，第二次罚款20元，第三次40元，依次翻倍罚款，计算迟到第几次的时候总罚款金额会超过10000元,并显示总罚款金额。
var fakuan = 10;
var sum = 10;
var i = 1;
do
{
i++;
fakuan = fakuan*2;
sum = sum + fakuan
}while(sum < 10000);
alert("第" + i + "次罚款总金额超过10000,罚款总金额为:" + sum);
（2）for循环
for循环打印1-10：
for(var i = 1;i<= 10;i++)
{
document.write(i+"<br />");
}
使用for循环打印九九乘法表:
for(var i = 1;i<=9;i++)
{
for(var j = 1;j<=i;j++)
{
document.write(i + "*" + j + "=" + i*j);
if(i*j <=9)
document.write(" ");
else
document.write(" ");
}
document.write("<br>");
}
（3）break和continue
break和continue区别：
【1】break:退出整个循环
【2】continue:退出本次循环，马上进入下一次循环
例：
for(var i = 1;i<=10;i++)
{
if(i == 5)
break;
alert(i);
}
//备注：对话框弹出4次
for(var i = 1;i<=10;i++)
{
if(i == 5)
continue;
alert(i);
}
//备注：对话框弹出9次，i=5的时候对话框不会弹出
1-100之间偶数相加，求加到几的时候和超过1000：
var sum = 0;
for(var i=1;i<=100;i=i+2)
{
sum = sum + i;
if(sum > 1000)
{
alert("加到" + i + "的时候，和超过1000，结果为：" + sum);
break;
}
}
1-100之间偶数相加，能被7整除的数字不参加累加运算，求和：
var sum = 0;
for(var i = 1;i <= 100;i=i+2)
{
if(i%7 == 0)
continue;
sum = sum + i;
}
alert("结果为:" + sum);
网友评论