JavaScript基础教程：脚本语言、DOM操作与流控制-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62395433/article/details/123066769

一、简介

js是一个简称，全称：JavaScript
js的功能：
- 是一个功能强大的脚本语言【脚本：代码量较小的程序】
- js可以嵌入到html页面中，实现各种特效

案例：

<!DOCTYPE html>
<html>
<head>
<title></title>

   <body>
       <h3>hello boys</h3>
       <div></div>
   </body>
</html>

二、基础用法

1、js的写法

一般情况下，js写入到html的head部分中

2、js代码

window.alert(字符串)

作用：可以实现在访问网页的时候，在网页中弹出一个警告框

字符串：是警告框中所要显示的信息

document.write(字符串)

作用：在html的body部分中写入指定的字符串
js的注释
单行注释：仅仅注释掉一行，方法是在行首写入 //
多行注释：一次注释掉多行，方法是开头是/* 结尾是 */

**document.write(字符串)**

- 作用：在html的body部分中写入指定的字符串      <script type="text/javascript">

            //window.alert("warnging 1....")

/*

            window.alert("warnging 1....")

            window.alert("warnging 1....")

            window.alert("warnging 1....")

*/

        </script>

3、js的变量

变量指的是值可以发生改变的对象，就是变量

定义变量的方法

方法1：var 变量名 = 变量值指定变量名，同时指定变量中保存的值
方法2：var 变量名仅仅指定变量名

变量名的规则

变量名中仅仅可以有数字、字母、下划线
变量名不能以数字位开头

判断哪个变量是正确命名

name1
name1c
1name 错误
1cname 错误
_name
_1name
1_name 错误
name_
name_1

变量的类型

数值类型：var age = 20
字符类型：var name = 'tom' ,注意，这个值必须用引号引起来

js的运算符

算数运算符：+ - * / %
赋值运算符：=，-= ， +=, *= , /=

// 定义变量n，赋值1
var n = 1
// 让n中的值加2
n = n + 2

// 让n中的值再次加2
n += 2

// n += 2 等同于 n = n + 2

// 让n中的值乘以2
n = n * 2
n *= 2

%：取余【取模】

6/4 计算6除以4，结果是整数部分，也就是1
6%4 计算6对4取余，也就是6除以4，计算其余数2

10%3 = 1
10/3 = 3

通常用%来判断目标数字是奇数还是偶数

- 奇数：除以2，余数1
- 偶数：除以2，余数0

拼接：将字符串和变量链接成一个整体
变量替换：也就是将变量名替换成变量值

案例：拼接字符串案例

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <script type="text/javascript">

            // 定义三个变量

            var name = 'tom';

            var age = 18;

            var gender = "男";

            // 用 + 拼接一个字符串

            var str

            str = "姓名是：" + name + "<br>" + "年龄是：" + age + "<br>" + "性别是：" + gender

            // 显示输出结果

            document.write(str)

        </script>

    </head>

    <body>

    </body>

</html>

案例：通过js打印表格

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <script type="text/javascript">
       var name1 = 'tom'
       var age1 = 18
       var tel1 = 13011111
       var name2 = 'jerry'
       var age2 = 20
       var tel2 = 13622222
       var str
       str = '<table border="1px red solid" width="200" height=50 cellspacing="0" rules="yes"><tr><td> '+ name1 + '</td><td> ' + age1 + '</td><td>' + tel1 + '</td></tr><tr><td>' + name2 + '</td><td>' + age2 + '</td><td>' + tel2 + '</td></tr></table>'
       document.write(str)
   </script>
</head>
<body>

</body>
</html>

三、流控制

1、判断语句

格式

格式1：单分支格式
if(判断条件)
{
代码 // 当判断条件成立的时候，才会执行代码
}

格式2：双分支格式
if(判断条件)
{
代码 // 当判断条件成立的时候，才会执行代码
}
else
{
代码 // 当判断条件不成立的时候，才会执行代码
}
案例

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script type="text/javascript">

        var n = 10

        var m = 3

        if(m>n)

            document.write("ok")

        else

            document.write("error")

    </script>

</head>

<body>

</body>

</html>

判断符号

>
<
>=
<=
!=
== 判断两个字符是否相同

用户交互：让用户输入一个内容，并接收进来

var num = window.prompt(提示信息)
案例：让用户输入一个数字，判断这个数字是否大于10 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        
        var num = window.prompt("请输入一个数字：")
        if(num>10)
        {
            document.write("数字大于10")
        }
        else
        {
            document.write("数字不大于10")
        }
    </script>
</head>
<body>

</body>
</html>

2、for循环

for(为变量设置初始值; 判断条件; 修改变量中的值)
{
代码
}

初始值变量判断条件修改变量的值
for(var num=1; num=10; num++)
{
document.write("a")
}

执行过程：

第一步：首先为变量设置初始值，也就是执行 var num=1
第二步：判断条件是否成立，此时num的值是1，条件是num<=10，因此条件成立
第三步：执行循环中的代码，也就是执行 document.write("a")
第四步：执行修改变量中的值，也就是执行 num++ ，此时num中的值是1，因此执行了num++以后，num就成了2
第五步：再次判断条件是否成立，此时num是2，条件是num<=10，条件依然成立
第六步：再次执行循环中的代码，也就是 document.write("a")
....
...

注意：

for循环的情况是条件成立才会进行循环

案例：输出1-100的数字

案例：打印一个100行2列的表格【扩展问题】

!DOCTYPE html>
<html>
<head>
   <title></title>
   <script type="text/javascript">
       var str_start = "<table width=300 height=3800 rules=yes border=1px red solid cellspacing=0>"
       var str_end = "</table>"
       var str_content
       for(var num=1; num<=100; num++)
       {
           str_content += "<tr><td></td><td></td></tr>"
       }
       var str = str_start + str_content + str_end
       document.write(str)
   </script>
</head>
<body>