第七次课：js

最新推荐文章于 2022-12-05 01:47:21 发布

Serendipity-_-.

最新推荐文章于 2022-12-05 01:47:21 发布

阅读量74

点赞数

文章标签： html webview c#

本文链接：https://blog.csdn.net/W15032092800/article/details/123002752

版权

一、简介

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

案例：

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

        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: black;
            }
        </style>

        <script type="text/javascript">
            window.alert("warnging 1....")
            document.write("<h1>abcdef</h1>")
        </script>
    </head>

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

二、基础用法

1、js的写法

<script type="text/javascript">
    js代码
</script>

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

2、js代码

window.alert(字符串)

作用：可以实现在访问网页的时候，在网页中弹出一个警告框
字符串：是警告框中所要显示的信息

document.write(字符串)

作用：在html的body部分中写入指定的字符串

js的注释

单行注释：仅仅注释掉一行，方法是在行首写入 //
多行注释：一次注释掉多行，方法是开头是/* 结尾是 */

        <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>

</body>
</html>

Serendipity-_-.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第七次课：js

一、html的标签 html线上资料：https://www.w3school.com.cn/html/html_elements.asp 1.1 实体符号空格：表示一个半角空格；一个汉字是2个字节，1个字节相当于1个半角空格乘号：× 除法：divide 人民币符号：¥ 1.2 列表符号有序列表【列表符号是数字】无序列表【列表符号是点】无序列表用ul来引导，其中的每个列表元素都是一个li <!DOCTYPE html> ...
复制链接

扫一扫