2021-06-07

最新推荐文章于 2022-05-10 21:23:59 发布

瞧~

最新推荐文章于 2022-05-10 21:23:59 发布

阅读量106

点赞数

本文链接：https://blog.csdn.net/qq_52557434/article/details/117666167

版权

一、JavaScript

1、JS编码位置

（1）直接在HTML网页中编写JS代码，直接使用<script></script>标签包裹起来，可以放在html里面的任何位置，推荐放在<head></head>区域中。该方式JS代码冗余，不利于程序的维护

可以将js代码编写到标签的onclick属性中。当我们点击按钮时，js代码才会执行。虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用

（2）单独编写一个js文件（.js）,在使用的html/jsp中通过<script src=”index.js”> </script>标签引入该技术文件,该方式实现了js代码和HTML页面的分离,有利于程序的维护

（3）在<a>标签中使用JavaScript,在href属性中编写js代码,需要注意的是必须要有一个前缀:javascript。<a href="javascript：alter("xxx")">点击</a>

2、 JS变量声明与数据类型

变量声明：

（1）const用于修饰常量，定义的变量不可修改，而且必须初始化，声明位置不限（通常声明在js开头），与java类的final关键字性质一样。

（2）let声明的变量在{}中使用，变量的作用域限制在块级域中

（3）var定义的变量可以修改，如果不初始化会输出undefined，不会报错。多个变量用逗号隔开，变量可横跨多行；如果再次声明某个 JavaScript 变量，将不会丢它的值。

全局变量：声明在函数体外，任何地方都可访问到该变量

局部变量：声明在函数体内，只有在函数体内可访问到该变量

函数内部声明变量的时候，一定要使用var命令，如果不用的话，你实际上声明了一个全局变量

函数外面声明的变量，在函数内部改变该值后，函数外面的该变量的值也随之改变

在函数外面使用var声明一个变量后，再在函数内部使用var再次声明一次并改变其值，函数外面的该变量的值不会发生改变。

数据类型：JavaScript 变量能够保存多种数据类型：字符串值，数值，布尔值，数组，对象等。

字符串值：字符串（或文本字符串）是一串字符（比如 "Bill Gates"）。字符串被引号包围。可使用单引号或双引号。

var carName = "Porsche 911"; // 使用双引号

var carName = 'Porsche 911'; // 使用单引号

数组：JavaScript 数组用方括号书写。数组的项目由逗号分隔。

var cars = ["Porsche", "Volvo", "BMW"];

对象：JavaScript 对象用花括号来书写。对象属性是 name:value 对，由逗号分隔。

3、JS运算符

算数运算符：

赋值运算符：

字符串运算符：+ 运算符也可用于对字符串进行相加（concatenate，级联）。 += 赋值运算符也可用于相加（级联）字符串。字符串只能进行“连接”运算，不能进行其他运算。

字符串和数字相加：相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串

比较运算符：

逻辑运算符：

三元运算符：？：

所谓“三元运算符”就是指三个操作数。

语法：条件表达式 ? 结果1 : 结果2 语法：操作数1 ? 操作数2 : 操作数3 含义：如果条件为true，则执行“结果1”的代码；如果条件为false，则执行“结果2”的代码。

其实：三元运算符，就是if else的变形形式

4、JS if语句和switch语句

（1）if语句：只有当指定条件为 true 时，该语句才会执行代码。

语法：

if (condition)
{
当条件为 true 时执行的代码
}

请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！

（2）if...else if...else 语句：使用 if....else if...else 语句来选择多个代码块之一来执行。

语法：

if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和条件 2 都不为 true 时执行的代码
}

（3）switch语句：switch 语句用于基于不同的条件来执行不同的动作。

语法：

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

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

default关键字：使用 default 关键词来规定匹配不存在时做的事情。

5、JS for循环和while语句

（1）for循环：

语法：

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

语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

（2）while循环：while 循环会在指定条件为真时循环执行代码块。

语法：

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

（3）do.....while循环

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

语法

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

二、简单实例

要求：

使用While循环计算出100以内奇数相加之和。

使用for循环打印99乘法表（在页面内输出可用“document.write(‘’)）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关卡11</title>
    <script>
        function change1(){
            var a=1,sum=0
              while(a<=100){
                   if(a%2!=0)
                       sum+=a;
                    a++
              }
              alert("100以内奇数和为："+sum)
        }
        function change2(){
            var str = ''; 
            for (var row = 1; row <= 9; row++) { 
                for (var column = 1; column <= row; column++) { 
                     str += column + '*' + row + '=' + row * column +"&nbsp;&nbsp;";
            }
            str += "<br>"
        }
        document.write(str)
        }
    </script>
</head>
<body>
    <input type="button" onclick="change1()" value="奇数和" />
    <input type="button" onclick="change2()" value="乘法表" />
</body>
</html>

效果：