百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

第十七天到第十八天,“如果”可以“重来”

条件语句

  • if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
  • if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
  • if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
  • switch 语句 - 使用该语句来选择多个代码块之一来执行
    if (条件)
    {
    只有当条件为 true 时执行的代码
    }
    
    if (条件)
    {
    当条件为 true 时执行的代码
    }
    else
    {
    当条件不为 true 时执行的代码
    }
    
      if (条件 1)
    {
    当条件 1true 时执行的代码
    }
    else if (条件 2)
    {
    当条件 2true 时执行的代码
    }
    else
    {
    当条件 1 和 条件 2 都不为 true 时执行的代码
    }
    

JavaScript Switch 语句

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1case 2 不同时执行的代码
}

default 关键词
使用 default 关键词来规定匹配不存在时做的事情;
如果今天不是周六或周日,则会输出默认的消息:

var day=new Date().getDay();
switch (day)
{
case 6:
  x="Today it's Saturday";
  break;
case 0:
  x="Today it's Sunday";
  break;
default:
  x="Looking forward to the Weekend";
}

JavaScript 循环

for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}

不同类型的循环
for - 循环代码块一定的次数 for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块 do/while - 同样当指定的条件为 true 时循环指定的代码块
For 循环

for (语句 1; 语句 2; 语句 3)
  {
  被执行的代码块
  }

语句 1 在循环(代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行

for (var i=0; i<5; i++)
  {
  x=x + "The number is " + i + "<br>";
  }

Statement 1 在循环开始之前设置变量 (var i=0)。
Statement 2 定义循环运行的条件(i 必须小于 5)。
Statement 3 在每次代码块已被执行后增加一个值 (i++)。
语句 1可选的 初始化循环中所用的变量 (var i=0)。
语句 2可选的 用于评估初始变量的条件。
语句 3可选的 增加初始变量的值。增量可以是负数 (i--),或者更大 (i=i+15)

For/In 循环
JavaScript for/in 语句循环遍历对象的属性

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
  {
  txt=txt + person[x];
  }

while 循环

while (条件)
  {
  需要执行的代码
  }
while (i<5)
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }

do/while 循环
do/while 循环是 while 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。

do
  {
  需要执行的代码
  }
while (条件);

和while循环类似,只是换了一种形式

do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5);

比较 for 和 while

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{
document.write(cars[i] + "<br>");
i++;
}

while (cars[i])
{
document.write(cars[i] + "<br>");
i++;
}
**Break 语句**

break 语句可用于跳出循环。
break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话)

```
for (i=0;i<10;i++)

{
if (i==3) break;
x=x + "The number is " + i + "<br>";
}

```

if 语句只有一行代码,所以可以省略花括号

Continue 语句
该例子跳过了值 3

for (i=0;i<=10;i++)
 {
 if (i==3) continue;
  x=x + "The number is " + i + "<br>";
  }

JavaScript 标签

label:
语句
break labelname;
continue labelname;

JavaScript 错误 - Throw、Try 和 Catch
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。

Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是:创建或抛出异常(exception)。
如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。

throw exception

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

<script>
function myFunction()
{
try
  {
  var x=document.getElementById("demo").value;
  if(x=="")    throw "empty";
  if(isNaN(x)) throw "not a number";
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
  }
catch(err)
  {
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + ".";
  }
}
</script>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
必填(或必选)项目

<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>

E-mail 验证

<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
  {email.focus();return false}
}
}
</script>

以下是之前的笔记
操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
使用 "id" 属性来标识 HTML 元素:

<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
</script>

写到文档输出
下面的例子直接把 <p> 元素写到 HTML 文档输出中:

<h1>我的第一张网页</h1>
<script>
document.write("<p>我的第一段 JavaScript</p>");
</script>

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:

<button onclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("糟糕!文档消失了。");
}
</script>

JavaScript 对大小写敏感。
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。
空格

var name="Hello";
var name = "Hello";

对代码行进行折行

document.write("Hello 
World!");

JavaScript 注释 单行注释以 // 开头 多行注释以 / 开始,以 / 结尾。
使用注释来阻止执行(可用于调试)

//document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
/*
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
*/

在行末使用注释

var x=5;    // 声明 x 并把 5 赋值给它
var y=x+2;  // 声明 y 并把 x+2 赋值给它

JavaScript 变量

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)
    JavaScript 数据类型
    字符串、数字、布尔、数组、对象、Null、Undefined
    JavaScript 函数语法
    function functionname()
    {
    这里是要执行的代码
    }
    
    调用带参数的函数
    myFunction(argument1,argument2)
    function myFunction(var1,var2)
    {
    这里是要执行的代码
    }
    
    带有返回值的函数
    function myFunction()
    {
    var x=5;
    return x;
    }
    
    在使用 return 语句时,函数会停止执行,并返回指定的值。
    局部 JavaScript 变量
    在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
    您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
    只要函数运行完毕,本地变量就会被删除。
    全局 JavaScript 变量
    在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
    运算符 = 用于赋值。
    运算符 + 用于加值。

    要想在两个字符串之间增加空格,需要把空格插入一个字符串之中
    txt1="What a very ";
    txt2="nice day";
    txt3=txt1+txt2;
    
    把空格插入表达式中:
    txt1="What a very";
    txt2="nice day";
    txt3=txt1+" "+txt2;
    
3条评论