web前端（HTML的CSS样式和JavaScript）

已于 2022-01-20 21:50:30 修改
阅读量1.2k 收藏 1
点赞数
分类专栏： web前端 文章标签： 前端 css javascript
于 2021-12-04 23:40:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50648720/article/details/121715550
版权

HTML的CSS样式和JavaScript

CSS

CSS介绍

概念和作用

CSS: Cascading Style Sheet 层叠样式表 样式表,有很多的样式,通过不同的样式可以让网页根漂亮,样式也可叠加得到最终的效果

CSS作用: 对网页进行美化,让网页变得更漂亮

示例代码

将一个表格中所有的单元格居中，如果不使用CSS，每个td或tr都要设置align属性为center，而使用CSS则方便得多。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS介绍</title>
    <!--type="text/css"表示是一个CSS样式的代码-->
    <style type="text/css">
        /*现在可以一次选择所有td,设置相应的属性*/
        td {
            text-align: center;
            color: blue;
        }
    </style>
</head>
<body>
    <table border="1" width="400">
        <tr>
            <!--以前的做法,每个td都要设置成align=center,内容要添加font-->
            <td align="center"><font color="blue">111</font></td>
            <td align="center"><font color="blue">111</font></td>
            <td align="center"><font color="blue">111</font></td>
        </tr>
        <tr>
            <td>222</td>
            <td>222</td>
            <td>222</td>
        </tr>
        <tr>
            <td>333</td>
            <td>333</td>
            <td>333</td>
        </tr>
    </table>
</body>
</html>

CSS的规则和3种位置

就近原则：哪个离元素⽐较近，哪个就起作⽤，后⾯的样式会覆盖前⾯的样式

CSS规则

规范说明
大括号所有的样式写在大括号中
样式名左边是样式的名字，使用小写。如果有多个单词，使用-分隔
样式值每个样式值都有固定的取值
样式结尾每条样式以分号结尾
注释与Java的多行注释一样 /* */

CSS的位置

行内样式
  • 位置：样式是出现在标签开始位置，以style属性存在。
  • 特点：只有这个标签有效(实际开发基本不同)

在这里插入图片描述

内部样式
  • 位置：写在HTML文件内部，放在style标签中。
  • 特点：在本HTML文件种的多个标签起作用

在这里插入图片描述

外部样式
  • 位置：以CSS文件的方式存在HTML的外部。
  • 特点：可以给多个HTML使用，使用外部样式较多
    在这里插入图片描述
三种样式的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的位置</title>

    <!--内部样式:在html中使用style标签-->
    <style type="text/css">
        h2 {
            background-color: red;
        }
    </style>

    <!--外部样式
    rel: 表示html文件和css文件之间的关系,必须指定
    href: 指定外部css文件的位置
    type: 指定文件的类型-->
    <link rel="stylesheet" href="css/01_css.css" type="text/css"/>

</head>
<body>
    <!--行内样式:直接在标签上添加样式-->
    <h1 style="background-color: blue">我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <h5>我是h5</h5>
    <h6>我是h6</h6>
</body>
</html>

css/01_css.css:

h3 {
    background-color: deeppink;
}

CSS基本选择器(重点)

CSS选择器作用

⽤于选择需要添加样式的元素。在对⽹⻚中的元素进⾏样式设置之前，先选择对哪些元素进⾏操作，选择器就是⽤于选元素的。

语法格式

选择器 { 
	样式名: 样式值; 
} 

<h1>我们是害虫h1</h1>
<h2>h2</h2>
<h4 class="c4" id="i4">h4</h4>

样式名和样式值是固定的

选择器的分类

选择器名格式作用
通用*选中所有标签
标签标签名选中指定名称的标签
类.class值选中指定class值的标签
ID#id值选中指定id值的标签

选择器之间优先级

通用选择器 < 标签选择器 < 类选择器 < id选择器

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>

    <style type="text/css">
        /*标签选择器:选中所有的h1标签*/
        h1 {
            color: red;
            background-color: blue;
        }

        /*类选择器:选择所有class属性为aa的标签*/
        .aa {
            color: orange;
            background-color: yellow;
        }

        /*ID选择器:选中所有id为one的标签*/
        #one {
            color: aqua;
            background-color: gray;
        }

        /*通用选择器:选择所有的标签*/
        * {
            color: black;
            font-size: 20px;
        }
        h6 {
            color: magenta;
        }
        .cc {
            color: gray;
        }
        #three {
            color: red;
        }
        /*选择器的优先级: 通用选择器 < 标签选择器 < 类选择器 < id选择器*/
    </style>
</head>
<body>
<h1>h1</h1>
<h1>h1</h1>
<h2 class="aa">h2</h2>
<h2 class="aa">h2</h2>
<h3 class="aa">h3</h3>
<h3 class="aa">h3</h3>
<h4 class="bb">h4</h4>
<h5 id="two">h5</h5>
<h6 class="cc" id="three">h6</h6>
</body>
</html>

扩展选择器的使用

什么是扩展选择器

在基本选择器的基础上，进行组合，实现更复杂的选择

常用的扩展选择器

扩展选择器选择器符号作用
层级空格 父选择器 子孙选择器父选择器选中父元素,子孙选择器选择子孙元素
属性[] 标签名[属性名]选择指定属性的标签
伪类: 标签名:状态指定标签在某种状态下的样式
并集, 选择器1, 选择器2多个选择器同时有效

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style type="text/css">
        /*
        层级选择器
        符号: 空格
        作用: 选中父标签的下子孙标签
        */
        ol li {
            color: red;
        }
        /*
        属性选择器
        符号: []
        标签名[属性名] 作用: 选择标签名中含有属性名的标签
        标签名[属性名=值] 作用: 选择标签名中含有属性名=值的标签
         */
        input[type="text"] {
            background-color: blue;
        }

        /*
        伪类选择器
        符号: :
        作用: 设置标签在某种状态下的样式
         */
        /*正常状态*/
        a:link {
            text-decoration: none;
        }
        /*访问过的*/
        a:visited {
            color: green;
        }

        /*正在激活*/
        a:active {
            color: yellow;
        }
        /*鼠标悬浮*/
        a:hover {
            color: aqua;
        }

        /*得到焦点*/
        input:focus {
            background-color: pink;
        }

        /*并集选择器
        符号: ,
        作用: 同时选中多个标签*/
        p,span {
            color: gold;
        }
    </style>
</head>
<body>
<ol>
    <li>xxx</li>
    <li>xxx</li>
</ol>
<div>
    <ul>
        <li>xxx</li>
        <li>xxx</li>
    </ul>
</div>

用户名:<input type="text"><br/>
密码:<input type="password"><br/>
qq:<input ><br/>
<hr/>
<a href="#1">这是链接1</a><br/>
<a href="#2">这是链接2</a><br/>
<a href="#3">这是链接3</a><br/>
<a href="#4">这是链接4</a><br/>

<p>
    aaa
</p>

<span>xxxxxxx</span>
</body>
</html>

CSS背景样式

常用背景样式

属性名属性取值
background-color背景颜色
background-image背景图片
background-repeat背景平铺方式
background-position背景的起始位置
background-size背景的大小

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta>charset="UTF-8">
    <title>背景样式</title>
    <style type="text/css">
        body {
        /*    !*背景色*!
            background-color: pink;
            !*背景图片*!
            background-image: url("img/xxx.jpg");
            !*平铺的方式*!
            background-repeat: repeat;
            !*平铺起始位置*!
            background-position: 50px 50px;*/

            /*背景色  alt+enter */
            /*背景图片*/
            /*平铺的方式*/
            /*平铺起始位置*/
            background: pink url("img/xxx.jpg") repeat 50px 50px;

            /*修改背景图片大小*/
            background-size: 100px 100px;
        }
    </style>
</head>
<body>
<h1>女生</h1>
</body>
</html>

CSS常用文本样式和字体样式

CSS的文本样式

属性名作用
color设置颜色
line-height设置行高
text-decoration文本的修饰,可以搞下划线,中划线,上划线
text-indent段落缩进: 2em,缩进2个文字
text-align文本对齐方式

CSS的字体样式

字体样式会改变文字的形状

属性名作用
font-family设置字体
font-size文字大小,单位是像素
font-styleitalic 斜体
font-weightbolder 加粗

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初相遇</title>

    <style>
        div {
            /*诗放在div的层中，宽400px，全文字体大小14px*/
            width: 400px;
            font-size: 14px;
        }

        h1 {
            /*标题文字大小18px，颜色#06F，居中对齐*/
            font-size: 18px;
            color: #06f;
            text-align: center;
        }

        p {
            /*每段文字缩进2em*/
            text-indent: 2em;
            /*段中的行高是22px*/
            line-height: 22px;
        }

        /*"胸怀中满溢着幸福，只因你就在我眼前",加粗，倾斜，蓝色*/
        #xiong {
            font-weight: bolder;
            font-style: italic;
            color: blue;
        }

        /*最后一段，颜色#390; 下划线，鼠标移上去指针变化。*/
        p:last-child {
            color: #390;
            text-decoration: underline;
            cursor: pointer;
        }

        /*美字加粗，颜色color:#F36，大小18px;*/
        .mei {
            color: #f36;
            font-size: 18px;
        }

        /*文席慕容，三个字，12px，颜色#999，不加粗*/
        h1 span {
            font-size: 12px;
            color: #999;
            font-weight: normal;
        }
    </style>
</head>
<body>
<div>
    。。。
</div>
</body>
</html>

CSS边框样式设置

所有的元素都可以设置边框

边框的样式

属性边框样式
border-style边框线的样式,实线,虚线,点线
border-width边框线的宽度
border-color边框的颜色
border-radius边框的圆角

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS边框样式</title>

    <style>
        /*1.宽和高分别是200px，边框使用double线形，红色，10px粗细*/
        /*2.对div整个居中*/
        div {
            width: 200px;
            height: 200px;
            /*边框的线形*/
            /*border-style: double;
            border-width: 10px;
            border-color: gray;*/
            border-radius: 20px;

            /*边框的线形,颜色,宽度可以合起来写*/
            border: solid lightcoral 20px;

            /*块级元素居中:margin: auto;*/
            margin: auto;
        }
    </style>
</head>
<body>
<div>
    div....
</div>
</body>
</html>

关于块级元素居中

在这里插入图片描述

两种盒子模型

盒子模型概述

网页上任何一个元素都是一个盒子

任何一个网页元素包含由这些属性组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)， 这些属性可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。

  • 内容（content）就是盒子里装的东西
  • 内边距(padding)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
  • 边框(border)就是盒子本身了；
  • 外边界(margin)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。
    在这里插入图片描述

盒子模型的属性

网页中的每一个元素都是一个盒子

属性作用
width宽度
height高度
padding内间距,内容到边框的间距
border边框

如何计算盒子的尺寸

盒子模型分为两种，分别是：标准盒模型(content-box) 和 怪异盒模型(border-box)。绝大多数元素的尺寸默认是按照标准盒模型计算的。下面是元素的尺寸分别在两种盒模型下计算规则：

盒子模型的样式名样式值
box-sizing标准盒子模型：content-box 设置宽高内容的宽高,整个盒子被撑大
box-sizing怪异盒子模型：border-box 设置宽高边框的宽高,内容被压缩

标准盒子计算方式

内容不变，盒子被撑大

实际宽度 = 设置宽度 + 左右内边距 + 左右边框
实际高度 = 设置高度 + 上下内边距 + 上下边框
怪异盒子计算方式

盒子不变，内容被缩小

实际宽度 = 设置宽度
实际高度 = 设置高度

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>

    <style>
        /*标准盒子: 内容不变,宽高被撑大*/
        .one {
            box-sizing: content-box; /*默认就是标准盒子*/
            border: 15px solid gray; /*边框的样式:粗细 线型 颜色*/
            width: 200px;
            height: 200px;
            padding: 10px;
        }

        /*怪异盒子: 宽高就是指定大小,内容会被缩小*/
        .two {
            box-sizing: border-box;
            border: 15px solid gray;
            width: 200px;
            height: 200px;
            padding: 10px;
        }
    </style>
</head>
<body>

<div class="one">
    标准盒子
</div>

<div class="two">
    怪异盒子
</div>
</body>
</html>

JavaScript

JavaScript概述和体验

JavaScript的基本概述

JavaScript简称JS。JavaScript是在1995年时，由Netscape公司在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。

网页中各技术的作用

技术作用
HTML编写网页的内容骨架
CSS对网页进行美化
JavaScript可以让网页动起来

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS代码</title>
</head>
<body>
<!--所有的脚本语言要写在script标签中-->
<script type="text/javascript">
    for (var i=0; i<5; i++) {
        // 输出到文档(网页)上
        document.write("<h1>Hello World!</h1>");
    }
</script>
</body>
</html>

JavaScript与Java的区别

特点JavaJavaScript
面向对象完全面向对象：继承，封装，多态基于对象，不完全符合面向对象的思想
运行方式编译型语言，生成中间文件解释型语言，没有中间文件。
跨平台可以运行在不同的系统上，安装JVM跨平台，运行在浏览器。只要系统有浏览器就可以执行。
数据类型强类型语言。
如：int n = “abc”; //错误		弱类型语言，变量名可以赋值不同的数据类型
大小写区分大小写区分大小写

script标签的使用说明(重点)

JavaScript语言组成

组成部分作用
ECMA Script浏览器脚本语言规范，制定所有脚本语言核心基础语法。
BOMBrowser Object Model 浏览器对象模型，操作浏览器中各种对象。
DOMDocument Object Model 文档对象模型，操作网页中各种元素。

script标签的说明

  1. 同一个HTML中可以有多个script标签，每个标签都会执行
  2. 可以出现在网页中任何的位置
  3. 每条代码以分号结束，如果一行只有一条语句，分号可以省略。不建议省略
  4. 引用外部js文件的

script标签两个属性

<script src="js/out.js" type="text/javascript"></script>

src="js/out.js": 外部js文件的路径
type="text/javascript": 引入的文件的类型(可以省略)

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>

    <script type="text/javascript">
        // 所有的脚本语言要写在script标签中
        for (var i = 0; i < 5; i++) {
            // 输出到文档(网页)上
            document.write("Hello World" + i + "<br/>");
        }
    </script>
</head>
<body>
</body>
</html>

document.write("我是外部脚本" + "<br/>");

JavaScript的注释

在这里插入图片描述

JS变量的定义

定义语法

数据类型Java中定义变量JS中定义变量
格式数据类型 变量名 = 值;var 变量名 = 值;
整数int i = 5;var i = 5;
浮点数float f = 3.14f; 或 double d = 3.14;var d = 3.14;
布尔boolean b = true;var b = true;
字符char c = ‘a’;JS没有字符，只有字符串
字符串String str = “abc”;var str = “abc”; 或 var str=‘abc’;

注意事项

  1. 在JS中的字符和字符串引号

    在JS中没有字符和字符串的区别，都是字符串，既可以使用双引号也可以使用单引号

  2. 关于弱类型

    一个变量可以赋值为不同的数据类型

  3. var定义变量的特点

    1. var关键字可以省略，建议不要省略。
    2. 同一个变量可以重复定义。
    3. 在大括号外也能使用大括号中定义的变量。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS变量</title>
</head>
<body>
<script>
    // 整数
    var a = 10;
    document.write("a: " + a + "<br/>");
    // 浮点数
    var f = 3.14;
    document.write("f: " + f + "<br/>");
    // 布尔
    var b = true;
    document.write("b: " + b + "<br/>");

    // 在JS中没有字符和字符串的区别，都是字符串，既可以使用双引号也可以使用单引号
    // 字符串
    var c = 'abc';
    document.write("c: " + c + "<br/>");
    // 字符串
    var ss = "abc";
    document.write("ss: " + ss + "<br/>");

    // 一个变量可以赋值为不同的数据类型
    var x = 10;
    document.write("x: " + x + "<br/>");
    x = true;
    document.write("x: " + x + "<br/>");

    // var关键字可以省略
    y = 20;
    document.write("y: " + y + "<br/>");

    // 同一个变量可以重复定义
    y = false;
    document.write("y: " + y + "<br/>");

    {
        var z = "大家好";
    }
    document.write("z: " + z + "<br/>")
</script>
</body>
</html>

JS五种数据类型

五种数据类型

关键字说明
number数值类型：包含了整数和小数
boolean布尔类型：true/false
string字符串类型
object对象类型：自定义对象和JS内置对象，如：数组
undefined未定义的类型：未初始化的

typeof操作符

作用：获取变量的类型

写法：typeof(变量名)或 typeof 变量名

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
</head>
<body>
<script type="text/javascript">
    // 输出整数、浮点数、字符串(单引号和双引号)、布尔、未定义、对象、null的数据类型
    var i = 5;
    document.write("整数类型：" + typeof(i)+ "<br/>");

    var d = 3.14;
    document.write("小数类型：" + typeof(d)+ "<br/>");

    var i = 'a';
    document.write("字符串：" + typeof(i)+ "<br/>");

    var i = "abc";
    document.write("字符串：" + typeof(i)+ "<br/>");

    var i = true;
    document.write("布尔：" + typeof(i)+ "<br/>");

    var u;
    document.write("未定义：" + typeof(u)+ "<br/>");

    var o = {
        name:"牛魔王",
        age: 18
    };   //定义一个对象
    document.write("对象类型：" + typeof(o)+ "<br/>");

    var n = null;  //null表示对象类型，只是这个对象没有值
    document.write("null的类型：" + typeof(n) + "<br/>");
</script>
</body>
</html>

JS数据类型的转换函数

全局函数

概念：在JS中任何地方都可以直接引用的函数

parseInt()将一个字符串转成整数。如果不能转换返回NaN
isNaN()用来判断变量是否是非数字，非数字返回true

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串转数字</title>
</head>
<body>
<script type="text/javascript">
    var num1 = "11";
    var num2 = "22";

    // 将字符串转成数字:parseInt()
    var num4 = parseInt(num1) + parseInt(num2);
    document.write(num4 + "<br/>")

    // 能转多少算多少
    var num5 = "123a56";
    document.write(parseInt(num5) + "<br/>")

    // 字符串不能转换成数字,返回NaN(Not a Number)
    var num6 = "a123";
    document.write(parseInt(num6) + "<br/>")

    // 判断一个字符串是否是数字: isNaN, 是数字字符串返回false,不是数字字符串返回true
    document.write("<hr/>")
    document.write(isNaN("123") + "<br/>")
    document.write(isNaN("123a") + "<br/>")
    document.write(isNaN("a123") + "<br/>")
</script>
</body>
</html>

JS常用的运算符

算术运算符

算术运算符用于执行两个变量或值的算术运算

JS算术运算符和Java中一模一样
在这里插入图片描述

赋值运算符

赋值运算符用于给JavaScript 变量赋值

JS赋值运算符和Java中一模一样

在这里插入图片描述

比较运算符

比较运算符用于逻辑语句的判断，从而确定给定的两个值或变量是否相等。
在这里插入图片描述
数字可以与字符串进行比较，字符串可以与字符串进行比较。字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS运算符</title>
</head>
<body>
<script>
    var m = 5;
    var n = 5;
    document.write((m == n) + "<br/>"); // true

    var x = "5"; // 会将字符串自动转成数字再比较
    document.write((m == x) + "<br/>"); // true

    // ===:恒等于,即比较值,也比较类型
    document.write((m === n) + "<br/>"); // true,值相等,类型也相同
    document.write((m === x) + "<br/>"); // false,值相等,但是类型不相同
</script>
</body>
</html>

逻辑运算符

逻辑运算符用来确定变量或值之间的逻辑关系，支持短路运算
在这里插入图片描述
逻辑运算符不建议单与&、单或|, 会变成数字

三元运算符

  • 格式： 判断条件? 值1:值2;

JS流程控制：if语句

if 语句

在一个指定的条件成立时执行代码。

if (条件表达式) {
     // 代码块;
}

if…else 语句

在指定的条件成立时执行代码，当条件不成立时执行else的代码。

if (条件表达式) {
     // 代码块1;
} else {
    // 代码块2;
}

if…else if…else 语句

使用这个语句可以选择执行若干块代码中的一个。

if (条件表达式1) {
     // 代码块1;
} else if (条件表达式2) {
    // 代码块2;
} else {
    // 代码块3;
}

非布尔类型作为条件

数据类型为真为假
number10
string⾮空串 “aaa”空串：""
undefined为假
NaN为假
object非空null

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if语句</title>
</head>
<body>
<script>
    // boolean类型
    if (true) {
        document.write("真" + "<br/>")
    } else {
        document.write("假" + "<br/>")
    }

    // 数值类型
    if (1) {
        document.write("真" + "<br/>")
    } else {
        document.write("假" + "<br/>")
    }

    // 字符串
    if ("abc") {
        document.write("真" + "<br/>")
    } else {
        document.write("假" + "<br/>")
    }

    // 对象类型
    var obj = {name:"aa"};
    if (obj) {
        document.write("真" + "<br/>")
    } else {
        document.write("假" + "<br/>")
    }
</script>
</body>
</html>

JS流程控制：switch语句

语法一：case后使用常量，与Java相同

switch (变量名) {
   case 常量值:
      break;
   case 常量值：
      break;
   default:
       break;
}

语法二：case后使用表达式

switch (true) {  // 这里的变量名写成true
  case 表达式:     // 如：n > 5
    break;
  case 表达式:
    break;
  default:
    break;
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Switch</title>
</head>
<body>
<script type="text/javascript">
    // 让用户通过提示框输入值
    var score = window.prompt("请输入一个分数", 60);
    // document.write(score + "<br/>");
    // document.write(typeof(score) + "<br/>");

    // switch(true),case后面可以跟表达式
    switch (true) {
        case score >= 90 && score <= 100:
            alert("优秀");
            break;
        case score >= 60 && score < 90:
            alert("及格");
            break;
        case score >= 0 && score < 60:
            alert("不及格");
            break;
        default:
            alert("输入有误");
            break;
    }
</script>
</body>
</html>

JS流程控制：循环语句

while语句

条件表达式值为 true 时循环执行代码

while (条件表达式) {
     需要执行的代码;
}

do-while语句

最少执行1次循环

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

for 语句

循环指定次数

for (var i = 0; i < 10; i++) {
     需要执行的代码;
}

break和continue

break: 跳出整个循环
continue：结束本次循环,接着下次循环

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乘法表</title>
    <style>
        table {
            /*细边框样式*/
            border-collapse: collapse;
        }

        td {
            /*设置内边距*/
            padding: 4px;
        }
    </style>
</head>
<body>
<script type="text/javascript"> 
    //用户输入
    var num  = window.prompt("请输入乘法表的行数：","9");
    // " 表示字符串里面的双引号
    document.write("<table border=\"1\">");
    for(var i=1; i<=num; i++) {
        // 外循环，每次是一行
        document.write("<tr>");
        for (var j=1; j<=i; j++) {
            // 内循环，每次是一个单元格
            document.write("<td>");
            document.write(j + "&times;" + i + "=" +  i*j);
            document.write("</td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");
</script>
</body>
</html>

JS命名函数和匿名函数(重点)

JS函数的概述

什么是函数：类似于Java中方法，将可以重用的代码起个名字，以后就可以通过这个名字并且传递参数来调用它

JS的两种函数：命名函数(有名字的函数)，匿名函数(没有名字的函数)

命名函数的格式

 function 函数名(参数列表) {
 	// 代码;
     return 结果;
 }

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命名函数</title>
</head>
<body>
<script type="text/javascript">
    // 定义函数
    function sum(a,b) {
        return a + b;
    }

    // 调用函数
    var result = sum(4, 3);
    document.write(result + "<br/>");
</script>
</body>
</html>

匿名函数

var 变量 = function(参数列表) {
	// 代码;
    return 结果;
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匿名函数</title>
</head>
<body>
<script>
    // 定义一个匿名函数,并将匿名函数赋值给变量
    var sum = function (a, b) {
        return a + b;
    }

    // 通过变量名调用函数
    var num = sum(10, 20);
    document.write(num + "<br/>")
</script>
</body>
</html>

JS函数不支持重载

注意

  1. 关于函数的重载：在JS中没有函数的重载，后面的方法会覆盖前面同名的方法
  2. 在每个函数的内部都有一个隐藏的数组：arguments，有个属性length

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏数组arguments</title>
</head>
<body>
<script type="text/javascript">
    function sum(a,b) {
        document.write("隐藏数组的长度：" + arguments.length + "<br/>");
        for (var i = 0; i < arguments.length; i++) {
            document.write("第" + i + "个元素：" + arguments[i] + "<br/>");
        }
        document.write("<hr/>");
        document.write("a=" + a + "<br/>");
        document.write("b=" + b + "<br/>");
    }

    //调用
    //sum(8); //参数不够
    sum(8,9,10); //参数超出
</script>
</body>
</html>

JS变量的作用域

JS的变量分为全局变量和局部变量

全局变量：定义在函数外部的

局部变量：定义在函数内部的

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量的位置</title>
</head>
<body>
    <script>
        var a = 888; // 全局变量会被保存到window
        function add() {
            var a;
            // 方法中定义局部变量，变量的声明会被提前到函数的最前面
            document.write(window.a + "<br/>"); // 访问外部的全局变量
            // var a = 10; // 局部变量,定义在方法内,只能在本方法中使用
            a = 10;

            // document.write(x + "<br/>");
        }
        
        // document.write(a + "<br/>");
        document.write(x + "<br/>");
        add();
    </script>
</body>
</html>

在浏览器中调试JS代码

设置断点

谷歌浏览器的调试界面: F12

注：设置断点以后要重新刷新页面才会在断点停下来
在这里插入图片描述

断点调试的流程

  1. 按F12打开浏览器的调试模式
  2. 选择Source选项卡
  3. 找到相应的网页
  4. 打断点
  5. F5刷新网页,执行到断点的地方
  6. 控制断点
荞澳
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1-1.HTML、CSS、JavaScript语言在web前端开发中的作用
花有重开日，人无再少年
06-02 1万+
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。 就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，...
web前端基础入门教程HTML+CSS+JavaScript
BYGFJ的博客
11-19 1434
每一个学习前端的人对于前端三剑客《html+css+JavaScript》都不会陌生，可以说这是前端的世界，就没有前端解决不了的，而在前端的世界里就没有javascript实现不了的。 关于JavaScript有一句话：凡是可以用javascript来写的应用，最终都会用javascript，javascript可运行在所有的主要平台上，也可以运行在每一个主流操作的服务器上。现如今我们在网站写任何一个主要功能的时候都需要有懂够用JavaScript写前端的开发人员。 下面我们就来了解下这三门技术都有什么
HTML，CSS，Javascript在Web开发中分别起什么作用？
热门推荐
段远山
05-18 1万+
简单描述HTML，CSS，Javascript在Web开发中分别起什么作用？ 1、什么是HTML（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。 2、CSS(层叠样式表 Cascading Style Sheets),样式定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值}) 3、JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码
web前端 html+css+javascript网页设计实例 家乡网站制作
qq_365392777
09-26 3285
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
web前端 HTML、CSS、JavaScript
weixin_43561610的博客
05-25 892
我们说，Web前端三剑客：HTML、CSS、JavaScript，它们看上去是三种不同的技术，但在实际中却是相互搭配使用的。 HTML是用来标记内容的（重在内容组织上） HTML是超文本标记语言的简称，它是一种不严谨的、简单的标识性语言。它用各种标签将页面中的元素组织起来，告诉浏览器该如何显示其中的内容。 为什么说HTML是不严谨的呢？因为HTML标签即使不闭合，也并不会影响页面内容的组织。 CSS是用来修饰内容样式的（重在内容样式美化展示上） CSS是层叠样式表的简称，它用来表现HTML文件样式的，简单说
前端开发综合指南：HTML、CSS和JavaScript详解
abments的博客
06-16 1183
本文将全面介绍HTML、CSS和JavaScript的基础知识和高级技术，帮助你从初学者成长为熟练的前端开发者。无论你是刚入门前端开发还是希望深入理解和掌握相关技术，本文都将为你提供详细的学习路径和实用的示例。
前端Web开发，HTML，css，JavaScript
weixin_43669384的博客
05-02 727
web浏览器响应流程，及技术 不同的浏览器，内核不同，对于相同的前端代码解析的效果会存在差异 web标准，三个组成部分 HTML：负责网页的结构（页面元素和内容） CSS：负责页面的表现（页面元素的外观，位置等页面样式，如：颜色，大小） JavaScript：负责网页的行为（交互效果） HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构成的语言 HTML标签都是预定义好的。例如<a&g
WEB——HTML、CSS、javascript
SansaHome的博客
11-24 404
无
web前端css+html+js
txy_200373的博客
07-07 2655
web: （WWW world wide web) 即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。能够通过浏览器访问的网站。web开发模式：混合开发、前后端分离（主要）HTML: 超文本标记语言超文本：超越了文本的限制，比普通文本更强大。
Web 前端—HTML+CSS系列
molecule_9的博客
10-20 7562
HTML+CSS
Web前端网页设计作业-个人网页(html+css+javascript)
07-13
在本项目中，"Web前端网页设计作业-个人网页(html+css+javascript)"是一个适合初学者的实践项目，旨在帮助学习者掌握Web前端开发的基本技能。这个项目包含了多个页面，如个人主页、个人博客、轮播相册、魔方相册、...
html+css+javascript网页设计源码 Web前端作业
06-01
网页设计是IT领域中至关重要的一个分支，主要...通过深入研究这些源码，不仅可以提升对HTML、CSS和JavaScript的理解，还能掌握实际的项目开发经验，对于想要踏入Web前端领域的初学者来说，是一个不可多得的实践平台。
淘宝首页web前端课设（HTML+css+js）
06-10
本web前端课设主要用到html，css知识点和一些少量的js语言编写的轮播图。适合于大一、大二正在做课设的同学进行参考。(我的博客里有做成的效果图和每个模块的解说内容，没有了解的同学可以先去看看做成功的页面效果...
基于HTML和JavaScript的航空Web前端设计源码
05-27
本设计源码提供了一个基于HTML和JavaScript的航空Web前端，包含988个文件，其中包括398张png图片，264个html页面文件，257张jpg图片，以及16个css样式文件。此外，还有13个gif图片文件，9个md文档，4个less样式文件...
Web前端大作业-个人网页(html+css+javascript)
06-28
【标题】"Web前端大作业-个人网页(html+css+javascript)"揭示了这个项目的核心是构建一个基于HTML、CSS和JavaScript的个人网页。这三种技术是Web开发的基础，用于创建动态、交互式的网页内容。 HTML（HyperText ...
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 403
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
python爬虫基础——Webbot库介绍
最新发布
qq_56262770的博客
07-22 603
Webbot是一个专为Python设计的库，用于简化网页自动化任务。它基于Selenium WebDriver，提供了一系列高级接口，使自动化任务更加直观和易于管理。Webbot库的设计理念是将复杂的网页交互抽象为简单的API调用，从而减少开发者在编写自动化脚本时的工作量。Webbot库的核心功能包括自动化表单填写、点击操作、数据抓取等，同时支持处理JavaScript渲染的页面和模拟用户行为。这些功能使得Webbot库成为自动化测试、数据收集和网页监控等领域的理想选择。
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 479
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1774
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
Web前端基础：HTML、CSS、JS详解
Web前端基础包括HTML、CSS和JS三部分。HTML是超文本标记语言的缩写，是编写网页的基础语言，用来定义网页的结构和内容。CSS是层叠样式表的缩写，用来控制网页的样式和布局。JS是JavaScript的缩写，是一种脚本语言，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值