前端基础(8):javascript 基础语法(2)--实例与显示
2018年2月4日
【引言】学习springmvc时,遇到了Ajax异步处理,终究还是接触到JQuery和Json,于是回忆一下JavaScript(这门世界最流行的脚本语言)
【回顾】
1、test1-文本
- <script language="JavaScript">
- document.write("Hello World!!!");
- </script>
2、test2-弹窗
- <a href="JavaScript:alert('Hello World!!!')">请单击</a>
- <a href="#" onclick="alert('Hello World!!!')">请单击</a>
- <a href="JavaScript://" onclick="alert('Hello World!!!')">请单击</a>
3、test3-with关键字用法 --简化代码用
- 开域语句,表示在with语句中的任何表达式的所属对象或者是类都由with后紧跟的变量所代表
- 功能:为一段程序建立默认对象。简化代码<br>
- <br>格式:
- <br>with (<对象>){
- <br> <语句组>
- <br>}
- <Script>
- with (document) {
- write ("<br><Li>限时抢购物品:");
- write ("<Li>ViewSonic 17\" 显示器。");
- write ("<Li>EPSON 打印机。");
- }
- document.write ("<br>---------------");
- document.write ("<Li>限时抢购物品:");
- document.write ("<Li>ViewSonic 17\" 显示器。");
- document.write ("<Li>EPSON 打印机。");
- </Script>
4、test4-变量声明,总是var 开头
- <br>整数:由正负号、数字构成,八进制、十进制、十六进制;
- <br>浮点数:由正负号、数字和小数点构成,常规记数法、科学记数法;
- <br>逻辑值:true、false
- <br>字符串值:单引号、双引号
- <br>空值:null
- <br>未定义值:根本不存在的对象、已定义但没有赋值的量;
- <br>
- <br>
- <script language="JavaScript">
- var stdId;
- var total=3721;
- var notNull=true;
- var name="李小龙",sex="先生";
- var i=j=0;
- var hobby=["听音乐","看电影"];
- hobby[2]="123";
- var test;
- stdId = 2004007;
- document.write("变量stdId="+stdId+"<br>");
- document.write("变量i="+i+"<br>");
- document.write("变量j="+j+"<br>");
- document.write("变量name="+name+"<br>");
- document.write("变量sex="+sex+"<br>");
- document.write("变量notNull="+notNull+"<br>");
- document.write("变量hobby="+hobby+"<br>");
- document.write("变量hobby[0]="+hobby[0]+"<br>");
- document.write("变量hobby[1]="+hobby[1]+"<br>");
- document.write("变量hobby[2]="+hobby[2]+"<br>");
- document.write("变量hobby[3]="+hobby[3]+"<br>");
- document.write("未赋值的变量test="+test+"<br>");
- document.write("不存在的数值(0.0/0.0)="+(0.0/0.0)+"<br>");
- var t1=1.7976931348623157E+10308
- document.write("正数超出范围的值"+t1)
- document.write("<br />")
- var t2=-1.7976931348623157E+10308
- document.write("负数超出范围的值"+t2)
- </script>
5、全局变量声明
- <Script>
- var langJS = "JavaScript"; //langJS是全局变量
- test();
- function test() {
- var langVBS = "VBScript"; //langVBS是局部变量
- document.write("<LI>" + langJS);
- document.write("<LI>" + langVBS);
- }
- document.write("<LI>" + langJS);
- document.write("<LI>" + langVBS);
- </Script>
6、运算符号和加减乘除
- <script language="JavaScript">
- var x = 11;
- var y = 5;
- with (document) {
- write("x = 11, y = 5");
- write("<LI>x + y 是 ", x + y);
- write("<LI>x - y 是 ", x - y);
- write("<LI>x * y 是 ", x * y);
- write("<LI>x / y 是 ", x / y);
- write("<LI>x % y 是 ", x % y);
- write("<LI>++ x 是 ", ++ x);
- write("<LI>-- y 是 ", -- y);
- write("<LI>x 是 ", x);
- write("<LI>y 是 ", y);
- write("<LI>x-- 是 ", x--);
- write("<LI>y-- 是 ", y--);
- }
- </script>
7、++运算
- <Script>
- var x = y = 3;
- with (document) {
- write("y++=",(y++),"<br>");
- write("++y=",(++y),"<br>");
- write("x = 3, y = 5 <br>");
- write("若x = y++ 运算之后:");
- x = y++;//y→x,y+1→y
- write("x 是 ", x, "; y 是 ", y, "<br>");
- write("再作x = ++y 运算:");
- x = ++y;//y+1→x,y+1→y
- write("x 是 ", x, "; y 是 ", y);
- }
- </Script>
8、逻辑运算符且
- && || !
- 例1:
- <Script>
- var t = true;
- var f = false;
- with(document) {
- write("<OL><LI>true && true 的结果是 ", t && t);
- write("<LI>true && false 的结果是 ", t && f);
- write("<LI>false && true 的结果是 ", f && t);
- write("<LI>false && false 的结果是 ", f && f);
- write("<LI>true && (1==1) 的结果是 ", t && (1==1));
- write("<LI>false && 'A' 的结果是 ", f && 'A');
- write("<LI>'A' && false 的结果是 ", 'A' && f);
- write("<LI>true && 'A' 的结果是 ", t && 'A');
- write("<LI>'A' && true 的结果是 ", 'A' && t);
- write("<LI>'A' && 'B' 的结果是 ", 'A' && 'B');
- write("<LI>1 && 1 的结果是 ", 1 && 1);
- write("<LI>1 && 0 的结果是 ", 1 && 0);
- write("<LI>true && 0 的结果是 ", true && 0);
- write("<LI>true && 1 的结果是 ", true && 1);
- write("<LI>true && '0' 的结果是 ", true && '0');
- //&&:有一个不是逻辑值,只要第一个操作数的值为flase,则返回第一个操作数的值flase,否则,返回第二个操作数的值
- }
- </Script>
9、逻辑运算符 或
- <Script>
- var t = true;
- var f = false;
- with(document) {
- write("<OL><LI>true || true 的结果是 ", t || t);
- write("<LI>true || false 的结果是 ", t || f);
- write("<LI>false || true 的结果是 ", f || t);
- write("<LI>false || false 的结果是 ", f || f);
- write("<LI>true || (1==1) 的结果是 ", t || (1==1));
- write("<LI>false || 'A' 的结果是 ", f || 'A');
- write("<LI>'A' || false 的结果是 ", 'A' || f);
- write("<LI>true || 'A' 的结果是 ", t || 'A');
- write("<LI>'A' || true 的结果是 ", 'A' || t);
- write("<LI>'A' || 'B' 的结果是 ", 'A' || 'B');
- write("<LI>1 || 1 的结果是 ", 1 || 1);
- write("<LI>1 || 0 的结果是 ", 1 || 0);
- write("<LI>true || 0 的结果是 ", true || 0);
- write("<LI>true || 1 的结果是 ", true || 1);
- write("<LI>true || '0' 的结果是 ", true || '0');
- //||:有一个不是逻辑值,只要第一个操作数为的值true、字符或非零的数字,则返回第一个操作数的值,否则,返回第二个操作数的值
- }
- </Script>
10、逻辑运算符 取反
- <Script>
- with(document) {
- write("<LI>!true 的结果是 ", !true);
- write("<LI>!false 的结果是 ", !false);
- write("<LI>!'A' 的结果是 ", !'A');
- write("<LI>!0 的结果是 ", !0);
- write("<LI>!1 的结果是 ", !1);
- write("<LI>!2 的结果是 ", !2);
- write("<LI>!'0' 的结果是 ", !'0');
- write("<LI>!'1' 的结果是 ", !'1');
- write("<LI>!-1 的结果是 ", !-1);
- }
- </Script>
11、逻辑运算优先级
12、this关键字 this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象
- <Script>
- function validate(obj) {
- alert("你输入的值是:"+ obj.value);
- } </Script>
- 请输入任意字符:<BR>
- <INPUT TYPE="text" onKeyup="validate(this)">
- <BR>
- 当按钮松开时执行脚本 长按不会触发
13、条件运算符(三目运算符)
- <Script>
- //forms 集合可返回对文档中所有 Form 对象的引用。
- function showSex() {
- onOroff = document.forms[0].sex[0].checked
- status = (onOroff)? "帅哥" : "美女"
- alert("Hello! " + status)
- }
- </Script>
- 请输入你的性别:
- <FORM >
- <INPUT TYPE=radio NAME=sex onClick=showSex()>男生
- <INPUT TYPE=radio NAME=sex onClick=showSex()>女生
- </FORM>
14、注释语句
- <Script>
- //单行注释
- /*
- 多行注释
- */
- //例:
- /***************************************
- * 源 码 之 家 *
- * http://www.mycodes.net *
- * 下载:http://www.mycodes.net *
- * 论坛http://www.mycodes.net/bbs *
- *****************************************/
- </Script>
15、if.......else......
- <Script>
- var now = new Date();
- var hour = now.getHours();
- document.write(now);
- document.write("<br>");
- if (6 < hour && hour < 18)
- document.write ("现在"+hour+"点是白天");
- else
- document.write ("现在"+hour+"点是晚上");
- </Script>
16、while语句
- <Script>
- var i = 5;
- while ( i > 0 ) {
- document.write("i = " ,i ,"<BR>");
- i--;
- }
- </Script>
17、do.....while语句
- <Script>
- var i = 5;
- do {
- document.write("i = " ,i ,"<BR>");
- i++;
- } while ( i < 10 )
- </Script>
18、for循环语句
- <Script>
- for ( var i = 5; i > 0; i-- ) {
- document.write("i = " ,i ,"<BR>");
- }
- </Script>
19、if.......else.....if
- <Script>
- var now = new Date();
- var day = now.getDay();
- var dayName;
- if (day == 0) dayName = "星期日";
- else if (day == 1) dayName = "星期一";
- else if (day == 2) dayName = "星期二";
- else if (day == 3) dayName = "星期三";
- else if (day == 4) dayName = "星期四";
- else if (day == 5) dayName = "星期五";
- else dayName = "星期六";
- document.write ("今天是快乐的", dayName);
- </Script>
20、for in(一)用法 遍历一个数组的所有子集
- <html>
- <body>
- <script type="text/javascript">
- var x
- var mycars = new Array()
- mycars[0] = "Saab"
- mycars[1] = "Volvo"
- mycars[2] = "BMW"
- for (x in mycars)
- {
- document.write(mycars[x] + "<br />")
- }
- </script>
- </body>
- </html>
21、for in(二)用法 遍历一个对象的所有属性
- <br>格式:
- <br>
- <br>for ( 变量 in 对象 ){
- <br> <语句组>
- <br>}
- <br>
- <br>例:
- <br>
- <Script>
- function member(name, sex) {//构造函数member
- this.name = name;
- this.sex = sex;
- }
- function showProperty(obj, objString) {
- var str = "";
- for (var i in obj)
- str += objString + "." + i + " = " + obj[i] + "<BR>";
- return str;
- }
- papa = new member("杨宏文", "男生");//建立对象实例papa
- document.write(showProperty(papa, "papa"))
- </Script>