前端基础(一)之JavaScript基础

JavaScirpt变量

JavaScript 变量名称的规则:

  • 应该起一些具有意义的,描述性的,让人望文生义的变量名
  • 变量对大小写敏感(y 和 Y 是两个不同的变量)【JavaScript 对大小写敏感】
  • 变量必须以字母或下划线开始
  • 变量名不能使用系统的关键字或保留字

JavaScript 变量的类型:

  • JavaScript 是一种弱类型的语言,因此变量的类型由赋值号右边的数据所决定。

JavaScript 运算符

  • 算术运算符:+ – * / % ++ -- ,其中+号还被重载用于拼接字符串,另外,任何类
    型+上字符串都是字符串。

  • 赋值运算符:= += -= *= /= %=

  • 比较运算符:== === != > < >= <=

  • 逻辑运算符:&& || !

  • 条件运算符:? :

JavaScript 分支语句

  • 传统的 if 。。else,if 。。else if 。。else 的嵌套都是可行的。

  • switch(n)中的 n 可以是表达式,但通常是变量,case 结构中也需要使用 break 分隔。

JavaScript 消息框

可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

  • 警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。
    alert("文本")

  • 确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
    confirm("文本")

  • 提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
    prompt("文本","默认值")

JavaScript 函数

  • 将脚本编写为函数,就可以避免页面载入时执行该脚本。函数包含着一些代码,这些代码只能被事件激活,或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本(如果函数嵌入一个外部的 .js 文件,那么甚至可以从其他的页面中调用)。

建议将函数在页面起始位置定义,即 <head> 部分。
** 创建函数的语法:**

function 函数名() { 代码... }
function 函数名(var1,var2,...,varX) { 代码... }
JavaScript 变量的生存期

  • 当您在函数内声明了一个变量后,就只能在该函数中访问该变量。当退出该函数后,这个变量会被撤销。这种变量称为本地变量。您可以在不同的函数中使用名称相同的本地变量,这是因为只有声明过变量的函数能够识别其中的每个变量。

如果您在函数之外声明了一个变量,则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始,在页面关闭时结束。

JavaScript 循环

  • 在编写代码时,你常常希望反复执行同一段代码。我们可以使用循环来完成这个功能,这样就用不着重复地写若干行相同的代码。

JavaScript 有两种(也只有2种)不同种类的循环:

for
将一段代码循环执行指定的次数
while
当指定的条件为 true 时循环执行代码

语法格式和java或.NET是一样的。
使用什么语句可以直接跳出多重循环?

  • continue 语句可以在符合一定的条件下结束本轮循环,直接进行下一轮循环。
    break? 语句可以在符合一定的条件下直接结束循环,代码会跳转到循环外靠后的最近一条语句继续向下执行。

在 .NET 中,goto 语句可以直接定位到指定的标记为继续执行代码,而 javascript 中是没有 goto 语句的,那么怎么直接跳出多重循环呢?

看下面的示例:

outerloop: // 命名外圈语句
for(var i=0; i<10; i++)
{
innerloop://命名内圈语句
for(var j=0; j<10; j++)
{
// 跳出内圈循环
if(j>3){break;}
// 跳出内圈循环
if(i==2){break innerloop;}
// 跳出外圈循环
if(i==4){break outerloop;}
document.write("i = "+i+" , j = "+j+"<br />");
}
}
document.write("final"+" i = "+i+" , j = "+j);

可以在循环外设置标记为,然后使用 break 或 continue 加上标记名直接跳出循环。这里要注意,和其他语言不同,JS中一旦跳出,程序是不会继续从标记位处再度往下执行代码的,而是直接执行最外层循环之后的 code,如果后面没有 code,那么程序就此结束。

JavaScript For...In 声明

For...In 声明用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。[也是 for 循环家族的一员]

下例是使用 for..in 遍历一个数组对象,注意这里 .NET 中 foreach 的区别。
var x
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

for (x in mycars)
{
document.write(mycars[x] + "<br />");
}

JavaScript 事件

事件是可以被 JavaScript 侦测到的行为。

  • JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。
    网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件举例:
鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键

注意:事件通常与函数配合使用,当事件发生时函数才会执行。

onload 和 onUnload

  • 当用户进入或离开页面时就会触发 onload 和 onUnload 事件。onload 事件常用来检测访问者的浏览器类型和版本,然后根据这些信息载入特定版本的网页。onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如,当某用户第一次进入页面时,你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时,你可以使用另一个消息框来和这个用户打招呼:"Welcome John Doe!"。

onFocus, onBlur 和 onChange

  • onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。
    下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容,checkEmail() 函数就会被调用。

<input type="text" size="30" id="email"onchange="checkEmail()
">

onSubmit

  • onSubmit 用于在提交表单之前验证所有的表单域。
    下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时,checkForm() 函数就会被调用。假若域的值无效,此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true,则提交表单,反之取消提交。
    <form method="post" action="xxx.htm"onsubmit="return checkForm()">

onMouseOver 和 onMouseOut

  • onMouseOver 和 onMouseOut 用来创建“动态的”按钮。

JavaScript Try...Catch 语句

JavaScript - 捕获错误

  • 当我们在网上冲浪时,总会看到带有 runtime 错误的 Javascript 警告框,同时会询问我们“是否进行 debug?”。像这样的错误信息或许对开发人员有用,对用户则未必。当错误发生时,他们往往会选择离开这个站点。

有两种在网页中捕获错误的方法:
使用 try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)
使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)

注意:chrome、opera 和 safari 浏览器不支持 onerror 事件。【不建议使用此方式】

下一个例子会显示一个确认框,让用户来选择在发生错误时点击确定按钮来继续浏览网页,还是点击取消按钮来回到首页。

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt = "There was an error on this page.\n\n";
txt += "Click OK to continue viewing this page,\n";
txt += "or Cancel to return to the home page.\n\n";
if(!confirm(txt))
{
document.location.href="http://www.w3school.com.cn/";
}
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>

JavaScript Throw 声明

  • throw 声明的作用是创建 exception(异常)。你可以把这个声明与 try...catch 声明配合使用,以达到控制程序流并产生精确错误消息的目的。
    下面的实例的作用是测定变量 x 的值。如果 x 的值大于 10 或者小于 0,错误就会被抛出 (throw)。这个错误被 catch 的参数捕获后,就会显示出自定义的出错信息。

<html>
<body>
<script type = "text/javascript">
var x = prompt("Enter a number between 0 and 10:","");
try
{
if(x>10)
throw "Err1";
else if(x<0)
throw "Err2";
}
catch(er)
{
if(er == "Err1")
alert("Error! The value is too high");
if(er == "Err2")
alert("Error! The value is too low");
}
</script>
</body>
</html>

JavaScript 特殊字符

你可以在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符。
反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。

请看下面的 JavaScript 代码:

var txt="We are the so-called"Vikings"
from the north."document.write(txt)

  • 在 JavaScript 中,字符串使用单引号或者双引号来起始或者结束。这意味着上面的字符串将被截为:We are the so-called。
    要解决这个问题,就必须把在 "Viking" 中的引号前面加上反斜杠 ()。这样就可以把每个双引号转换为字面上的字符串。

var txt="We are the so-called"Vikings"
from the north."document.write(txt)
现在 JavaScript 就可以输出正确的文本字符串了:We are the so-called "Vikings" from the north。

JavaScript 指导方针

JavaScript 对大小写敏感

名为 "myfunction" 的函数和名为 "myFunction" 的函数是两个不同的函数,同样,变量 "myVar" 和变量 "myvar" 也是不同的。JavaScript 对大小写敏感 - 所以当您创建或使用变量、对象及函数时,请注意字符的大小写。

空格

  • JavaScript 会忽略多余的空格。所以您可以在代码中添加适当的空格,使得代码的可读性更强。下面的两行是等效的:
    name="Hege"name = "Hege"

换行

  • 您可以在文本字符串内部使用反斜杠对代码进行折行。下面的例子是正确的:

document.write("Hello \World!")
但是不能像这样折行:
document.write ("Hello World!")

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,445评论 25 707
  • 成长的很大一部分,是接受。自己作了就要自己受,为自己做的选择买单也是一种能力。都是第一次做人,凭什么我要让着你……屮
    样儿r阅读 141评论 3 3
  • Android 开发中,经常有从服务器下载数据的需求出现,尤其是在线更新App的情形。其基本思路是根据本地的App...
    YungFan阅读 18,742评论 33 68
  • 一个老头的鄙视 1 与一个老头闲聊,没想到却被他狠狠的鄙视了一番,在他的面前真真的被他的骄傲所打败。 原以为老头也...
    生达成长规划阅读 164评论 0 1
  • 更多教程请移步至:洛凉博客 求助请移步至:Python自学技术交流 一:安装 大家自行安装下载mongoDB安装包...
    Mo丶染洛凉阅读 433评论 2 5