Javascript是脚本语言
编写工具,这里还是选择万能的 notepad++
本篇包含的知识点:
变量定义及类型:number (2, 3.2, -2.3), string("Hi, I'm a string"), Boolean(True, False)
JavaScript中函数的定义和调用
全局变量和局部变量
数学运算
if- 条件控制语句,if else语句,if 嵌套
JavaScript 中if语句,基本格式如下:
if(条件为真){
代码块;
}
逻辑与&&, 逻辑非 ||
switch语句,与case,break一起使用
循环语句:for循环,while循环,do while循环
do-while和while循环的区别是,while循环是先判断,再执行,而do-while是先执行,再判断。所有这两个区别,你就要考虑好你的条件如何写了。
demo.html:脚本都需要写在script的这一对标签里,type的值指明了是JavaScript类型
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type ="text/javascript">
// 变量的定义和使用
var name = "Anthony"; //字符类型变量
var age = 23; //整形变量
var price = 18.99;
/*
变量使用var关键字去声明,可以先声明,不赋值,
也可以申明的时候就赋值,单行可以写多个变量声明
*/
var X;
X = 10;
var x = 2, y = 3, z = 4;
document.write(x + y + z);
document.write(name + " is my name.");
document.write(Name); // 变量区分大小写,这里不会执行这行代码
// 整形变量
var age = 18;
// 字符变量
var name = "Anthony";
// 小数
var price = 19.99;
// 负数
var x = - 34.56;
// 布尔型(false true)
var status = false;
var s = null; // 这是什么鬼
// 字符串中如何打印出双引号? 需要转义
var message = "He said \" I like becon. \" ";
document.write(message);
/ 变量和字符串的连接,组合输出,这里采用 + 连接符
var name = "Anthony";
var age = 18;
document.write(name + " is my name and my age is " + age);
</script>
</body>
</html>
JavaScript中注释的写法
第一种:单行双斜杠(//)
第二种:多行注释(/* */)
语句:很多语句构成了代码块,JavaScript中语句需要以分号结束。
JavaScript中函数的定义和调用:
JavaScript中采用关键字function来定义一个函数,Python是采用def开定义函数,函数体需要用一对大括号({})括起来
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type ="text/javascript">
function fun1(){
alert("this is an alert dialog.");
}
fun1();
</script>
</body>
</html>
只需要另起一行,输入函数名称后面跟着分号,就可以调用这个函数。
接下来,我们换一个方法来调用函数,例如,网页上点击一个按钮,然后弹出alert框。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type ="text/javascript">
// 本文本介绍函数的定义和调用
function fun1(){
alert("this is an alert dialog.");
}
</script>
<form>
<input type="button" value="点击我一下" οnclick="fun1()">
</form>
</body>
</html>
带多个参数的函数定义和使用:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type ="text/javascript">
function fun1(x, y){
document.write( x + " is better than " + y + "<br />");
}
fun1("张三", "李四");
fun1("培根", "鸡肉");
</script>
</body>
</html>
总结:
1. 打印语句不会自动断行,这里我们采用html中的语法<br /> 来断行,br是break的缩写。
2. 参数之间用逗号隔开,这里注意,一定要用英文的标点,我之前不小心用了中文,在notepad++看不出,运行老是显示不了打印语句,没有报错。
函数的返回语句:
一个函数有些是有返回值,有些是无返回值的。和其他语言一样也是return 关键字来写返回语句
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type ="text/javascript">
function addNumbers(a, b){
var c = a + b;
return c;
}
document.write(addNumbers() +"<br />");
document.write(addNumbers(2,3));
</script>
</body>
</html>
我们来看看这个代码,第一个函数调用运行会输出“NaN”。在之前的项目测试过程中,前端页面出现过这个NaN,原因是调用了函数,但是函数没有赋值参数。以后,前端页面看到这样的字符显示,就可以报Bug给前端工程师,告诉前端开发这个地方,调用了函数,但是这个参数没有提供参数,所以报了这个错。
总结:
1. return 语句返回的值是返回到该函数本身,如果不通过打印语句,是无法在页面或者控制台显示的。谁调用了返回函数,那么这个返回值就返回给谁,在这里,打印语句(document.write())调用了一个有返回值的函数,这个函数的返回值就赋值了调用它的打印语句,所以才会在页面显示返回的结果。这个特点是所有编程语言返回语句的总结。
全局变量
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type ="text/javascript">
// 定义一个全局变量
var name = " Anthony ";
function fun1(){
document.write(name + "<br />");
}
fun1(); // 函数内部可以调用全局变量
document.write(name);
</script>
</body>
局部变量
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type ="text/javascript">
function fun1(){
var name = " Anthony"; // 定义一个局部变量
document.write(name + "<br />");
}
fun1(); // 这个可以输出Anthony
document.write(name); // 这里调用局部变量失败,不会打印 Anthony
</script>
</body>
</html>
JavaScript中的数学运算的使用,其中包括,加减乘除,取模,自增,自减,基本上和其他语言没有区别,请看demo.html示例。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type ="text/javascript">
// 练习下数学运算
var a = 56 + 67 + 675; // 加法
document.write(a + " <br /> ");
var b = 234 - 89; // 减法
document.write(b + " <br /> ");
var c = 7 * 8; // 乘法
document.write(c + " <br /> ");
var d = 89/8; // 除法
document.write(d + " <br /> ");
var e = 89%3; // 取模
document.write(e + " <br /> ");
var f = 67;
f++; // 自增,相当于,f = f + 1;
document.write(f + " <br /> ");
var g = 88;
g--; // 自增,相当于,g = g - 1;
document.write(g + " <br /> ");
</script>
</body>
</html>
赋值操作是用等号(=)表示。除了这一种常规的表示外,还有一种简写,例如 x += 5; 这个相当于 x = x +5;
if else 语句:
if (apples < hotdogs){
document.write("I like hotdogs!");
}else{
document.write(" I like apples");}
逻辑与,逻辑非
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type ="text/javascript">
var firstName = "Anthony";
var lastName = "Liu";
// 逻辑与
if ((firstName == "Anthony") && (lastName == "Liu")){
document.write("Yeah, That is my name." + "<br />");
}
// 逻辑或
if ((firstName == "Anthony") || (lastName == "Wang") ){
document.write("只要有一个符合就打印");
}
</script>
</body>
</html>
switch语句一般和case,break一起使用,我们通过成绩等级划分来举例。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type ="text/javascript">
var score = "A+";
switch(score){
case "A+":
document.write("很优秀");
break;
case "A":
document.write("优秀");
break;
case "B":
document.write("良好");
break;
case "C":
document.write("及格");
break;
default:
document.write("一般");
}
</script>
</body>
</html>
循环语句,先看看for循环。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type ="text/javascript">
for (i=0;i<10;i++){
document.write("I am learing JavaScript!" +"<br />");
}
// 设置步长
for (j=0;j<10;j+=3){
document.write("for 循环经常要计算好步长,这里步长是3" +"<br />");
}
</script>
</body>
</html>
while循环语句:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type ="text/javascript">
var sum = 0;
var i = 1;
while(i<101){
sum = sum + i;
i++;
}
document.write(sum);
</script>
</body>
</html>
do-while循环,还是以求1到100相加的问题举例。do-while和while循环的区别是,while循环是先判断,再执行,而do-while是先执行,再判断。所有这两个区别,你就要考虑好你的条件如何写了。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type ="text/javascript">
var sum = 0;
var i = 1;
do{
sum = sum + i;
i++;
}while(i<101);
document.write(sum);
</script>
</body>
</html>