前端基础（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、逻辑运算符且

&&　　||　　!
例１：
<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>

前端基础（8）：javascript 基础语法（2）--实例与显示相关推荐

前端基础：html基础(css基础和JavaScript基础)/01/B/S网络结构，html文件结构，html标签格式，lt;bodygt;中的一些常用标记
前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,<body>中的一些常用标记 html:超文本标记语言(非编程语言 ...
web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）
前言:温故而知新,可以为长也!万变不离其宗,无论是现在web前端技术衍生出多么优秀,好用的框架,插件,都离不开这门语言的基础知识.掌握各种优秀的框架,插件,只是"善用工具的人",深 ...
前端网页三剑客------JavaScript基础
前端网页三剑客------JavaScript基础一.基础语法 1.引入方式行内JS:在标签内部编写JS代码,配合事件使用.<input type="button" val ...
web前端知识集合——javascript基础篇之常量和变量（二）
3. 变量和常量: 1.1 变量的声明: js三种方式声明变量,声明不赋值时,默认值为underfined. (1)var声明:var name='Ace',同时声明多个变量var a=1,b=2,c ...
javascript技术教程蔡敏_程序员都必掌握的前端教程之JavaScript基础教程（上）
阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到. 本篇文章成哥继续带大家来学习前端教程之JavaScript,网页的动态事件基本上都是靠它来实现的.下面我们就一起来学习内容吧! 01 Ja ...
前端学习之 JavaScript基础
一. JavaScript简介 1. JavaScript的历史背景介绍 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时 ...
前端入门之JavaScript基础语法
目录前置知识 JavaScript 的组成第一个程序 JavaScript 的书写形式语法概览变量基本数据类型运算符 JS数组函数对象前置知识 JavaScript 的组成 ECMA ...
[最完整的前端学习手册]——JavaScript基础一：
一.JS初识 1.JavaScript一种直译式脚本语言: 2.组成部分: (1)ECMAScript语法和基本对象 (2)文档对象模型(DOM)处理网页内容的方法和接口 (3)浏览器对象模型(BOM ...
前端开发之JavaScript基础篇一
主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换 ...
3.前端笔记之JavaScript基础
作者:刘耀部分内容参考一下链接参考: http://www.cnblogs.com/wupeiqi/articles/5369773.htmlhttp://javascript.ruanyifen ...

前端基础（8）：javascript 基础语法（2）--实例与显示

前端基础（8）：javascript 基础语法（2）--实例与显示相关推荐

最新文章

热门文章