JavaScript入门

源

javascript前身叫做livescript，sun公司推出java，netspace公司引进java的概念，重新设计livescript，并更名javascript。

发明者，布兰登.艾克，表单验证原先要经过服务器，服务器压力大，等待时间长，js仅在客户端就可完成。

是什么

是一种脚本语言，是一种轻量级的编程语言。

JavaScript可插入 HTML 页面的编程代码，由所有的浏览器执行，从服务端被下载到客户端由浏览器执行。

作用

1、表单验证

2、页面特效

3、动态调整页面

组成

1、核心语法（ECMAScript）

2、浏览器对象模型(BOM)

1) 是什么

Browser Object Model,浏览器对象模型：由一系列对象组成，是访问、控制、修改浏览器属性的方法.

2) 结构图

BOM结构图

3) 内容简介

window

BOM使javascript有能力与浏览器进行沟通，这个沟通从window对象开始，所有的window对象的属性和方法自动成为javascript的全局变量和全局函数。可直接使用。

history

包含用户访问过的URL

最初设计表示浏览历史，出于隐私，不允许js访问已经访问过的实际URL。

仍保持back（），forwore（），go（）等方法。

location

包含当前页面的URL信息，可重载当前页面或装入新页面

document

一个比较特殊的对象，它既是浏览器对象模型BOM中的一个对象，同时表示文档对象模型DOM中整个HTML文档。

3、文档对象模型(DOM)

1）是什么

文档对象模型：由一系列对象组成，是访问、控制、修改HTML文档的标准方法。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

BOM是一个与语言无关，与平台无关的标准接口规范。将HTML 文档解析成树结构。

2）结构图

3）内容简介

节点：

在DOM （文档对象模型）中，每个部分都是节点：

文档节点：文档本身
元素节点：所有 HTML 元素
属性节点：所有 HTML 属性
文本节点：HTML 元素内的文本
注释节点：注释

element.appendChild() 向元素添加新的子节点，作为最后一个子节点。

element.removeChild() 从元素中移除子节点。

element.replaceChild() 替换元素中的子节点。

element.insertBefore() 在指定的已有的子节点之前插入新节点。

getElementById() 返回对拥有指定 id 的第一个对象的引用。

getElementsByName() 返回带有指定名称的对象集合。

getElementsByTagName() 返回带有指定标签名的对象集合。

创建方式

1、外部js文件

将JS代码写入后缀名为.JS的外部文件中，只写脚本代码，不用写<SCRIPT>标签。html页面引入。

js文件：

alert("哈哈！“);

HTML引入：

适用于：代码量较大。或者再多个页面中共享

2、<script>标签

function demo(a){

alert(a)

}

</script>

适用于:代码较少，较少重复使用

3、HTML标签内

适用于：特别简短的JS 代码

数据类型

数值number

整数或小数

实例

var x1=34.00; //使用小数点来写

var x2=34; //不使用小数点来写

数组array

实例

var cars=new Array();

cars[0]="Saab";

cars[1]="Volvo";

cars[2]="BMW";

var cars=new Array("Saab","Volvo","BMW");

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

布尔

true 或 false

实例

var x=true;

var y=false;

字符串string

字符串是存储字符（比如 "Bill Gates"）的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号：

实例

var carname="Volvo XC60";

var carname='Volvo XC60';

对象object

对象由花括号分隔。

在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。

属性由逗号分隔：

实例

var person={firstname:"John", lastname:"Doe", id:5566};

对象属性有两种寻址方式：

name=person.lastname;

name=person["lastname"];

undefined

保留字，已申明变量，没有赋值。

null

定义空或不存在的引用。

不等与空字符串或 0

1、undefined：这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

2、判断数据类型（typeof）

var height=180;

document.write("height的类型为："+typeof(height));

函数

作用

使程序结构清晰，封装多条语句，代码复用，便于维护。

结构

关键字声明function，参数，函数体。

注意

1.函数定义时不必指定返回值。

2.任何函数任何时候可通过return语句实现返回值。

3.除return语句外，无任何声明也能表示返回值

4.函数执行完return立即退出，return之后的语句永远不会执行

5.一个函数可以多个return

6.return可以不带返回值，会返回undefined

//1.函数定义时不必指定返回值。

function a(num1,num2){

alert(num1+num2);

}

a(1,2);

//2.任何函数任何时候可通过return语句实现返回值。

function b(num1,num2){

return num1+num2;

}

alert (b(1,3));

//3.除return语句外，无任何声明也能表示返回值

function c(num1,num2){

return num1+num2;

}

var result=c(1,4);

alert(result);

//4.函数执行完return立即退出，return之后的语句永远不会执行

function d(num1,num2){

return num1+num2;

//return后面的语句永远不会执行

alert(num1+num2);

}

alert(d(1,5));

//5.一个函数可以多个return

function e(num1,num2){

if(num1>num2){

return num1-num2;

}

else{

return num2-num1;

}

alert(e(1,2));

alert(e(3,1));

//6.return可以不带返回值，会返回undefined

function f(num1,num2){

return;

}

alert(f(1,6));

输出

1、针对用户的

alert()

<button onclick="alert('我是alert方式的弹框!')">alert</button>

alert

confirm()

<button onclick="confirm('我是confirm方式的弹框!')">confirm</button>

confirm

prompt()

两个参数一个提示信息一个默认值

<button onclick="prompt('我是prompt方式的弹框1',6)">confirm</button>

prompt

2、针对HTML文档元素

innerHTML

双向功能：获取对象的内容或向对象插入内容；

//获取对象的内容

function gets(){

alert(document.getElementById("innerHtml").innerHTML);

}

//向对象插入内容

function puts() {

document.getElementById("innerHtml").innerHTML="i am not here";

}

</script>

<button onclick="gets()">innerHtmlGets</button>

<button onclick="puts()">innerHtmlPets</button>

document.write()

function myFunction() {

document.write(Date());

}

</script>

<button onclick="document.write(Date());">document.write</button>

使用 document.write() 仅仅向文档输出写内容,如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

document.write()

3、控制台

console.log()

浏览器支持调试

可以在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式

在调试窗口中点击 "Console" 菜单。

c=5+6;

console.log(c);

注释

//我不会执行

/* 我不会执行 */

、abbr

abbr 全称是 abbreviations，意思是缩写。应用场景也很简单，为一些文章中的缩写增加注释。

以前在文章中对于缩写的解释经常会这么做：

DAU（Daily Active User），日活跃用户数 ......

那我们用 abbr 标签呢？

<abbr title="Daily Active User">
    DAU
</abbr>
<span>，日活跃用户数 ......</span>

展示的效果如下：

这个标签就可以把全称隐藏掉，弱化信息量，让真正不知道该缩写的用户主动去获取缩写的具体意思，这个在 markdown 里经常会出现。

二、mark

<mark/> 在 markdown 中也是很常用的，用于将包裹的文本高亮展示。

<mark>高亮文本</mark>

效果如下：

如果全文统一高亮样式，可以专门对 mark 标签进行样式重置，这样就不用对你用的每个 div 加一个 highlight 的类名了，又不语义化，又徒增文档大小。

三、sup、sub

<sup/>和<sub/>分别表示上标和下标，在 markdown 中出现得也很频繁，比如数学公式和引用。

<div>3<sup>[2]</sup></div>
<div>4<sub>2</sub></div>

效果如下：

上标和下标的样式原理也比较简单，主要就是利用了 vertical-align 的 top 和 sub 属性值，然后将字号缩小，不过有现成的标签，干嘛不用呢？

四、figure

figure 是用于包裹其它标签的内容的，然后再利用另一个标签 figcaption ，可以对包裹的内容进行一个文本描述，例如：

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="大象">
    <figcaption>这是一张大象的照片</figcaption>
</figure>

效果如下：

那要是图片挂了呢？

再友好点处理，我们把 img 标签的 alt 属性去掉。

漂亮，终于把我一直厌烦的图裂 icon 给干掉了，样式还巨好看。

当然不止能包裹 img 标签，其它任何都是可以的。

嘿嘿，给大家在本文来个实战，下面这个可以点击，样式也是利用了 figure 这个标签。

我是figure标签产生的

五、progress

说到 <progress/> 这个标签就很有意思了，去年有段时间我做的业务里涉及到了进度条，当时是前同事做的，然后有一些性能问题，我就在研究如何优化，减少进度条改变带来的性能问题。

虽然最后问题是解决了，但是也有幸收到了张鑫旭大佬的评论，他告诉我 progress 这个标签就足够了，既有语义化，又有进度条的功能，性能还好，兼容性也很不错。后来经过一番尝试，还真是，当时是我孤陋寡闻了，也安利给大家。

<!-- 进度条最大值为100，当前进度为60，即60% -->
<progress max="100" value="60"/>

浏览器自带的样式就已经很好看了，效果如下：

业务中我们也就可以通过控制 value 属性，来改变进度条的进度了。

六、area

area 这个标签也非常有意思，它的作用是为图片提供点击热区，可以自己规定一张图的哪些区域可点击，且点击后跳转的链接，也可以设置成点击下载文件，我们来举个例子：

  <img src="example.png" width="100" height="100" alt="" usemap="#map">

  <map name="map">
    <area shape="rect" coords="0,0,100,50" alt="baidu" href="https://www.baidu.com">
    <area shape="rect" coords="0,50,100,100" alt="sougou" href="https://www.sogou.com/">
  </map>

area 一般要搭配 map 标签一起使用，每个 area 标签表示一个热区，例如上面代码中，我们定义了两个热区，热区形状都为rect（矩形），他们的热区分别是：

坐标 (0,0) 到坐标 (100,50) 的一个矩形
坐标 (0,50) 到坐标 (100,100) 的一个矩形

我们都知道，默认的坐标轴是这样的：

因此，我们划分的两个热区就是:

最后再来看一下我们的实际效果：

七、details

details 字面意思是 "详情"，在 markdown 里也经常用，用该标签包裹了的内容默认会被隐藏，只留下一个简述的文字，我们点击以后才会展示详细的内容。

<details>
  <p>我是一段被隐藏的内容</p>
</details>

效果如下：

这还没有加任何一行的 js 代码，我们点击后，details 标签上会多一个 open 的属性，被隐藏的内容就展示出来了。

默认情况下，简要文字为 "详情"，想要修改这个文字，要搭配 summary 标签来使用。

<details>
  <summary>点击查看更多</summary>
  <p>我是一段被隐藏的内容</p>
</details>

就搞定了！

八、dialog

浏览器自带弹窗方法 alert、confirm、prompt，样式固定且每个浏览器不同，同时还会阻塞页面运行，除了这个还提供了一个 dialog 标签，它的使用方式有点类似于现在各大组件库的 Modal 组件了，浏览器还为该标签提供了原生的 dom 方法：showModal、close，可以直接控制弹窗的展示和隐藏。

<dialog id="dialog">
    <input type="text">
    <button id="close">ok</button>
</dialog>
<button id="openBtn">打开弹框</button>

<script>
    const dialog=document.getElementById('dialog')
    const openBtn=document.getElementById('openBtn')
    const closeBtn=document.getElementById('close')
  
    openBtn.addEventListener('click', ()=> {
        // 打开弹框
        dialog.showModal()
    })
    closeBtn.addEventListener('click', ()=> {
        // 隐藏弹框
        dialog.close()
    })
</script>

效果如下：

细心的你有没有发现，这原生的弹框还自带背景蒙层，点击是关闭不掉的，但起码它不会阻塞页面。

然后我们在弹窗展示时，也可以通过 esc 键来关闭弹窗。

九、datalist

datalist 是用于给输入框提供可选值的一个列表标签，类似咱们常用的 Select 组件。

我可以用其实现一个 "输入联想" 的功能。

<label> 输入C开头的英文单词：</label>
<input list="c_words"/>

<datalist id="c_words">
  <option value="China">
  <option value="Click">
  <option value="Close">
  <option value="Const">
  <option value="Count">
</datalist>

来试一试：

刚点击时会把所有推荐的选项都列出来，然后根据后面输入的内容，会过滤掉不匹配的选项，比如我输入 cl，会过滤掉不是 cl 开头的单词，最后只剩下 Click 和 Close 了。

最后我发现，他这个下拉框有点好看啊？为啥这原生的 input 框默认样式那么丑，啥时候改改。

十、fieldset

fieldset 标签是用于分组管理 form 表单内的元素的，若 fieldset 设置了 disabled 属性，则被其包裹的所有表单元素都会被禁用置灰，且不会随着表单一起提交上去，是的就成了摆设。

什么意思呢？看个例子：

<form action="/example">
  <fieldset disabled>
    <legend>被禁用区域</legend>
    <label>ID：</label>
    <input type="text" name="id" value="1">
    <label>邮箱：</label>
    <input type="text" name="email" value="1234567@163.com">
  </fieldset>
  <label>名字：</label>
  <input type="text" name="name">
  <button type="submit">提交</button>
</form>

这里我们把 ID 和邮箱的表单包裹了起来，且设置了 disabled，只开放了一个 name 的输入控件，此时界面如下：

可以看到除了 name 输入框，其它的两个输入框都被禁用了，此时点提交会是什么样子呢？

嗯，只提交了 name 字段。

十一、noscript

这个标签是在浏览器不支持或禁用了 javascript 时才展示的，大多用于对 js 强依赖的应用，比如现在大部分的 SPA 页面，一旦不支持 javascript，页面基本上什么内容都没了，此时可以靠这个标签做友好提示。

一般我们不需要特地去使用，大多都是在打包过程中自动插入到 html 静态文件里去的，例如：

// init.js
const root=document.getElementById('root')
const button=document.createElement('button')
button.innerText='点击出弹窗'
root.appendChild(button)

<!-- index.html -->
<script defer src="./init.js"></script>

<noscript>
  不好意思，你的浏览器不支持或禁用了 JavaScript，请更换浏览器或启用 JavaScript
</noscript>

<div id="root"></div>

未禁用 javascript 时，页面是这样的：

禁用了 javascript 时，是这样的：

单元素属性2

为了不再被疑似涉嫌低俗，我只能给大家提供这种图片了，耐得住寂寞才能学有所成！吸引人的东西未必珍贵。

昨天我们学习了《HTML表单元素初识1——零基础自学网页制作》（目录在结尾），大家通过学习对HTML页面中的表单元素的基本写法已经非常熟悉了。同时也学会了通过变换<input/>标签中的type属性的值为表单赋予不同的功能，例如输入文本和建立多选表单。期间，对name与value这两个属性的作用与特点进行了阐释。今天我们继续学习新的表单内容。

建立单选表单：单选表单把<input/>标签的type属性修改为"radio"（收音机），为什么单选表单使用"收音机"这个词呢？其实道理很简单，收音机调频旋钮是对应角度对应相应调频，不可能一个角度对应两个调频，所以选这个就不能选其他的表单中的type属性使用"radio"这个词表示，是不是很形象。

示例代码如下：

<form>
  最高学历：<br>
  <input type="radio" name="education" value="highSchool"/>高中
  <input type="radio" name="education" value="bachelor"/>本科
  <input type="radio" name="education" value="master"/>硕士
  <input type="radio" name="education" value="doctor"/>博士
  <br>
  <input type="submit" value="submit"/>
</form>

因为描写的是最高学历，一般人最高学历只有一个，不可能又是学士又是博士，因此使用单选表单。

向服务器提交时，name叫做"education"（教育），value对应不同层次。

页面效果如下：

大家可以点点试试，每次只能有一个被选中。如图：

综合练习：到这为止，我们把之前零散的代码拼凑一下看看效果吧！

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>表单 </title>
  </head> 
  <body>
  <form>
  会员名称：
  <input type="text" placeholder="请输入英文或汉语拼音" name="memberName"/><br>
  会员密码：
  <input type="text" placeholder="请输入英文字母、特殊符号、数字" name="passWord"/><br>
  确认密码：
  <input type="text" name="confirmPassWord"/><br>
  <input type="submit" value="提交"/><br>
  </form>
  <hr>
  <form>
  兴趣爱好：
  <br>
  <input type="checkbox" name="hobby" value="reading"/>读书
  <input type="checkbox" name="hobby" value="film"/>电影
  <input type="checkbox" name="hobby" value="painting"/>绘画
  <input type="checkbox" name="hobby" value="music"/>音乐
  <br>
  最高学历：<br>
  <input type="radio" name="education" value="highSchool"/>高中
  <input type="radio" name="education" value="bachelor"/>本科
  <input type="radio" name="education" value="master"/>硕士
  <input type="radio" name="education" value="doctor"/>博士
  <br>
  <input type="submit" value="submit"/>
  </form>
  </body>
  </html>

页面效果如下：

密码输入：我们在使用上述表单输入密码时发现，密码时实时显示在输入框中，这一点是不安全的，如图：

如何让密码隐藏呢？其实看过上一篇中type属性列表的小伙伴肯定猜到了，把type从"text"改为password。示例代码如下：

会员密码：
<input type="password" placeholder="请输入英文字母、特殊符号、数字" name="passWord"/><br>
确认密码：
<input type="password" name="confirmPassWord"/><br>

页面效果如下：

上传文件：使用type="file"可以上传文件！

示例代码如下：写在"submit"的上面即可。

<input type="file"/><br><input type="submit" value="submit"/>

页面效果如下：

点击"浏览"看下效果：

神奇！

使用图片制作按钮：将type="image"即可，代码如下：

<input type="image" src="img/示例图片/submit.jpg"/><br>

页面效果如下：用一个src导入图片即可。

示例图片：路径自行设置即可！

为表单设置一个重置按钮：如果用户打算重置表单内容后从新填写，我们可以给他这样一个按钮：

<input type="reset" /><br>

页面如图所示：

大家要注意的是这个"重置"按钮的作用范围仅仅是它所在的<form></form>标签之间！

举个例子，如图：

下面我们点击"重置"后效果如下：

form1中的内容没有被清空，"重置"按钮所在的form2内容被清空了！

type属性值讲解我们到此结束了，hidden值这里先不给大家介绍，以后有机会再细说。

button值以后在JavaScript部分还会细说，这里也先略过。

除了<input/>外，还有其他一些标签，例如<select>或<textarea>等有趣且实用的标签，我们明天再学习吧！

今天的内容先到这里。希望大家看完之后可以写写代码进行实操。代码这种东西即使再简单，写过和没写过的体会也是不一样的。这个部分的代码使用"文本编辑器"就可以实践。具体操作请详见《》。

碎片化的知识其实对人并没有多大作用，但是我们的时间在现代化的生活节奏中被撕地越来越碎，因此我希望大家可以利用碎片时间来学习完整的知识，所以，以短篇的形式，每天20分钟左右，通过积少成多的办法为大家提供零基础页面制作的教程体系是我的主要目的。希望大家学有所成！

喜欢我的教程的小伙伴请关注我，点赞也会让我充满动力！

喜欢的小伙伴请关注和转发，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

在线咨询

上一篇：python爬取高匿代理IP（再也不用担心会进小黑屋
下一篇：JavaScript对象转数组的三种简单方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript入门

源

是什么

作用

组成

创建方式

数据类型

函数

输出

注释

、abbr

二、mark

三、sup、sub

四、figure

五、progress

六、area

七、details

八、dialog

九、datalist

十、fieldset

十一、noscript

单元素属性2

HTML完整学习目录

您的项目需求