JavaScript学习（1）

最新推荐文章于 2022-04-24 00:13:10 发布

wsl_cnxw

最新推荐文章于 2022-04-24 00:13:10 发布

阅读量227

点赞数

分类专栏： Javascript 文章标签： Javascript

本文链接：https://blog.csdn.net/wsl_cnxw/article/details/100783533

版权

Javascript 专栏收录该内容

5 篇文章 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是先执行，再判断。所有这两个区别，你就要考虑好你的条件如何写了。

wsl_cnxw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习（1）

Javascript是脚本语言编写工具，这里还是选择万能的 notepad++本篇包含的知识点：变量定义及类型：number (2, 3.2, -2.3), string("Hi, I'm a string"),Boolean(True, False)JavaScript中函数的定义和调用全局变量和局部变量数学运算if- 条件控制语句，if else语句,if 嵌套...
复制链接

扫一扫