菜单 搜索
首页 前端知识 web前端css html js

web前端css html js

2024-07-01 23:07:39 前端知识 前端哥 88 945 我要收藏

目录

1. 什么是web?

2. 初始web前端

3. web标准

4. 什么是HTML、CSS?

5. HTML结构

6. VS Code 开发工具

7. HTML常用标签

1）文本标签

2）格式化标签

3）图片标签

4）超链接标签

5）锚点标签

6）表格标签

7）列表标签

8）表单

9）视频和音频

10）内联框架iframe

行内元素和块元素

8. CSS样式

1.CSS使用方式

2. 选择器

2.1 基本选择器

（1）标签选择器

（2）类选择器

（3）id选择器

2.2 高级选择器

（4）层次选择器

（6）伪类选择器

（7）属性选择器

3. 块级盒子(block) 和内联盒子(inline)

4. CSS盒模型

5. 定位

5.1 相对定位 relative

5.2 绝对定位 absolute

5.3 固定定位 fixed

9. JavaScript

1. 什么是JavaScript？

2.引入方法

3. JavaScript基本语法

4. 变量

5.数据类型

6. 条件和循环语句

7. 函数（Function）

8. 事件

10. 综合案例

1. 什么是web?

web: （WWW world wide web) 即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。 能够通过浏览器访问的网站。

 

web开发模式：混合开发、前后端分离（主要）

 

2. 初始web前端

  • 网页由哪些部分组成？

文字、图片、音频、视频、超链接

  • 网页背后的本质是什么？

程序员写的前端代码

  • 前端代码是如何转换成用户看到的网页的？

通过浏览器转化（解析和渲染）成用户看到的网页

浏览器中对代码进行解析渲染的部分，称为浏览器的内核

注意：不同的浏览器，内核不同，对相同的前端代码解析的效果会有差异

3. web标准

  • web标准也称为网页标准，由一系列的标准组成，大部分由W3C(World Wide Web Consortium,万维网联盟)负责制定

  • 三个组成部分：

    • HTML: 负责网页的结构（页面元素和内容）

    • CSS: 负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）

    • JavaScript： 负责网页的行为（交互效果）

4. 什么是HTML、CSS?

HTML: 超文本标记语言

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

  • 标记语言：由标签构成的语言，HTML标签都是预先定义好的。 HTML5 是最新的 HTML 标准

学习：HTML 教程

CSS: 层叠样式表，用于控制页面的样式（表现）

5. HTML结构

6. VS Code 开发工具

  • Visual Studio Code(简称VS Code) 是Microsoft于2015年4月发布的一款代码编辑器

  • VS Code对前端代码有非常强大的支持，同时也支持其他编程语言（例如：C++、Java、Python、PHP、Go等）

  • VS Code 提供了非常强大的插件库，大大提高了开发效率

官网：Visual Studio Code - Code Editing. Redefined

安装教程： VSCode安装教程（超详细）_牛哄哄的柯南的博客-CSDN博客

安装 live server 插件：本地开发常常需要搭建临时的服务,作用 : 1.模拟服务器的方式打开页面 2.代码改动后,会自动刷新页面

！+ tab键快捷生成html结构

7. HTML常用标签

1）文本标签

 <hn>...</hn>标题标签，其中n为1–6的值。 值越大，标题字体越小
 <i>...</i>斜体
 <em>...</em> 强调斜体
 <b>...</b> 加粗
 <strong>...</strong> 强调加粗
 <cite></cite> 作品的标题（引⽤用）
 <sub>...</sub> 下标 <sup>...</sup> 上标
 <del>...</del> 删除线

2）格式化标签
 常⻅见格式化标签如下：
 <br/>换⾏
 <p>...</p> 换段
 <hr />⽔平分割线
 <ul>...</ul> 无序列表
 <ol>...</ol> 有序列表 其中type类型值：A a I i 1 start属性表示起始值
 <li>...</li>列表项
 <dl>...</dl>自定义列表
 <dt>...</dt>自定义列表头
 <dd>...</dd> 自定义列表内容
 <div>...</div> 常⽤于组合块级元素，以便通过 CSS 来对这些元素进⾏格式化
 <span>...</span> 常⽤于包含的⽂本，您可以使⽤用 CSS 对它定义样式，或者使⽤ JavaScript 对它进行操作。
3）图片标签

在HTML网页中插入一张图片，使用img标签，他是一个单标签：

 <img src="..."></img>

其中img标签中常用属性如下：

属性属性值说明
src图片路径必须属性
alt文本替换文本。图像不能显示的文字
title文本提示文本。鼠标放到图像上，显示的文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细

绝对路径和相对路径：

  • 绝对路径：绝对路径就是你的主页上的文件或目录在硬盘上真正的路径，(URL和物理路径) 例如： C:\txy\test.txt 代表了test.txt文件的绝对路径。 Hardware | Oracle也代表了一个URL绝对路径。

  • 相对路路径：相对与某个基准⽬目录的路路径。包含Web的相对路径（HTML中的相对目录）， 例如： 在Web开发中，"/"代表Web应用的根目录。 物理路径的相对表示， “./” 代表当前目录, "../"代表上级目录。这种类似的表示，也是属于相对路径。

4）超链接标签
  <a href="..." target="_blank"></a>
属性作用
href用于指定链接目标的ur地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能； href=“#”表示这是一个空链接； 如果href里面地址是—个文件或者压缩包,会下载这个文件
target用于指定链接页面的打开方式，其中_self为默认值(在本窗口中打开)， blank为在新窗口中打开方式

5）锚点标签
 <a href="#要跳转的元素的id"></a>

注释

 <!-- -->
6）表格标签
表格描述常用属性
<table></table>用于定义表格的标签border、width、cellspacing、cellpadding
<th></th>用于定义表格的表头rowspan、colspan、align、
<tr></tr>标签用于定义表格中的行,必须嵌套在< table></ table>标签中rowspan、colspan、align、
<td></td>用于定义表格中的单元格，必须嵌套在< tr></ tr>标签中rowspan、colspan、align、
<thead></thead>用于定义表格的页眉。< thead>内部必须拥有<tr>标签，一般是位于第一行align
<tbody></tbody>用于定义表格的主体，主要用于放数据本体。align
<tfoot></tfoot>用于定义表格的页脚align

 

7）列表标签
 <ul></ul>：定义无序列表，里面只能放 li 标签，其它标签不被允许
 ​
 <ol></ol>：定义有序列表，里面只能放 li 标签，其它标签不被允许
 ​
 <li></li>：有序列表和无序列表中的列表项，相当于一个容器，里面可以放其它标签
 ​
 <dl></dl>：定义自定义列表，里面只能包含 dt 和 dd 标签
 ​
 <dt></dt>：定义自定义列表中的项目
 ​
 <dd></dd>：描述自定义列表中的每一个项目
 ​
8）表单
 <form action="" method="" ></form>
 ​
 <input/>：输入表单元素
 ​
 <lable></lable>：绑定一个表单元素，当点击 lable 标签内的文本时，会自动将焦点转到对应的表单元素上，lable 标签的for属性必须得与相关元素的id属性相同
 ​
 <select></select>：下拉表单元素，用于定义一个下拉列表
 ​
 <option></option>：下拉列表中的元素，定义**selected=“selected”**属性时，当前项为默认选中项
 ​
 <textarea></textarea>文本域元素，用于定义一个多行文本输入框，cols属性规定每行的字符数，rows属性规定显示的行数
 ​

表单提交方式：

  • get⽅式是URL地址栏可见,长度受限制(<=2K),相对不安全.

  • post⽅式是URL地址不可见,长度不受限制,相对安全.

9）视频和音频

（1）video:

属性作用
controls可以操控播放
autoplay自动播放
loop循环播放
muted初始时关闭视频声音
 <div class="video-box" >
    <video src="videos/sintel-short.mp4" controls autoplay muted></video>
 </div>

（2）audio：

方法作用
load()加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载
play()加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
pause()暂停处于播放状态的音频、视频文件

 <audio src="audios/werock.mp3" class="music" controls></audio>

10）内联框架iframe
 <iframe src="" frameborder="0" width="" height=""></iframe>

行内元素和块元素

  • 块元素： 无论内容多少，该元素独占一行

    (p, h1-h6...address、article、 audio canvas ， div ， form， header , table , section , ol , ul ，form )

  • 行内元素

    (不会换行)元素的内容撑开宽度，左右都是行内元素的可以排在一行

    （a, strong ,em, button, input ， label, select, textarea ,dd , span )

8. CSS样式

1.CSS使用方式

（1）内部样式：

  • style属性

在元素中，写style属性，在style属性中编写样式 <元素 style="样式声明;样式声明....."></元素>

  <div style="text-align: center; background-color: aqua;height: 300px;width: 300px;">
         我是盒子
 </div>

只对当前元素生效，代码没有可重用性 内联样式默认优先级最高 内联样式只在学习和测试中使用，项目基本不用

  • style标签

在head标签中，编写style标签，在style标签内部，编写属性 选择器{样式声明;样式声明…} 选择器：定义页面中使用这个样式的元素条件

  <style>
      #box{
          text-align: center;
          background-color:aquamarine;
          height: 300px;width: 300px;
      }
 </style>

（2）外部样式

  • 链接式：

建一个.css文件，在html中的head标签里，使用link引入

  <link rel="stylesheet" href="...">//创建一个css文件

2. 选择器

选择器，规范了页面中哪些元素能够使用当前设置的样式，就是一个条件，符合这个条件的元素都可以使用这个样式。

作用：选择页面上的某一个元素或者某一类元素

2.1 基本选择器

不遵循就近原则，id > class选择器 > 标签选择器

（1）标签选择器

选择所有标签元素

 
<style>
   p{
     font-size: 80px;//字体大小
     color: red;
     }
   </style>
 </head>
 <body>
     
 <h1>哈喽</h1>
 <p>你好呀</p>
 <p>好的</p>    

（2）类选择器

. + 类名

 <!--    类选择器好处：可以多个标签归类，是同一个class -->
 <style>
     .tutu{
         color:green ;
     }
     .tt{
         color: purple ;
     }
 </style>
 </head>
 <body>
 ​
 <h3 class="tt">标题一</h3>
 <h3 class="tt">标题二</h3>
 <h3 class="tutu">标题三</h3>

（3）id选择器
 <!-- # + id名 -->
 <style>
     /*id选择器格式：id必须保证全局唯一
     不遵循就近原则，优先级由高到低 id > class选择器 > 标签选择器
     #id名称{}
     */
     #tutu{
         color: blue;
     }
 </style>
 </head>
 <body>
 ​
 <h1 id="tutu">你好吗</h1>
2.2 高级选择器
（4）层次选择器

  1. 后代选择器：在某个元素的后面的所有

     body p{
     background: orange;
 }

  2. 子选择器：body后面的一代,body 的直系子女

     body>p{
     background: pink;
 }

  3. 相邻兄弟选择器 ： 相邻向下的一个元素

     .active+p{
   background: blue;
 }

  5. 通用选择器 : 当前选中元素向下的所有兄弟元素

 .active~p{
    background: red;
 }

 

（6）伪类选择器

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。伪类就是开头为冒号的关键字。

选择器例子例子描述
:activea:active匹配被点击的链接
:checkedinput:checked匹配处于选中状态的 <input> 元素
:disabledinput:disabled匹配每个被禁用的 <input> 元素
:emptyp:empty匹配任何没有子元素的 <p> 元素
:enabledinput:enabled匹配每个已启用的 <input> 元素
:first-childp:first-child匹配父元素中的第一个子元素 <p>，<p> 必须是父元素中的第一个子元素
:first-of-typep:first-of-type匹配父元素中的第一个 <p> 元素
:focusinput:focus匹配获得焦点的 <input> 元素
:hovera:hover匹配鼠标悬停其上的元素
:in-rangeinput:in-range匹配具有指定取值范围的 <input> 元素
:invalidinput:invalid匹配所有具有无效值的 <input> 元素
:lang(language)p:lang(it)匹配每个 lang 属性值以 "it" 开头的 <p> 元素
:last-childp:last-child匹配父元素中的最后一个子元素 <p>， <p> 必须是父元素中的最后一个子元素
:last-of-typep:last-of-type匹配父元素中的最后一个 <p> 元素
:linka:link匹配所有未被访问的链接
:not(selector):not(p)匹配每个非 <p> 元素的元素
:nth-child(n)p:nth-child(2)匹配父元素中的第二个子元素 <p>
:nth-last-child(n)p:nth-last-child(2)匹配父元素的倒数第二个子元素 <p>
:nth-last-of-type(n)p:nth-last-of-type(2)匹配父元素的倒数第二个子元素 <p>
:nth-of-type(n)p:nth-of-type(2)匹配父元素的第二个子元素 <p>
:only-of-typep:only-of-type匹配父元素中唯一的 <p> 元素
:only-childp:only-child匹配父元素中唯一的子元素 <p>
:optionalinput:optional匹配不带 "required" 属性的 <input> 元素
:out-of-rangeinput:out-of-range匹配值在指定范围之外的 <input> 元素
:read-onlyinput:read-only匹配指定了 "readonly" 属性的 <input> 元素
:read-writeinput:read-write匹配不带 "readonly" 属性的 <input> 元素
:requiredinput:required匹配指定了 "required" 属性的 <input> 元素
:rootroot匹配元素的根元素，在 HTML 中，根元素永远是 HTML
:target#news:target匹配当前活动的 #news 元素（单击包含该锚名称的 URL）
:validinput:valid匹配所有具有有效值的 <input> 元素
:visiteda:visited匹配所有已经访问过的链接

a标签有四种伪类，建议顺序 link visited hover active

：hover 悬停时

：link 链接前

：visited 链接后

：active 点击后

：focus 获取焦点

：first-child 只能是第一个，是第一个子级元素

：first-of-type 第一个 类型的标签， 不用是第一个

：nth-of-type（）

     <style>
         ul li:first-child{
             background: deeppink;
         }
 ​
         /*选中p0:定位到父元素，选择当前元素的第一个元素
         选择当前元素的父级元素，选中父级元素的第一个，并且是当前元素才生效，顺序
         */
 /*交集选择器：该选择器选取父元素的第 N 个子元素 */
         p:nth-child(2){
             background: orangered;
         }
 ​
         /*选中父级元素下的元素的第二个元素
           选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
 */
 ​
         p:nth-of-type(2){
             background: mediumpurple;
         }
     </style>
 ​
 </head>
 <body>
 ​
     <p>p0</p>
     <p >p1</p>
     <p>p2</p>
     <p>p3</p>
     <ul>
         <li>l1</li>
         <li>l2</li>
         <li>l3</li>
     </ul>

在这里插入图片描述

表格奇偶显示

   <style>
 table{
             width: 500px;
             height: 200px;
             border: 1px solid black;
             text-align: center;
         }
         table tr,td{
             border: 1px solid black;
         }
            table tr:nth-of-type(odd){
             background:#BCD7DA;
         }
         table tr:nth-of-type(even){
             background:#76B7BC;
         }
     </style>
 </head>
 <body>
 ​
 <table>
     <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
     </tr>
     <tr>
         <td>4</td>
         <td>5</td>
         <td>6</td>
     </tr>
     <tr>
         <td>7</td>
         <td>8</td>
         <td>9</td>
     </tr>
     <tr>
         <td>10</td>
         <td>11</td>
         <td>12</td>
     </tr>
 </table>

（7）属性选择器
 div[id]{ /*div标签中有id属性的所有元素*/
     background:red;
 }

正则符号

 = 绝对等于
 *= 包含
 ^=以什么开头
 $=以什么结尾
     <style>
         /*.demo a{*/
         /*    float: left;*/
         /*    display: none;*/
         /*    */
         /*}*/
 ​
         a[id="first"]{
             background: deeppink;
         }
 ​
         a[class*="active"]{
             background: orange;
         }
 ​
         a[href^="http"]{
             background: blue;
         }
 ​
         a[href$="doc"]{
             background: darkgrey;
         }
 ​
     </style>
 </head>
 <body>
 ​
 <p class="demo">
     <a href="https://www.baidu.com" class="link item first" id="first">1</a>
     <a href="" class="link item active" target="_blank" title="test">2</a>
     <a href="images/123.html" class="link item active">3</a>
     <a href="images/123.png" class="link item ">4</a>
     <a href="abc" class="link item first">5</a>
     <a href="/a.pdf" class="link item first">6</a>
     <a href="abc.doc" class="link item first">7</a>
     <a href="abcd.doc" class="link item last">8</a>
 </p>

3. 块级盒子(block) 和内联盒子(inline)

一个被定义成块级的（block）盒子会表现出以下行为：

  • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽

  • 每个盒子都会换行

  • width 和 height 属性可以发挥作用

  • 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开”

除非特殊指定，诸如标题 (<h1>等) 和段落 (<p>) 默认情况下都是块级的盒子。

如果一个盒子对外显示为 inline，那么他的行为如下：

  • 盒子不会产生换行。

  • width 和 height 属性将不起作用。

  • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。

  • 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

4. CSS盒模型

  • Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.

  • Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。

  • Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。

  • Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

 .box {
   width: 350px;
   height: 150px;
   margin: 25px;
   padding: 25px;
   border: 5px solid black;
 }

如果使用标准模型，实际占用空间的宽高分别为：宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)。

  <style>    
        .d2{
             width: 100px;
             height: 100px;
             border: 10px solid black;
             /* 上 右 下 左 */
             margin: 10px 50px 30px 10px;
             padding: 10px;
             background: pink;
         }
     </style>
 </head>
 <body>
         <div class="d2">
             盒子2
         </div>

5. 定位

5.1 相对定位 relative

相对于自己原来的位置，进行指定的偏移，相对定位仍然在标准文档流中，原来的位置会被保留下来

 position:relative;

 

5.2 绝对定位 absolute
 position:absolute;

1.没有父级元素定位的情况下相对于浏览器定位

2.假设父级元素存在定位，通常会相对父级元素偏移

3.在父级元素内移动

相对于父级元素或浏览器的位置进行指定的偏移，绝对定位不在标准文档流中，原来的位置不会保留

 
<style>       
        div{
             width: 100px;
             height: 100px;
          
         }
         #box3{
              position:relative;
              background-color: aqua;
              left:100px;
         } 
         #box4{
              position:absolute;
              background-color:chartreuse;
              left:100px;
         }
     </style>
  <div id="box2">
        <div id="box3">         
        </div>
        <div id="box4">         
        </div>
     </div>

5.3 固定定位 fixed
 
<style>
         div{
             width: 100px;
             height: 100px;
             position: fixed;
             float: right;
             border: 1px solid black;
            
             right: 0px;
             bottom: 100px;
         }
         #box5{
             background-color: aquamarine;
             position: absolute;
         }
         #box6{
             position: fixed;
             background-color: aqua;
         }
     </style>
 <div id="box5">
     绝对定位
 </div>
 <div id="box6"> 
     固定定位
 </div>

 

案例2：当鼠标悬停时切换颜色

（补充：onmouseover 事件发生在鼠标指针移动到元素或它的子元素上时，当鼠标指针移出元素或其子元素之一时，会发生 onmouseout 事件。）

 <style>
        #menu{
            width: 400px;
            height: 280px;
            background: black;
            padding: 10px;
        }
        .item{          
            border-top: 20px solid greenyellow;
            height: 50px;
            line-height: 50px;
            color:white;
            font-size: 20px;
        }
        .item:hover{
            color: yellow;
            border-top: 20px solid yellow;
        }
    </style>
</head>
<body>
    <div id="menu" onmouseout="changeColor('#000')">
        <div class="item" onmouseover="changeColor('#abc')" ">
            Apple
        </div>
        <div class="item" onmouseover="changeColor('#F99')">
            Banana
        </div>
        <div class="item" onmouseover="changeColor('#99F')">
            Pear
        </div>
        <div class="item" onmouseover="changeColor('#aaa')">
            Strawberry
        </div>
    </div>
   <script>
    function changeColor(color){
      document.getElementById('menu').style.background = color
    }
   </script>
</body>
</html>

 

9. JavaScript

1. 什么是JavaScript？

JavaScript 编程语言 流程控制

JavaScript ：是一种弱类型脚本语言，其代码源不需经过编译，而是由浏览器内置的JavaScript引擎解释运行，实现业务逻辑和页面控制（决定功能）

Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果，但其实是两种完全不同的语言。

2.引入方法

  • 内部

 <!-- 2.嵌入式js -->

 <script>
     alert('你好');
 </script>
 </head>
 <body>
     <!-- 1.行内式js -->
 <input type="button" value="点击" onclick="alert('Hello')" />
 </body>

  • 外部引入

 <script  src="..."></script>双标签

3. JavaScript基本语法

1. 注释

不同于html，JavaScript注释和 java 注释一样

  • 单行注释

 //你好

  • 多行注释

 /*
 alert('你好')
 */

2. 输入输出语句

方法说明
alert(msg)浏览器弹出警示框
console.log(msg)浏览器控制台打印输出信息
prompt(msg)浏览器弹出输入框，用户可以输入
confirm(msg)显示对话框，其中包含消息、确定按钮和取消按钮。


 <script>
     prompt('请输入姓名');
     alert("你好");
     console.log('这是程序员能看到的');
 </script>
 

4. 变量
 

变量是存储值的容器。要声明一个变量，先输入关键字 let 或 var，然后输入合适的名称：
 

 var age;
 let age = 18;
 

  •  
    var 和 let 区别：
     
 

1、作用域不同
 

var是函数作用域，let是块作用域。
 

在函数中声明了var，整个函数内都是有效的，比如说在for循环内定义的一个var变量，实际上其在for循环以外也是可以访问的
 

而let由于是块作用域，所以如果在块作用域内定义的变量，比如说在for循环内，在其外面是不可被访问的，所以for循环推荐用let
 

2、let不能在定义之前访问该变量，但是var可以。
 

let必须先声明，再使用。而var先使用后声明也行，只不过直接使用但没有定义的时候，其值是undefined。var有一个变量提升的过程，当整个函数作用域被创建的时候，实际上var定义的变量都会被创建，并且如果此时没有初始化的话，则默认为初始化一个undefined
 

3、let不能被重新定义，但是var是可以的
 

 

注： JavaScript 并不要求在每个语句后面一定要加分号，因为在大部分情况下 JavaScript 引擎是可以识别出语句的结束位置并且自动插入分号，这个过程被称为 ASI (Automatic Semicolon Insertion) 。但是，并不是所有的语句都能省略分号，因为 ASI 解析规则会导致某些情况代码异常。
 

注： JavaScript 对大小写敏感，myVariable 和 myvariable 是不同的。如果代码出现问题了，先检查一下大小写！
 

 

 
 

5.数据类型
 

  •  
    数据类型
     
 

简单数据类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
 

复杂数据类型：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
 

 

变量解释示例
String字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）括起来。let myVariable = '李雷';
Number数字：无需引号。let myVariable = 10;
Boolean布尔值（真 / 假）： true/false 是 JS 里的特殊关键字，无需引号。let myVariable = true;
Array数组：用于在单一引用中存储多个值的结构。let myVariable = [1, '李雷', '韩梅梅', 10]; 元素引用方法：myVariable[0], myVariable[1] ……
Object对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心。let myVariable = document.querySelector('h1'); 以及上面所有示例都是对象。
 

 

  •  
    变量不声明数据类型
     
 

JavaScript是一种弱类型或者动态语言，不同提前声明变量的类型，在程序运行的过程中，类型会被自动确定。同时，相同的变量可用作不同的类型；
 

 var age=10;  //这是一个数字类型
 var name='你好'; //这是一个字符串
 ​
 var x=11;
 var x='Hello';
 

在 JavaScript 中，单引号('')和双引号("") 经常用于创建字符串。通常情况下，使用双引号或单引号没有区别，它们最后都代表一个字符串。
 

 

6. 条件和循环语句
 

条件语句是一种代码结构，用来测试表达式的真假，并根据测试结果运行不同的代码。一个常用的条件语句是 if ... else。下面是一个示例：
 

 
 

let x = 'hello'
 if (x === 'hello') {//===表示数据类型和数值都相同
   alert('hello');
 } else {
   alert('你好……');
 }
 ​
 switch(x){
     case '...':
 }
 

if ( ... ) 中的表达式进行测试，用等于运算符来比较变量 iceCream 与字符串 'chocolate' 是否相等。如果返回 true，则运行第一个代码块；如果返回 false，则跳过第一块直接运行 else 之后的第二个代码块。
 

 

7. 函数（Function）
 

函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。之前已经涉及过一些函数，比如：
 

 let myVariable = document.querySelector('h1');
 

 alert('hello!');
 

document.querySelector 和 alert 是浏览器内置的函数，随时可用。
 

如果代码中有一个类似变量名后加小括号 () 的东西，很可能就是一个函数。函数通常包括参数，参数中保存着一些必要的数据。它们位于括号内部，多个参数之间用逗号分开。
 

比如， alert() 函数在浏览器窗口内弹出一个警告框，还应为其提供一个字符串参数，以告诉它警告框里要显示的内容。
 

下面的示例是为两个参数进行乘法运算的函数：
 

 function multiply(num1, num2) {
   let result = num1 * num2;
   return result;
 }
 

尝试在控制台运行这个函数，不妨多试几组参数，比如：
 

 multiply(4, 7);
 multiply(20, 20);
 multiply(0.5, 3);
 

 

8. 事件
 

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是点击事件，鼠标的点击操作会触发该事件。可尝试将下面的代码输入到控制台，然后点击页面的任意位置：
 

 document.querySelector("html").addEventListener("click", function () {
   alert("你好");
 });
 

将事件与元素绑定有许多方法。在这里选用了html元素，然后调用了它的addEventListener 回调函数（当事件发生时，调用该函数）传入该函数中作为调用参数。
 

刚刚我们传递给 addEventListener() 的函数被称为匿名函数，因为它没有名字。匿名函数还有另一种我们称之为箭头函数的写法，箭头函数使用 () => 代替 function ()：
 

 document.querySelector('html').addEventListener('click', () => {
   alert('你好');
 });
案例1：点击切换图片

     <style>
         img{
             width: 300px;
             height: 200px;
         }
     </style> 
 </head>
 <body>
     <img src="images/2.jpg" alt="" id="img">
     <script>
         let myImage = document.querySelector('img');//获取文档中 id="img" 的元素：
         myImage.onclick = function() {
             let mySrc = myImage.getAttribute('src');
             if(mySrc === 'images/1.jpg') {
             myImage.setAttribute('src', 'images/2.jpg');
             } else {
             myImage.setAttribute('src', 'images/1.jpg');
             }
         }
     </script>
 

案例2：用户点击开始测试按钮，跳出测试界面，提示用户输入姓名并且确认开始测试后，显示测试题，用户输入答案后将结果显示给用户。
 

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>js</title>
     <style>
          .button {
             display: inline-block;
             padding: 15px 25px;
             font-size: 24px;
             cursor: pointer;
             text-align: center;   
             text-decoration: none;
             outline: none;
             color: #fff;
             background-color: #4CAF50;
             border: none;
             border-radius: 15px;
             box-shadow: 0 9px #999;
             margin: 50px;
             }
          .button:hover {background-color: #3e8e41}
          .button:active {
             background-color: #3e8e41;
             box-shadow: 0 5px #666;
             transform: translateY(4px);
             }
     </style>
     <!-- 2.嵌入式js -->
     <script>
         // prompt('请输入姓名');
         // alert("你好");
         // console.log('这是程序员能看到的');
         // var age;
         // age=19;
         // console.log(age);
         function test(){
              var name = prompt('请输入你的名字');
              if(name != null){
                  if( confirm(name+'你好，确定开始测试吗？')){
                 var ans = prompt('你最喜欢吃什么水果？A.苹果 B.香蕉 C.草莓 D.西瓜');
                 switch(ans){
                     case 'A':
                         alert('你是一个阳光的人');
                     break;
                     case 'B':
                         alert('你是一个温柔的人');
                     break;
                     case 'C':
                         alert('你是一个可爱的人');
                     break;
                     case 'D':
                         alert('你是一个开朗的人');
                     break;
                 }
                 alert('测试结束');
             }else{
                 alert('Bye~');
             }
         }
         }
     </script>
 </head>
 <body>
     <!-- 1.行内式js -->
 <input class="button" value="开始测试" onclick="test()" />
 </body>
 </html>
 

 

10. 综合案例
 

简易的音乐播放器：实现音乐的播放、停止、切换。
 

 

 
 

 

 

 

 

 

 

						

												

							转载请注明出处或者链接地址：https://www.qianduange.cn//article/13731.html
						

						
						
						

							
标签

													

						

														

								
								

																		    上一篇：HTML基本结构及基本标签
																	

							

							
						

					

					
					
					

						

							
							评论
						

						

							

							
						

					

					
					

						
相关文章

						
					

				

				

					

						

							

								
									
									前端哥
									
									
前端哥

								
							

							
						

					

					

						

							
						

					

					
					

						
发布的文章

						

														

								

									Oracle 获取json字符串指定内容
								

								
2024-07-29 00:07:31

							

														

								

									【C  集群聊天服务器（二）】｜json简单入门
								

								
2024-07-29 00:07:31

							

														

								

									在echarts中使用geojson地图
								

								
2024-07-29 00:07:05

							

														

								

									目标检测篇：如何根据xml标注文件生成类别classes的json文件
								

								
2024-07-29 00:07:33

							

														

								

									IDEA2023.2.3 servlet.java中import com.alibaba.fastjson.JSONObject；标红问题解决
								

								
2024-07-29 00:07:32

							

														

								

									【PostgreSQL】Spring boot   Mybatis-plus   PostgreSQL 处理json类型情况
								

								
2024-07-29 00:07:14

							

														

								

									2024年Go最全JSON教程（非常详细）(1)，2024年最新阿里P8大牛从零开始教Golang开源框架
								

								
2024-07-29 00:07:48

							

														

								

									json进阶(一)js读取解析JSON类型数据_js有序读取 jsonobject(1)
								

								
2024-07-29 00:07:48

							

														

								

									月下载量千万的 npm 包被黑客篡改，Vue 开发者可能正在遭受攻击
								

								
2024-07-29 00:07:10

							

														

								

									未找到 [1.06.2303220][darwin-arm64]
								

								
2024-07-29 00:07:10

							

													

					

					
					
					

						

							
						

					

					
					

						
大家推荐的文章

						

														

								

									
										1
										
在HTML和CSS当中运用显示隐藏

										
2024-06-17 09:06:541000

									
								

							

														

								

									
										2
										
成为优秀的TS体操高手 之 TS 类型体操前置知识储备

										
2024-06-10 11:06:351000

									
								

							

														

								

									
										3
										
django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

										
2024-06-06 10:06:201000

									
								

							

														

								

									
										4
										
html简单网页代码：基于html关爱空巢老人网页设计与实现

										
2024-06-04 10:06:181000

									
								

							

														

								

									
										5
										
jquery实现注册表单验证（仅供参考）

										
2024-06-07 00:06:411000

									
								

							

														

								

									
										6
										
基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

										
2024-05-29 10:05:301000

									
								

							

														

								

									
										7
										
VUE3 Vite Pinia TypeScript项目笔记

										
2024-05-20 14:05:191000

									
								

							

														

								

									
										8
										
轻松掌握数据库中JSON数据提取：json_extract函数用法详解

										
2024-05-09 11:05:011000

									
								

							

														

								

									
										9
										
HTML5(六)——Canvas 高级操作

										
2024-05-09 10:05:191000

									
								

							

														

								

									
										10
										
UE4.27支持HTML5

										
2024-05-07 13:05:261000

									
								

							

													

					

					
					
				

			

		

		
		
		
		
				

			

				

					rss订阅
					百度xml
					谷歌xml
					搜狗xml
					soxml
					神马搜索xml
					网站地图
				

				

					Copyright © 2018-2022 前端哥
					
					陕ICP备2023000550号-1
					
						前端哥
					
				

				
讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

			

			

				

					前端技术交流源码工具分享网站				

			

		

		

			

				会员中心
				联系我
				留言建议
				回顶部
			

		

		
		
		
		
		

			

		

		
		

			
复制成功！