JavaScript学习（1）

布满荆棘的人生 2024-04-18 22:38 36阅读 0赞

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开定义函数，函数体需要用一对大括号（\{\}）括起来

只需要另起一行，输入函数名称后面跟着分号，就可以调用这个函数。

接下来，我们换一个方法来调用函数，例如，网页上点击一个按钮，然后弹出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循环语句：

do-while循环，还是以求1到100相加的问题举例。do-while和while循环的区别是，while循环是先判断，再执行，而do-while是先执行，再判断。所有这两个区别，你就要考虑好你的条件如何写了。