题记：
文章内容输出来源：拉勾教育大数据开发高薪训练营
本篇文章是java学习课程中的一部分笔记。
本博文主要是记录一些基础的知识点，通过实操更容易理解
这章主要讲的是前端的基础知识，
HTML
HTML语法
- 特点 HTML文件不需要编译，直接使用浏览器阅读即可 HTML文件的
- 扩展名是*.html 或 *.htm
- HTML结构都是由标签组成
- 标签名预先定义好的，我们只需要了解其功能即可。
- 标签名不区分大小写 <A name="属性值" age="18" >标签体</a>
- 通常情况下标签由开始标签和结束标签组成。例如： <a 属性名="属性值" href="01_html">标签体</a>
- 如果没有结束标签，建议以/结尾。例如： <img />
基本标签
1.标题标签
HTML提供 <hn> 系列标签，用于修饰标题，包含： <h1>、<h2>、<h3>、<h4>、<h5>、<h6> 。 <h1> 定义最大的标
题。 <h6> 定义最小的标题特点:
1. 加了标题的文字会变的加粗，字号也会依次变大。
2. 一个标题独占一行。
2.段落标签
- <p></p> 标签会自动在其前后创建一些空白。
标签语义：可以把 HTML 文档分割为若干段落
- 换行标签<br>
在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 ,<br> 标签插入一个简单的换行符。
标签语义：强制换行。特点：
1. 是个单标签。
2. 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
3. 字体标签
<font> 规定文本的字体、字体尺寸、字体颜色。
4.文本格式化标签
为文字设置粗体、 斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使 文字以特殊的方式显示。
标签 描述 <b> 定义粗体文本 <em> 定义着重文字 <i> 定义斜体字 <small> 定义小号字 <strong> 定义加重语气 <sub> 定义下标字 <sup> 定义上标字 <ins> 定义插入字 <del> 定义删除字 5.图片标签
在 HTML 标签中， 标签用于定义 HTML 页面中的图像。<img src="url" alt="some_text">
属性 值 描述 align top
bottom
middle
left
rightHTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。 alt text 规定图像的替代文本。 border pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。 crossorigin anonymous
use-credentials设置图像的跨域属性 height pixels 规定图像的高度。 hspace pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。 ismap ismap 将图像规定为服务器端图像映射。 longdesc URL HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。 src URL 规定显示图像的 URL。 usemap #mapname 将图像定义为客户器端图像映射。 vspace pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。 width pixels 规定图像的宽度。 6.列表标签
列表 <ul> 定义一个无序列表 <ol> 定义一个有序列表 <li> 定义一个列表项 <!--列表标签--> <ul type="circle"> <!--以“空心圆”显示无序列表--> <li>无序</li> <li>无序</li> <li>无序</li> </ul> <ol type="I"> <!--以大写阿拉伯数字显示序号--> <li>有序</li> <li>有序</li> <li>有序</li> </ol>7.超链接标签
在 HTML 标签中， 标签用于定义超链接，作用是从一个页面链接到另一个页面。
1)超链接标签语法
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>2)超链接属性
属性 值 描述 download filename 指定下载链接 href URL 规定链接的目标 URL。 rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。 target _blank 在新窗口中打开 href 确定的页面。_parent
_self当前页打开
_top
framename规定在何处打开目标 URL。仅在 href 属性存在时使用。 type MIME_type 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。
注：MIME = Multipurpose Internet Mail Extensions。
3)超链接分类
举例 1. 外部链接: 例如 < a href="http://www.lagou.com ">拉勾。 2. 内部链接: 网站内部页面之间的相互链接.例如 < a href="index.html"> 首页 。 3. 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 。 4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。 5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接. 6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置. 8. 表格标签
1）表格标签作用
表格主要用于显示、 展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。
HTML表格由 <table> 标签以及一个或多个 <tr>、<th> 或 <td> 标签组成。
<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。
2）表格的基本语法
<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table>3）标签属性介绍
table属性
属性 值 描述 align left
center
right规定表格相对周围元素的对齐方式。 bgcolor rgb(x,x,x)
#xxxxxx
colorname规定表格的背景颜色。 border 1
""规定表格单元是否拥有边框。 cellpadding pixels 规定单元边沿与其内容之间的空白。 cellspacing pixels 规定单元格之间的空白。 frame void
above
below
hsides
lhs
rhs
vsides
box
border规定外侧边框的哪个部分是可见的。 rules none
groups
rows
cols
all规定内侧边框的哪个部分是可见的。 width pixels
%规定表格的宽度。 td/th 属性
属性 值 描述 align left
right
center
justify
char规定单元格内容的水平对齐方式。 bgcolor rgb(x,x,x)
#xxxxxx
colorname规定单元格的背景颜色。 colspan number 规定单元格可横跨的列数。 headers header_id 规定与单元格相关联的一个或多个表头单元格。 rowspan number 设置单元格可横跨的行数。 4）合并单元格
把多个单元格合并为一个单元格, 这里同学们会最简单的合并单元格即可 。
合并单元格方式：
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
5）合并方式
合并单元格三步曲：
- 1. 先确定是跨行还是跨列合并。
- 2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比
- 如：<td colspan=“2” ></td>。
- 3. 删除多余的单元格。
表格练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人简介</title> <style> td{ width: 20%; height: 50px; text-align: center; } th{ height: 80px; } </style> </head> <body> <table align="center" width="50%" cellspacing="0" border="1px"> <tr> <th colspan="5">个人简介</th> </tr> <tr> <td>姓名</td> <td></td> <td>学历</td> <td></td> <td rowspan="3" style="width: 30%;"></td> </tr> <tr> <td>性别</td> <td></td> <td>生日</td> <td></td> </tr> <tr> <td>年龄</td> <td></td> <td>民族</td> <td></td> </tr> </table> </body> </html>表单相关标签
1.什么是表单及作用
使用表单目的是为了收集用户信息。 在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。
2.表单的组成
一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
input 表单的属性
属性 值 描述 accept audio/* video/* image/* MIME_type 规定通过文件上传来提交的文件的类型。 (只针对type="file") alt text 定义图像输入的替代文本。 (只针对type="image") autocomplete on off autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。 autofocus autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。 checked checked checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio") disabled disabled disabled 属性规定应该禁用的 <input> 元素。 form form_id form 属性规定 <input> 元素所属的一个或多个表单。 formaction URL 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image") formenctype application/x-www-form-urlencoded multipart/form-data text/plain 属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。 formmethod get post 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image") formnovalidate formnovalidate formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。 formtarget _blank _self _parent _top framename 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image") height pixels 规定 <input>元素的高度。(只针对type="image") list datalist_id 属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。 max number date 属性规定 <input> 元素的最大值。 maxlength number 属性规定 <input> 元素中允许的最大字符数。 min number date 属性规定 <input>元素的最小值。 multiple multiple 属性规定允许用户输入到 <input> 元素的多个值。 name text name 属性规定 <input> 元素的名称。 pattern regexp pattern 属性规定用于验证 <input> 元素的值的正则表达式。 placeholder text placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。 readonly readonly readonly 属性规定输入字段是只读的。 required required 属性规定必需在提交表单之前填写输入字段。 size number size 属性规定以字符数计的 <input> 元素的可见宽度。 src URL src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image") step number step 属性规定 <input> 元素的合法数字间隔。 type button
checkbox
color
date
datetime
datetime-local
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
weektype 属性规定要显示的 <input> 元素的类型。 value text 指定 <input> 元素 value 的值。 width pixels width 属性规定 <input> 元素的宽度。 (只针对type="image") <input type=""> 标签用于获得用户输入信息，type属性值不同，搜集方式不同。
text:普通文本 password:密码输入框,里边的密码以黑色的小圆点显示 radio:单选框 checkbox:多选框 fifile:上传文件 image:上传图片使用 botton:普通按钮,配合js使用 reset:重置按钮,把表单的恢复到默认状态(清空表单) submit:提交按钮,把表单的数据,提交到服务器。 4) 下拉列表标签： <select>
<select> 下拉列表。可以进行单选或多选。需要使用子标签指定列表项
name属性：发送给服务器的名称
multiple属性：不写默认单选，取值为“multiple”表示多选。
size属性：多选时，可见选项的数目。
<option> 子标签：下拉列表中的一个选项（一个条目）。
selected ：勾选当前列表项
value ：发送给服务器的选项值。
5)文本域标签： <textarea>
<textarea> 标签定义一个多行的文本输入控件。
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
<textarea rows="10" cols="30"> 我是一个文本框。 </textarea>表单练习，分别用get,和post分别测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人简介</title> <style> td{ width: 20%; height: 50px; text-align: center; } th{ height: 80px; } </style> </head> <body> <table align="center" width="50%" cellspacing="0" border="1px"> <tr> <th colspan="5">个人简介</th> </tr> <tr> <td>姓名</td> <td></td> <td>学历</td> <td></td> <td rowspan="3" style="width: 30%;"></td> </tr> <tr> <td>性别</td> <td></td> <td>生日</td> <td></td> </tr> <tr> <td>年龄</td> <td></td> <td>民族</td> <td></td> </tr> </table> </body> </html>
div + css
1. 什么是div
div就是html一个普通标签，进行区域划分。
特性：独自占一行。独自不能实现复杂效果。必须结合CSS样式进行渲染。
块标签: 1)行级元素:div 2) 行内元素:span
<!-- div标签:块标签,行级元素,会霸占html的一行 --> <div>div中的数据</div>div之外的数据 <br /> <!-- span标签:块标签 ,行内元素,不会占用一行 --> <span>span中的数据</span>span外的数据2.CSS介绍
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
- CSS (Cascading Style Sheets) ：指层叠样式表
- 样式：给HTML标签添加需要显示的效果。
- 层叠：使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。
- 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
- 属性和属性值之间用英文“:”分开
- 多个“键值对”之间用英文“;”进行区分
注意事项:
CSS样式“选择器”严格区分大小写，“属性”和“属性值”不区分大小写。
多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。例如：
p { font-family:"Times New Roman";}在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释，例如：
/* 这是CSS注释文本,此文本不会显示在浏览器窗口中 */属性的值和单位之间是不允许出现空格的，否则浏览器解析时会出错。例如，下面这行代码就是不正确的。
h1{ font-size:20 px; } /* 20和单位px之间有空格 这样是不正确的*/4.引入css样式
CSS使用非常灵活，及可以嵌入在HTML文档中，也可以是一个单独的文件，如果是单独的文件，则必须以.css为扩展名。CSS和HTML的结合3种常用方式：
1. 行内样式
行内样式，是通过标签的style属性来设置元素的样式。
<a style="color: #f00; font-size: 30px;">拉勾教育</a>2.内部样式
内部样式又称为内嵌式，是将CSS代码集中写在HTML文档的head头部标签体中，并且使用style标签定义。
给当前html文件中的多个标签设置样式。
在html的head标签中使用style标签来定义CSS
<style type="text/css"> body{background-color: #ddd; } </style>内嵌式CSS样式只对其所在的HTML页面有效，可以对多处标签统一设置样式，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为他不能充分发挥CSS代码的重用优势。
3.外部样式
外部样式又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将样式连接到HTML文档中。
<!--方式3：外部样式 rel="stylesheet" ,固定值，当前文件和引入文件的关系,rel是relationship的缩写，stylesheet是样式表 type="text/css", 固定值，表示浏览器解析方式 href ，表示css文件位置 font-family 表示使用的字体系列，多个字体使用逗号分隔。例如：“字体1,字体2,字体3”，此时优先使用“字体1”，如 果“字体1”系统不存在，再使用“字体2”，以此类推。 --> <link rel="stylesheet" type="text/css" href="css/demo00.css"/>链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个link标记链接多个CSS样式表。
三种样式的优先级
- 行内样式>内部样式|外部样式(谁写在后边,使用谁,后边的会覆盖前边的)
5. 选择器
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器，本小节将对CSS基础选择器进行详细地讲解，具体如下：
1) 元素选择器
标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。其基本语法格式如下：
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
2) ID选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
3) 类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
4)派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择 器，我们可以使 HTML代码变得更加整洁。 比方说，你希望列表中的li标签下 strong 元素变为斜体字，而不是通常的粗体字，可以这 样定义一个派生选择器：
li strong{font-style: italic;font-width: normal;}
6. CSS样式
1) 边框
CSS边框属性允许你指定一个元素边框的样式和颜色。
边框就是给html选中的元素设置边线.
属性:
border-style : 设置线条的样式 (dotted 点状线条 ; dashed 虚线 ; solid 单实线 ; double 双实线)
border-width : 设置线条的粗细 (10px ; 20px)
border-color : 设置线条颜色
简写版:
border : 1px solid red; (推荐)
需求:创建5个p标签.
1)第一个p标签设置线条为 点状线条 , 宽度1px ,颜色为红色;
2)第二个p标签设置线条为 虚线 , 宽度2px ,颜色为蓝色;
3)第三个p标签设置线条为 单实线, 宽度3px ,颜色为黄色;
4)第四个p标签设置线条为 双实线 , 宽度4px ,颜色为粉色;
5) 采用简化写法设置边框 1px 单实线 金色
<p style="border-style: dotted; border-width: 1px; border-color: red;">第一个p标签设置线条为 点状线条 , 宽度1px ,颜色为红色;</p> <p style="border: 2px dashed blue">第二个p标签设置线条为 虚线 , 宽度2px ,颜色为蓝色;</p> <p style="border: 3px solid yellow">第三个p标签设置线条为 单实线, 宽度3px ,颜色为黄色;</p> <p style="border: 4px double pink">第四个p标签设置线条为 双实线 , 宽度4px ,颜色为粉色;</p> <p style="border: 1px solid gold">采用简化写法设置边框 1px 单实线 金色</p>2)尺寸
CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。
3) 转换：display
HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：行级元素和行内标签。
行级元素：以区域块方式出现。每个块标签独自占据一整行或多整行。
- 常见的块元素： <h1>、<div> 等
行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。
- 常见的行内元素： <span>、<a> 等
在开发中，希望行内元素具有块元素的特性或者行内元素具有块元素的特性，可以使用display进行转换
选择器{display:属性值}
常用的属性值：
inline：此元素将显示为行内元素（行内元素默认的display属性值）
block：此元素将显为块元素（块元素默认的display属性值）
none：此元素将被隐藏，不显示，也不占用页面空间。
<div>我是一个div,我会霸占一行</div> <div style="display: inline;">我是一个div,被转换为了行内元素,不在占用一行</div> <span>我是一个span标签,只占用一行中的一部分</span> <span style="display: block;">我是一个span标签,被转换为了行级元素,会霸占一行</span> <div style="display: none;">我是一个隐藏的div,你是看不到我的</div>4) 字体：color、font-size
font-size:字体的大小,像素px font-family:字体,幼圆,宋体,楷体... text-decoration: none 取消文字上的下划线 <a href="#" target="_blank" style="color: red;">我是红色超链接</a> <a href="#" target="_blank" style="font-size:50px">我是最大超链接</a> <a href="#" target="_blank" style="font-family: 楷体;">我是楷体超链接</a> <a href="#" target="_blank" style="text-decoration: none;">我是无下划线的超链接</a>5) 背景色：background-color
background-color:设置背景色
background-image:url(背景图片的连接) 6) 布局：float、clear
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动
选择器{float:属性值;} 常用属性值：
left：元素向左浮动 right：元素向右浮动 none：元素不浮动（默认值） 由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，需要使用clear属性进行清除浮动。
选择器{clear:属性值;} 常用属性值：
right：不允许右侧有浮动元素（清除右侧浮动的影响） both：同时清除左右两侧浮动的影响 7) CSS的盒子模型
什么是盒子模型： CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
我们可以设置这个盒子到其他和盒子之间的距离
使用css的属性:margin,设置外边距
margin-top:上外边距 margin-bottom:下外边距 margin-lex:左外边距 margin-rigt:右外边距 也可以设置这个盒子中html元素到盒子之间的距离
使用css的属性:padding,设置内边距
padding-top:上内边距 padding-bottom:下内边距 padding-lex:左内边距 padding-rigt:右内边距 小练习
<div style="width:500px;color: white;text-align: center"> <div style="height: 60px;background-color: dodgerblue">head</div> <div style="height:380px;width: 100%"> <div style="float: left;width: 120px;height:100%;background-color: lightgreen;">leftbar</div> <div style="float: left;height:100%;width:260px;background-color: steelblue;">content</div> <div style="float: left;width: 120px;height:100%;background-color: lightgreen;">rightbar</div> </div> <div style="height: 60px;background-color: dodgerblue">footer</div> </div>
JavaScript
1 JavaScript 的概述1) 什么是JavaScript
JavaScript是现在网络上比较流行的一种脚本语言，通过javaScript可以让用户与Web 站点之间增强交互。
JavaScript可以被所有Web浏览器解析。
什么是脚本语言:脚本语言叫做动态语言，它是一种解释型语言，它一般由文本编辑器编辑。脚本语言，一般它不能单独运行，需要嵌入到其它语言中，例如：javaScript， 我们可以将编写的javaScript嵌入到HTML代码中，由浏览器解析执行它。
2) javaScript的应用场景
数据可视化
数据可视化是当下大家所推崇的一种互动展示模式，而JavaScript拥有ECharts、D3.js等多种可实现数据可视化效果的框架。
移动应用
PhoneGap将WebVieW带向了移动应用，同时也将JavaScript带向了移动应用。
服务端
因为V8的性能将JavaScript带到了一个新的高度，于是Node.js诞生了——前端、后台都可以用JavaScript，现在任何一个网页都离不开JavaScript。
VR
利用3D游戏引擎，如Three.js.
游戏
JavaScript也可以做出华丽的特效!
3) JavaScript的组成
ECMAScript：描述了该语言的语法、语句和基本对象。
BOM:浏览器对象. 描述处理网页内容的方法和接口。
DOM:Document Object Model.操作文档中的元素和内容.
4) JavaScript的引入
在HTML文件中引入JavaScript有两种方式，一种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式，另一种是链接外部JavaScript脚本文件，称为外联式。对他们的具体讲解如下：
1.内嵌式，在HTML文档中，通过script标签引入，
语法如下
<script type="text/javascript"> //此处为JavaScript代码 </script>2.外联式，在HTML文档中，通过script标签引入.js文件
语法如下:
<script src="1.js" type="text/javascript" ></script>2 基本语法
1) 变量
1. 在使用JavaScript时，需要遵循以下命名规范：
- 变量名必须以字母或下划线开头，数字不能开头
- 变量名不能包含特殊符号 (如:空格等符号 )
- 变量名不能使用JavaScript关键字作为变量名，如：function
- JavaScript严格区分大小写。
2. 变量的声明
var 变量名; //JavaScript变量可以不声明，直接使用。默认值：undefined3.变量的赋值
var 变量名 = 值; //JavaScript变量是弱类型，及同一个变量可以存放不同类型的数据2) 数据类型
基本类型
- undefifined：undefifined类型只有一个值，即 undefifined。当声明的变量未初始化时，该变量的默认值是 undefifined
- boolean，有两个值 true 和 false
- number，表示任意数字
- string，字符串由双引号（"）或单引号（'）声明的。JavaScript 没有字符类型
关键字:typeof 可以查看变量的数据类型 typeof(变量)；
引用类型
- 引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。
- JavaScript是基于对象而不是面向对象。
- JavaScript提供众多预定义引用类型（内置对象）。
造一个对象：var obj = new Object(); 造一个字符串对象：var str = new String(); 造一个日期对象：var date = new Date();逻辑运算符3) 运算符
JavaScript运算符与Java运算符基本一致。
算术运算符
运算符 描述 + 加法 - 减法 * 乘法 / 除法 % 系数 ++ 递加 -- 递减 赋值运算符
运算符 例子 等同于 = x = y x = y += x += y x = x + y -= x -= y x = x - y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y 比较运算符
运算符 描述 == 等于 === 等值等型 != 不相等 !== 不等值或不等型 > 大于 < 小于 >= 大于或等于 <= 小于或等于 ? 三元运算符 逻辑运算符
运算符 描述 && 逻辑与 || 逻辑或 ! 逻辑非 4) 运算符操作
JavaScript规范规定以下操作规则（了解）
Boolean运算
参数类型 结果 Undefined false Null false Boolean 结果等于输入的参数（不转换） Number 如果参数为 +0, -0 或 NaN，则结果为 false；否则为 true。 String 如果参数为空字符串，则结果为 false；否则为 true。 Object true 5)JS中的语句
跟java一样，js也存在if、if-else、for、switch等逻辑语句，与java使用方式一致，此处不再一一阐述
<script type="text/javascript"> for (var i=0; i<10; i++) { //alert(i); } //定义数组 var arr = [1,2,3,5.5,true,"hello"]; //普通for遍历数组 /*for(var i=0; i<arr.length; i++){ alert(arr[i]); }*/ //加强for循环 for(index in arr){ alert(arr[index]); } </script>6) 函数（重要）
js的函数是js非常重要的组成部分，js最常用的函数的定义方式有两种：
1.普通函数：
//定义函数 function 函数名(参数列表){ js逻辑代码 //return 返回值，若不需要返回值可以省略return } //函数调用：函数名(实际参数);2.匿名函数：
匿名函数没有办法直接调用，使用场景： 将匿名函数赋值给一个变量，使用变量调用函数
//定义函数并赋值给变量： var fn = function(参数列表){ js逻辑代码 } //调用函数： fn(实际参数);7) 事件（重要）
1 事件概述
js的事件是js不可或缺的组成部分，要学习js的事件，必须要理解如下几个概念：
- 1. 事件源：被监听的html元素
- 2. 事件：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
- 3. 事件与事件源的绑定：在事件源上注册上某事件
- 4. 事件触发后的响应行为：事件触发后需要执行的代码，一般使用函数进行封装
2 常用的事件
属性 当以下情况发生时，出现此事件 onabort 图像加载被中断 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onerror 当加载文档或图像时发生某个错误 onfocus 元素获得焦点 onkeydown 某个键盘的键被按下 onkeypress 某个键盘的键被按下或按住 onkeyup 某个键盘的键被松开 onload 某个页面或图像被完成加载 onmousedown 某个鼠标按键被按下 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开 onmouseover 鼠标被移到某元素之上 onmouseup 某个鼠标按键被松开 onreset 重置按钮被点击 onresize 窗口或框架被调整尺寸 onselect 文本被选定 onsubmit 提交按钮被点击 onunload 用户退出页面 3 事件绑定函数
给页面上的标签添加一个事件,关联一个函数. 当我们操作这个标签是,javaScript就会侦听到对应的事件发生,从而执行关联的函数我们称为事件绑定函数.
需求: 写一个表单，并绑定onsubmit事件，阻止提交 1.在页面上给定2个按钮,第一个按钮绑定单击事件; 第二个按钮绑定双击事件 (关联函数) 2.在页面上写一个input type=text 文本框; 绑定一个 光标失去事件 3.在页面上写一个input type=text 文本框; 绑定一个 获取光标事件 4.编写一个下拉框,绑定一个 onchange 内容改变事件 5.写div ,设置宽度和高度边框; onmouseenter 鼠标进入事件 ; onmousedown 某个鼠标按键被按下 ; onmouseup 某个鼠标按键被松开 ; onmouseout 鼠标从某元素移开--> <form action="tableSelf.html" method="post" onsubmit="return canjump(this)"> <input type="text" name="name" value="名字" onblur="altertext('失去光标')"> <input type="text" name="age" value="年龄" onfocus="altertext('获得光标')"> <input type="button" onclick="altertext('button1')"> <input type="button" ondblclick="altertext('button2')"> <select onchange="altertext('我改变了')"> <option>a</option> <option>b</option> <option>c</option> </select> <div style="width:20px;height:20px;background-color: red" onmouseenter="altertext('鼠标进入事件')" onmousedown="altertext('某个鼠标按键被按下 ')" onmouseup="altertext('某个鼠标按键被松开')" onmouseout="altertext('鼠标从某元素移开')"></div> <input type="submit" > </form> <script type="text/javascript"> // window.onload=function (e) { // alert(e); // } function canjump(e){ console.log(e); return false; } function altertext(str) { console.log(str); } </script>4 派发事件
不修改html, 通过js方式获取到一个html中的元素对象,并且给它动态的设置一个事件并关联一个函数.我们称为事件派发.
派发的好处是:不污染原来的html代码; 不好处是:需要页面内容加载完毕在可以使用,一般写在页面加载函数中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //1.事件派发,给button派发一个单机事件,关联一个函数 //alert(document.getElementById("btn")); //2.页面加载函数 //作用:当整个html页面全部加载完毕之后,自动执行的函数 //格式 :window.onload = function(){ } //页面加载 window.onload = function(){ //派发事件 document.getElementById("btn").onclick = function(){ alert("点我干嘛!"); } } </script> </head> <body> <input type="button" id="btn" value="点我啊" /> </body> </html>
BOM对象
1. js 的 BOM 概述BOM（Browser Object Model），浏览器对象模型(将客户端的浏览器抽象成一类对象)，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出以下页面，通过js提供浏览器对象模型对象我们可以模拟浏览器功能。
例如，在浏览器地址栏输入地址，敲击回车这个过程，我们可以使用location对象进行模拟。在例如，浏览器中的前进和后退按钮，我们可以使用history对象模拟。当然除此之外，BOM对象不仅仅具备这些功能，让我们来学习吧。
2. js 的 BOM 对象1. Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。
2. Navigator对象，包含的属性描述了正在使用的浏览器
3. Window对象（重点），Window 对象表示一个浏览器窗口或一个框架。
4. History对象，其实就是来保存浏览器历史记录信息。
5. Location对象（重点），Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
3. Window 对象Window对象此处学习它的三个作用：
1. 获取文档对象document
2. 弹框的方法
3. 定时器
4. 弹框的方法（重点）
confirm("提示信息") 确认框,如果用户点击确认返回一个true; 点击取消返回一个false prompt("提示信息") 输入框 . 用户输入的内容会作为方法的返回值.
弹出框演示<script type="text/javascript"> // window.alert("警告框"); // var result = confirm("您是否确认删除?") // alert(result); var res = prompt("请输入您的名字"); alert(res); </script>5. 定时器（重点）
setInterval((js代码/函数,毫秒值); 反复执行的定时器 clearInterval(定时器的id值);取消反复执行的定时器 setTimeout(js代码/函数,毫秒值); 执行一次的定时器 clearTimeout(定时器的id值);取消执行一次的定时器 代码:
<script type="text/javascript"> //周期调用函数 var flag = window.setInterval(fn,500); function fn(){ console.log("我是函数..."); } //清除周期执行任务 function clearfun() { clearInterval(flag) } //定时调用任务 var flag2=window.setTimeout(function () { console.log("我是函数2.。。。") },2000); //清除定时任务 function clearTimeoutd() { console.log("清除timeout"); clearTimeout(flag2); } </script>6.常用的全局方法
内置函数的重要转换: 字符串转成数字
parseInt \ parseFloat
<script> /** * parseInt() 把字符串的数值类型转成 number类型 * * pareFloat() 把字符串的数值类型转成 number类型 * */ var a1 = "100"; var b2 = 200; var result = parseInt(a1) + b2; alert(result); var c3= "1.5";//var c3 = "abc"; //NaN (NOT A Number) var d4 = 10; var result2 = parseFloat(c3) + d4; alert(result2) </script>7. Location对象（重点）
重点记忆location.href可以在js中进行url访问
- location.href 相当于在浏览器的地址栏中输入地址 并敲回车
- location.reload() ; 让页面重新加载(刷新页面)
代码实现
function goTo(){ //该行代码执行就相当与在浏览器地址栏输入地址,按回车 location.href="http://www.taobao.com"; } function refresh(){ //整合html页面被加载,页面刷新 location.reload(); }
DOM对象
1. 什么是 DOMDOM：Document Object Model 文档对象模型，定义访问和操作结构化文档（HTML）的方式。
创建的结构化文档：html、xml 等
DOM包括：核心DOM、HTML DOM、XML DOM。通常情况下HTML DOM 和XML DOM是可以相互使 用的。
HTML DOM 将 整个HTML文档呈现成一颗DOM树，树中有元素、属性、文本等成员。
2. document 文档对象
浏览器加载整个HTML文档形成Document 对象，Document 对象可以访问和操作HTML文档中的所有元素。
1) 获得元素对象
描述 document.getElelentById("id值") 获取id为xx的是元素节点 document.getElementsByName("name名称") 获取多个元素的节点,通过name属性值 document.getElelmetsByClassName("class名称") 根据class名字获取多个节点 document.getElementsByTagName("标签名称") 根据标签名获取多个元素 2) 操作标签体内容
描述 对象名.innerHTML = 标签体; 设置标签体html 对象名.innerHTML 获取标签体html 对象名.innerText = 文本内容; 设置标签体文本 对象名.innerText 获取标签体文本 3) 属性的操作
描述 getAtrribute(name) 获得属性的值 setAtrribute(name,value) 设置属性的值 removeAtrribute(name) 删除某个属性
JavaScript内置对象
JS 的对象也分为内置对象和定义对象例如: String 、 Array 、 Date 、Math、Random
1. JS 内置对象 StringString 对象用于处理文本（字符串）。
String 对象属性
描述 length 字符串的长度 String 对象方法
描述 charAt(x) 返回在指定位置的字符。 indexOf(x) 检索字符串。 lastIndexOf(x) 从后向前搜索字符串。 split(x) 把字符串分割为字符串数组。 substring(开始索引,结尾索引) 获取两个索引之间的字符,包含头,不包含尾 substr(开始索引) 获取的是开始索引到结尾之间的字符 substr(开始索引,字符个数) 从开始索引开始,获取指定个数个字符 2. JS 内置对象 ArrayArray 对象，就是JS数组，用于存储多个值，存储的元素类型可以是任意类型。
创建 Array 对象的语法
- new Array();
- new Array(size);
- new Array(element0, element0, ..., elementn);
参数
参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。
参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。
实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="box"> <div class="l" onclick="l()">←</div> <div class="center"> <img src="#" class="img" /> </div> <div class="r" onclick="r()">→</div> </div> </body> <style> .box{ width: 800px; height:300px; margin: 0 auto; } .l,.r{ float: left; margin-top:60px; font-size: 20px; background-color: darkgray; width:50px; height: 100px; line-height: 100px; text-align: center; } .center{ float: left; width: 700px; } .center .img{ width: 100%; } </style> <script type="text/javascript"> //图片列表 var imgURL=new Array("https://www.lgstatic.com/thumbnail_1200x0/i/image/M00/36/A2/CgqCHl8X4zOAaICdAAJfXRNcCcA894.PNG", "https://www.lgstatic.com/thumbnail_1200x0/i/image/M00/41/F9/CgqCHl82hsuAUjqyAAOTmcXDgU073.JPEG", "https://www.lgstatic.com/thumbnail_1200x0/i/image/M00/40/F7/CgqCHl8zy_SAS3l9AAMk3KBxwJw901.JPG", "https://www.lgstatic.com/thumbnail_1200x0/i/image/M00/3E/7B/Ciqc1F8sw3SAcafEAAGax2W7CVA37.JPEG"); //当前图片索引 var indexImg=0; function changeImgl(i) { //设置图片 document.getElementsByClassName("img")[0].setAttribute("src",imgURL[i]); } //上一张 function l() { indexImg=indexImg<1?imgURL.length-1:indexImg-1; changeImgl(indexImg); } //下一张 function r() { indexImg=indexImg==imgURL.length-1?indexImg=0:indexImg+1; changeImgl(indexImg); } //周期函数 执行下一张 var imgflag=setInterval(r,1000); </script> </html>
扫一扫
543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
