Python 之Web编程
一 、html是什么？
htyper text markup language 即超文本标记语言
超文本:就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素
标记语言：标记(标签)构成的语言
静态网页：静态的资源，如xxx.html
动态网页：html代码是由某种开发语言根据用户请求动态生成
html文档树结构图：
二 、 什么是标签？
- 由一对尖括号包裹的单词构成，如<html> 所有标签中的单词不可能从数据开头
- 标签不区分大小写<html>和<html>，建议使用小写
- 标签分两部分：开始标签<a>和结束标签</a>，两个标签之间的部分，叫标签体
- 有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭合标签，如：<br/>、<hr/>、<input/>、<img/>
- 标签可以嵌套，但不能交叉嵌套。如:<a><b></a></b>
三 、 标签的属性
- 通常是以键值对形式出现的，例如 name="alex"
- 属性只能出现在开始标签 或 自闭合标签中
- 属性名字全部小写，属性值必须使用双引号或单引号包裹，如:name="alex"
- 如果属性值和属性名完全一样，直接写属性名即可，如:readonly
1、<head>标签
<meta>
meta标签的组成：meta标签共有两个属性，分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现不同的网页功能
1：name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
1 <meta name="keywords" content="meta总结"> 2 <meta name="description" content="alex是一个中国人">
2：http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
1 <meta http-equiv="content-type" charset="utf-8"> 2 <meta http-equiv="refresh" content="2;url=https://www.baidu.com"> 3 <meta http-equiv="x-ua-compatible" content="ie=emulateie7"> # 兼容标签，ie"n"代表兼容几
非meta标签
1 <title>hello world</title> 2 <link rel="icon" href="http://xxxxx/pic1.ico"> 3 <link rel="stylesheet" href="css.css"> # 引入样式 4 <script src="hello.js"></script> # 引入样式
2 、 <body>标签
基本标签(块级标签和内联标签)
1 <hn>：n的取值1-6；从大到小，用于表示标题(块标签,独占一行) 2 <p>：段落标签，包裹的内容换行，并且也上下内容之间有一行空白(块标签,独占一行) 3 <b>与<strong>：加粗标签 4 <strike>：文字加上一条中线 5 <em>：文字变成斜体 6 <sup>与<sub>：上角标和小角标1 7 <br>：换行 8 <hr>：水平线 9 <div>与<span>
块级标签：<p><h1><table><ol><ul><form><div>
内联标签：<a><input><img><sub><sup><textarea><span>
block(块)元素的特点
总是在新行上开始
宽度缺省是他容易的100%，除非设定一个宽度
它可以容纳内联元素和其他块元素(嵌套)
inline元素的特点
和其他元素都在一行上
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或其他内联元素
特殊字符
<(小于)； >(大于)；"；©(版权)；®； 
图形标签：<img>
src：图片的路径 alt：图片没有加载成功时的提示 title：鼠标悬浮时的提示信息 width：图片的宽 height：图片的高(宽高两个属性，只用一个会自动等比缩小)
超链接标签(锚标签)：<a>
href：要链接的资源路径，如：href="www.baidu.com" target:_blank：在新的窗体打开超链接，框架名称；在指定框架中打开连接内容 name：定义页面的书签，用于跳转href:#id(锚)
列表标签：
1 <ul>：无序列表 2 <ol>：有序列表 3 <li>：列表中的每一项 4 <dl>：定义列表 5 <dt>:列表标题 6 <dd>：列表项
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>title</title> 6 </head> 7 <body> 8 <ul> 9 <li>11</li> 10 <li>22</li> 11 <li>33</li> 12 </ul> 13 </body> 14 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>title</title> 6 </head> 7 <body> 8 <ol> 9 <li>44</li> 10 <li>55</li> 11 <li>66</li> 12 </ol> 13 </body> 14 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>title</title> 6 </head> 7 <body> 8 <dl> 9 <dt>第一章</dt> 10 <dd>第一节</dd> 11 <dd>第二节</dd> 12 <dt>第二章</dt> 13 <dd>第一节</dd> 14 <dd>第二节</dd> 15 </dl> 16 </body> 17 </html>
表格标签：<table>
1 border：表格边框 2 cellpadding：内边距 3 cellspacing：外边距 4 width：像素 百分比 5 <tr>：table row 6 <th>：table head cell 7 <td>：table data cell 8 rowspan：单元格竖跨多少行 9 colspan：单元格横跨多少列(合并单元格) 10 <th>：table header <tbody>：为表格进行分区
表单标签：<form>
表单用于向服务器传输数据。
表单能够包含input元素，比如文本字段，复选框，单选框，提交按钮等等
表单还可以包含textarea，select，fieldset和label元素
表单属性：
html表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与web服务器的交互。表单标签，要提交的所有内容都应该在该标签中。
action：表单提交到哪，一般指向服务器端一个程序，程序接受到表单提交过来的数据(即表单元素值)作相应处理
method：表单的提交方式post/get默认取值就是get(信封)
get：1.提交的键值对，放在地址栏url后面；2.安全性相对较差；3.对提交内容的长度有限制
post：：1提交的键值对不在地址栏；2.安全性相对较高；3.对提交内容的长度理论上无限制
get/post是常见的两种请求方式
表单元素：
<input> 标签的属性和对应值
1 type: 2 text：文本输入框 3 password：密码输入框 4 radio：单选框 5 checkbox：多选框 6 submit：提交按钮 7 button：按钮(配合js使用) 8 file：提交文件；form表单需要加上属性:enctype="multipart/form-data"，meth="post" 9 name:表单提交相的键，注意和id属性的区别；name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要为了方便客户端编程，在css和javascript中使用 10 value：表单提交项的值，对于不同的输入类型，value属性的用法也不同 11 type="button","reset","submit" -定义按钮上的显示的文本 12 type="text","password","hidden" -定义输入字段的初始值 13 type="checkbox","radio","image" -定义与输入相关联的值 14 checked:radio和checkbox默认被选中 15 readonly：只读 text和password 16 disabled：对所有input都好使
上传文件注意：
1、请求方式必须是post
2、enctype="multipart/form-data"
1 def index(req):
2 print('get:', req.get)
3 print('post:', req.post)
4 print('filse:', req.files)
5 for item in req.files:
6 fileobj = req.files.get(item)
7 f = open(fileobj.name, 'wb')
8 iter_file = fileobj.chunks()
9 for line in iter_file:
10 f.write(line)
11 f.close()
12 return httpresponse('注册成功！')
<select> 下拉选项标签属性
1 name:表单提交项的键 2 size:选项个数 3 multiple：multiple 4 <option> 下拉选中的每一项属性： 5 value：表单提交项的值 selected:selected下拉选默认被选中 6 <optgroup> 为每一项加上分组
<textarea> 文本域
name:表单提交项的键 cols:文本域默认有多少列 rows:文本域默认有多少行
<lable>
1 <label for="www">姓名</lable> 2 <input id="www" type="text">
<fieldset>
1 <fieldset> 2 <legend>登陆</legend> 3 <input type="text"> 4 </fieldset>
四 、 css样式
1、css概述
css是cascading style sheets的简称，层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据分离。
2 、 引入方式
1 第一种：行内式(不推荐)；在标记的style属性中设定css样式
2 <p style="background-color:rebeccapurple">hello world</p>
3
4
5 第二种：嵌入式;将css样式集中写在网页的<head></head>标签对的<style></style>标签中
6 <!doctype html>
7 <html lang="en">
8 <head>
9 <meta charset="utf-8">
10 <title>tile</title>
11 <style>
12 p{
13 background-color: red;
14 }
15 </style>
16 </head>
17
18
19 第三种：链接式；将一个.css文件引入到html中
20 <link href="mystyle.css" rel="stylesheet" type="text/css">
21
22
23 第四种：导入式；将一个独立的.css文件引入html文件中，导入式使用css规则引入外部css文件，<style>标记也是写在<head>中
24 <style type="text/css">
25 @import"mystyle.css"; 注：.css文件的路径
26 </style>
3 、 css的选择器(selector)
基础选择器:
1 *: 通用元素选择器，匹配任何元素 *{margin: 0;padding: 0;}
2 e: 标签选择器，匹配所有e标签的元素 p{color: green}
3 .info和e.info:class选择器，匹配所有class属性中包含info的元素 .info{background-color: green}
4 #info和e#info:id选择器，匹配所有id属性等于footer的元素 #info{background-color: green}
组合选择器
1 e,f 多元素选择器，同时匹配所有e元素和f元素，e和f之间用逗号分隔 div,p{background-color: green}
2 e f 后代元素选择器，匹配所有属于e元素后代的f元素，e和f之间用空格分隔 li a{background-color: green}
3 e>f 子元素选择器，匹配所有e元素的子元素f div>p{color: green}
4 e+f 毗邻元素选择器，匹配所有紧随e元素之后的同级元素f div+p{color: green}
注：
1、块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其他内联元素
2、有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如：h1-6；p；dt
3、li内可以包含div
4、块级元素与块级元素并列、内联元素与内联元素并列
属性选择器
1 e[att] 匹配所有具有att属性的e元素，不考虑它的值 p[title]{color:#f00；}
2 e[att=val] 匹配所有att属性等于"val"的e元素 div[class="error"]{color：#f00；}
3 e[attr~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的e元素
4 td[class~="name"]{color：#f00;}
5 e[attr^=val] 匹配属性值以制定值开头的每个元素 div[class^="test"]{background:#ffff00;}
6 e[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
7 e[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
伪类(pseudo-class)
css伪类是用来给选择器添加一些特殊效果
anchor伪类：专用于控制链接的显示效果
1 a:link(没有接触过的链接)，用于定义了链接的常规状态
2 a:hover(鼠标放在链接上的状态)，用于产生视觉效果
3 a:visited(访问过的链接)，用于阅读文章，能清楚的判断已经访问过的链接
4 a:active(在链接上按下鼠标时的状态)，用于表现鼠标按下时的链接状态
5 伪类选择器:伪类指的是标签的不同状态：
6 a==>点过状态、没点过的状态、鼠标悬浮状态、激活状态
7 a:link{color:#ff0000} /*未访问的链接*/
8 a:visited{color:#00ff00} /*已访问的链接*/
9 a:hover{color:#ff00ff} /*鼠标移动到链接上*/
10 a:active{color:#0000ff} /*选定的链接*/
before after伪类：
1 :before p:before{content:"hello";color:red} 在每个<p>元素的内容之前插入内容
2 :after p:aftere{content:"hello";color:red} 在每个<p>元素的内容之后插入内容
css优先级
样式表中的特殊性描述了不同规则的相对权重，它的基本规则如下：
1、内联样式表的权值最高 style=""
2、统计选择符中的id属性个数 #id
3、统计选择符中的class属性个数 .class
4、统计选择符中的html标签名个数 p
1 <style>
2 #p{
3 color: rebeccapurple;
4 }
5 .p{
6 color: #2459a2;
7 }
8 p{
9 color: yellow;
10 }
11 </style>
12 <p id="p" class="p" style="color: deeppink">hello world</p>
css继承
继承是css的一个主要特征，它是依赖于祖先-后代的关系。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。如一个body定义了颜色也会应用到段落的文本中。
1 <body style="color: red"> 2 <p>hello world!</p> 3 </body>
还可以覆盖其继承样式
1 <body style="color: red"> 2 <p style="color: blue">hello world!</p> 3 </body>
有一些属性不能被继承，如：border，margin，padding，background等
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>title</title>
6 <style>
7 div{
8 border: 1px solid red;
9 }
10 </style>
11
12 </head>
13
14 <body>
15 <div>hello <p>yuan</p> </div>
16 </body>
17 </html>
css常用属性
颜色属性
1 <div style="color: red">hello world!</div> 2 <div style="color: #d3ffae">hello world!</div> 3 <div style="color: rgb(255,255,0)">hello world!</div> 4 <div style="color: rgba(255,0,0,0.5)">hello world!</div>
字体属性
1 <h1 style="font-size: 20px">hello world!</h1> 2 <h1 style="font-size: 50%">hello world!</h1> 3 <h1 style="font-size: large">hello world!</h1> 4 <h1 style="font-family: 'lucida console'">hello world!</h1> 5 <h1 style="font-weight: lighter">hello world!</h1> 6 <h1 style="font-style: oblique">hello world!</h1>
背景属性
1 background-color:cornflowerblue
2 background-image:url('1.jpg');
3 background-repeat:no-repeat;(repeat:平铺满)
4 background-position:reght top(20px 20px);(横向:left center right)(纵向:top center bottom)
5 简写：<body style="background: 20px 20px no-repeat #ff4 url('osi.jpg')">
6
7 </body>
注：如果将背景属性加在body上，要给body加上一个height，否则结果异常，因为body为空，无法撑起背景图片；另外还要设置一个width=100px
文本属性
1 font-size:10px 2 text-align:center;横向排列 3 line-height:200px;文本行高 4 vertical-align:-4px;设置元素内容的垂直对齐方式，只对行内元素有效，对块级元素无效 5 text-indent:150px;首行缩进 6 letter-spacing:10px; 7 word-spacing:20px 8 text-transform:capitalize;
边框属性
1 border-style:solid; 2 border-color:chartreuse; 3 border-width:20px; 4 简写:border:30px rebeccapurple solid
列表属性
1 <style>
2 ul,ol{
3 list-style: decimal-leading-zero;
4 list-style: none;
5 list-style: circle;
6 list-style: upper-alpha;
7 list-style: disc;
8 }
9 </style>
dispaly属性
1 none 2 block 3 inline
display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决
1 #outer{
2 border:3px dashed;
3 word-spacing:-5px;
4 }
1 inline-block默认的空格符就是标签与标签之间的空隙造成的。
2 (一)通过margin:-3解决
3 (二)给几个标签加上一个父级div,然后设置样式
4 div{
5 word-spacing:-5px;
6 }
外边距和内边距
- margin：用于控制元素与元素之间的距离；基本用途就是控制元素周围空间的间隔，从而达到视觉上的相互隔开
- padding：用于控制内容与边框之间的距离；
- border(边框)：围绕在内边距和内容外的边框；
- content(内容)：盒子的内容，显示文本和图像。
当指定一个css元素的宽度和高度属性时，只需设置内容区域的宽度和高度。
1 margin:10px 5px 15px 20px;--------上 右 下 左 2 margin:10px 5 px 15px; --------上 右左 下 3 margin:10px 5px; -------- 上下 右左 4 margin:10px; -------- 上右下左
1 父级div中没有border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后此div进行margin。 2 3 4 5 解决方案： 6 第一种： 7 border:1px solid transparent 8 第二种： 9 padding:1px 10 第三种： 11 over-flow:hidden
float属性
block元素通常被视为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性。
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到排满，才会新换一行，宽度随元素的内容而变化。inline元素设置width和height属性无效。inline元素的margin和padding属性。水平方向的padding-left，padding-right，margin-left，margin-right都产生边距效果；但竖直方向的padding-top，padding-bottom，margin-top，margin-bottom不会产生边距效果。
块级元素：div，form，table，p，pre，h1-h5，dl，ol，ul等
内联元素：span，a，strong，em，label，input，select，textarea，img，br等
文档流：指的是元素排版布局中，元素会自动从左往右，从上往下的流式排列。
脱离文档流：将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当作脱离文档流的元素不存在而进行定位。
只有绝对定位absolute和浮动float才会脱离文档流。
注：部分无视和完全无视的区别？使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute、position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视他。
浮动：浮动的框可以向左或向右移动，直到它的外边距碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
清除浮动：在非ie浏览器下，当容器的高度为auto，且容器的内容中有浮动(float为left或right)的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这种现象叫浮动的溢出，可以用css清除浮动。
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>title</title>
6 <style type="text/css">
7 * {
8 margin:0;
9 padding:0;
10 }
11 .container{
12 border:1px solid red;
13 width:300px;
14 }
15 #box1{
16 background-color:green;
17 float:left;
18 width:100px;
19 height:100px;
20 }
21 #box2{
22 background-color:deeppink;
23 float:right;
24 width:100px;
25 height:100px;
26 }
27 #box3{
28 background-color:pink;
29 height:40px;
30 }
31 </style>
32 </head>
33 <body>
34
35 <div class="container">
36 <div id="box1">box1 向左浮动</div>
37 <div id="box2">box2 向右浮动</div>
38 </div>
39 <div id="box3">box3</div>
40 </body>
41 </body>
42 </html>
1 clear语法：none | left | right | both 2 none：默认值，允许两边都可以有浮动对象 3 left：不允许左边有浮动对象 4 right：不允许右边有浮动对象 5 both：不允许有浮动对象 6 注：clear属性只对自身起作用，而不会影响其他元素。若一个元素的右侧有一个浮动对象，而这个元素设置了不允许右边有浮动(即clear:right)，那么这个元素会自动下移一格，从而达到该元素右边没有浮动对象的目的。
方式一：
1 .clearfix:after{
2 display:block; # 将该元素转换为块级元素
3 clear:both; # 清除左右两边浮动
4 visibility:hidden; # 可见度设置隐藏。注:仍然占据空间，只是看不到而已
5 line-height:0; # 行号为0
6 height:0; # 高度为0
7 font-size:0; # 字体大小为0
8 }
9
10
11 .clearfix{
12 *zoom:1; # 针对ie6，因为ie6不支持:after伪类，zoom:1让ie6的元素可以清除浮动来包裹内部元素
13 }
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>title</title>
6 <style type="text/css">
7 * {
8 margin:0;
9 padding:0;
10 }
11 .container{
12 border:1px solid red;
13 width:300px;
14 }
15 #box1{
16 background-color:green;
17 float:left;
18 width:100px;
19 height:100px;
20 }
21 #box2{
22 background-color:deeppink;
23 float:right;
24 width:100px;
25 height:100px;
26 }
27 #box3{
28 background-color:pink;
29 height:40px;
30 }
31 </style>
32 </head>
33 <body>
34
35 <div class="container">
36 <div id="box1">box1 向左浮动</div>
37 <div id="box2">box2 向右浮动</div>
38 <div style="clear: both"></div>
39 </div>
40 <div id="box3">box3</div>
41 </body>
42 </body>
43 </html>
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>title</title>
6 <style type="text/css">
7 * {
8 margin:0;
9 padding:0;
10 }
11 .container{
12 border:1px solid red;
13 width:300px;
14 }
15 #box1{
16 background-color:green;
17 float:left;
18 width:100px;
19 height:100px;
20 }
21 #box2{
22 background-color:deeppink;
23 float:right;
24 width:100px;
25 height:100px;
26 }
27 #box3{
28 background-color:pink;
29 height:40px;
30 }
31 .clearfix:after{
32 content: "";
33 display: block;
34 clear: both;
35 }
36 </style>
37 </head>
38 <body>
39
40 <div class="container clearfix">
41 <div id="box1">box1 向左浮动</div>
42 <div id="box2">box2 向右浮动</div>
43 </div>
44 <div id="box3">box3</div>
45 </body>
46 </body>
47 </html>
方式二：
1 overflow:hidden; # 将超出的部分裁切隐藏，float的元素虽然不在普通流中，但是他浮动在普通流之上，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清楚浮动。
position定位
1、static：默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的。
2、relative：相对定位，相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。
3、absolute：绝对定位，元素定位后生成一个块级框，不论原来他在正常流中生成何种类型的框。
4、fixed：对象脱离正常文档流，使用top、right、bottom、left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
注：若元素设置了 position：absolute／ｆｉｘｅｄ；该元素就不能设置ｆｌｏａｔ；但是ｒｅｌａｔｉｖｅ可以，因为它原本所占的空间仍然占据文档流。
５、ｍａｒｇｉｎ属性布局绝对定位元素：ｍａｒｇｉｎ－ｂｏｔｔｏｍ和ｍａｒｇｉｎ－ｒｉｇｈｔ的值不对文档流中的元素产生影响，因为该元素已经脱离了文档流。
五 、 javascript概述
javascript的历史
•1992年nombas开发出c-minus-minus(c--)的嵌入式脚本语言(最初绑定在cenvi软件中)，后将其改名为scriptease(客户端执行的语言)
•netscape(网景)接受nombas的理念，(brendan eich)在其netscape navigator 2.0产品中开发出一套livescipt的脚本语言。sun和netscape共同完成，后改名叫javascript
•微软随后模仿在其ie3.0产品中搭载了一个javascript的克隆版叫jscript
•为了统一三家，ecma(欧洲计算机制造协会)定义了ecma-262规范。国际标准化组织及国际电工委员会(iso/iec)也采纳ecmascript作为标准(iso/iec-16262)。从此，web浏览器就开始努力将ecmascript作为javascript实现的基础。ecmascript是规范。
ecmascript
尽管ecmascript是一个重要的标准，但它并不是javascript唯一的部分，当然，也不是唯一标准化的部分。实际上，一个完整的javascript实现是由以下3个不同部分组成的：
•核心(ecmascript)
•文档对象模型(dom) document object model(整合js,css,html)
•浏览器对象模型(bom) broswer object model(整合js和浏览器)
•javascript在开发中绝对多数情况是基于对象的。也是面向对象的。
ecmascript描述了以下内容：
1、语法
2、类型
3、语句
4、关键词
5、保留字
6、运算符
7、对象(封装|继承|多态)基于对象的语言
javascript的两种引入方式
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>title</title>
6 </head>
7 <body>
8
9 </body>
10
11 <!--第一种引入方式-->
12 <script>
13 alert('hello world!')
14 </script>
15
16 <!--第二种引入方式-->
17 <script src="test.js"></script>
18 </html>
javascript基础
变量
1 <script> 2 var name="alex",age=18;gender="男" 3 注： 4 1、声明变量时，可以不用var；如果不用var那么该变量为全局变量 5 2、变量命名，只支持字母、下划线、$；且区分大小写,x与x是两个变量;不能数字开头 6 </script>
基本规范
1、每行结束可以不加分号(建议每行结束加上“;”)
2、单行注释(“//”)和多行注释(“/**/”)
命名规范
1 camel 标记法 2 首字母是小写的，接下来的字母都以大写字符开头。例如： 3 var mytestvalue = 0, mysecondvalue = "hi"; 4 pascal 标记法 5 首字母是大写的，接下来的字母都以大写字符开头。例如： 6 var mytestvalue = 0, mysecondvalue = "hi"; 7 匈牙利类型标记法 8 在以 pascal 标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串，如下所示“ 9 var imytestvalue = 0, smysecondvalue = "hi";
常量和标识符
1、常量(程序中出现的数据值)
2、标识符：
·只允许字母、数字、下划线、$；不能数字开头
·用于表示函数、变量的名字
·javascript语言中代表特定含义的词称为保留字，不允许程序再次定义为标识符
数据类型
1 数字类型(number):不区分整型和浮点型数值，所有的数字都采用64位浮点格式存储
2 字符串(string)：字符串常量首位由单引号或双引号括起
3 常用的转义字符：换行(\n)、单引号(\')、双引号(\'')、右划线(\\)
4 布尔值(boolean)：仅有两个值:true和false，也代表1和0，主要用于javascript的控制语句中，例如：
5 if(x==1){
6 y=y+1
7 }
8 else{
9 y=y-1
10 }
11 null类型：如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常为null
12 undefined类型：当声明的变量未初始化时，该变量的默认值为 undefined；当函数无明确返回值时，返回的也是 undefined
数据类型的转换
1 javascript：变量在声明的时候并不需要指定数据类型，变量只有在赋值的时候才会确定数据类型，表达式中包含不同类型数据则在计算过程中会强制进行类别转换 2 3 数字+字符串:数字转换为字符串 4 5 数字+布尔值:true转换为1，false转换为0 6 7 字符串+布尔值:布尔值转换为字符串true或false
强制类型转换函数
1 函数parseint： 强制转换成整数 例如parseint("6.12")=6 ; parseint(“12a")=12 ; parseint(“a12")=nan ;parseint(“1a2")=1 注:nan-->not a number,是number的一种类型
2
3 函数parsefloat： 强制转换成浮点数 parsefloat("6.12")=6.12
4
5 函数eval： 将字符串强制转换为表达式并返回结果 eval("1+1")=2 ; eval("1<2")=true
类型查询函数(typeof)
ecmascript提供了一个typeof运算符来判断一个值的某种类型
1 typeof:的类型(string/number/boolean/object)
2 typeof("test"+3)---->string
3 typeof(null) ---->object
4 typeof(true+1) ---->number
5 typeof(true-false) --->number
ecmascript运算符
1 加(+)、减(-)、乘(*)、除(/)、余数(%)、递增(++)、递减(--) 2 等于(==)、不等于(!=)、大于(>)、小于(<)、大于等于(>=)、小于等于(<=)、与(&&)、或(||)、非(!)
控制语句
1 if(表达式){
2 ......
3 }else{
4 .....
5 }
1 if(表达式1){
2 ....
3 }else if(表达式2){
4 ......
5 }else if(表达式3){
6 ....
7 }else{
8 ....
9 }
switch 选择控制语句
1 switch(表达式){
2 case 值1:语句1;break;
3 case 值2:语句2;break;
4 case 值3:语句3;break;
5 default:语句4;
6 }
1 总结： 2 1.switch用来根据一个整型值进行多路分支，并且编译器可以对多路分支进行优化 3 2.switch case只将表达式计算一次，然后将表达式的值与每个case的值比较，进而选择执行哪一个case的语句块 4 3.if else 的判断条件范围较广，每个语句基本上独立的，每次判断时都要条件加载一次 5 6 所以在多路分支时用switch比if else if结构效率高
for 循环语句
1 for(初始化值;条件;增量){
2 .....
3 }
4 实现条件循环，当条件成立时，执行语句，否则跳出循环体
1 doms=document.getelementsbytagname("p");
2
3 for (var i in doms){
4 console.log(i); // 0 1 2 length item nameditem
5 //console.log(doms[i])
6 }
7
8 //循环的是你获取的th一个dom元素集，for in用来循环对象的所有属性，dom元素集包含了你上面输出的属性。
9 //如果你只要循环dom对象的话，可以用for循环:
10
11 for (var i=0;i<doms.length;i++){
12 console.log(i) ; // 0 1 2
13 //console.log(doms[i])
14 }
while 循环控制语句
1 while(条件){
2 ....
3 }
4 功能和for类似，当条件成立循环执行语句，否则跳出循环
try catch 异常处理
1 try{
2 ....
3 }
4 catch(e){
5 try代码块中抛出异常，执行此处代码
6 }
7 finally{
8 无论try中代码是否有异常抛出 ，finally代码块中的始终会执行
9 }
10
11 注：主动抛出异常 throw error('xxxxx')
ecma对象
对象的概念与分类：
•由ecmascript定义的本地对象，独立于宿主环境的ecmascript实体提供的对象(native object)
•ecmascript实现提供的、独立于宿主环境的所有对象，在ecmascript程序开始执行时出现。意味着开发者不必明确实例化内置对象，它已被实例化了。ecma-262只定义了两个内置对象，即global和math(它们也是本地对象，根据定义，每个内置对象都是本地对象)。(built-in object)
•所有非本地对象都是宿主对象(host object)，即由ecmascript实现的宿主环境提供的对象。所有bom和dom对象都是宿主对象。
object对象：ecmascript的所有对象都由这个对象继承而来；object对象中的所有属性和方法都会出现在其他对象中
1 tostring():返回对象 的原始字符串表示 2 valueof():返回最适合该对象的原始值。对于许多对象，该方法返回的值都与tostring()的返回值相同。
11种内置对象
array、string、date、math、boolean、number、function、global、error、regexp、object 注：在javascript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量。string、math、array、date、regexp都是javascript中重要的内置对象，在javascript程序大多数功能都是通过对象实现的，
1 创建字符串对象：
2 var str1 = "hello world";
3 alert(str1.length);
4 alert(str1.substr(1,5));
5 注：调用字符串的对象属性或方法时自动创建对象，用完就丢弃
6
7
8 手工创建字符串对象：
9 var str1 = new string("hello world");
10 alert(str1.length);
11 alert(str1.substr(1,5));
12 注：采用new创建字符串对象str1，全局有效
13
14
15 length：获取字符串的长度(str1.length)
16
17
18 大小写转换：
19 var str1 = "abcdef"
20 小写:str1.tolowercase()
21 大写:str1.touppercase()
22
23
24 获取指定字符:
25 格式:
26 x.charat(index)
27 x.charcodeat(index)
28 注：
29 x：代表字符串对象
30 index：代表字符串位置，从0开始编号
31 charat：返回index位置的字符
32 charcodeat：返回index位置的unicode编码
33
34
35 查询字符串：
36 格式1：
37 x.indexof(findstr,index)
38 x.lastindexof(findstr)
39
40 var str1 = "welcom to the world of js!";
41 var str2 = str1.indexof("c"); # 结果为3，从0开始计数
42 var str3 = str1.lastindexof("c") # 结果为3，从后开始数，第一次出现c的位置
43
44 格式2：
45 x.match(regexp)
46 x.search(regexp)
47 注：
48 x：代表字符串对象
49 regexp：代表正则表达式或字符串
50 match：返回匹配字符串的数组，如果没有匹配则返回null
51 search：返回匹配字符串的首字符位置索引
52
53 var str1 = "welcome to the world of js!";
54 var str2=str1.match("world");
55 var str3=str1.search("world");
56 alert(str2[0]) # 结果为"world"
57 alert(str3) # 结果为15
58
59
60 截取字符串：
61 格式1：
62 x.substr(start,length)
63 x.substring(start,end)
64 注：
65 x：代表字符串对象
66 start：表示开始位置
67 length：表示截取长度
68 end：结束位置加1，从0开始计数
69 var str1 = "abcdef"
70 str1.substr(2,2) # 结果：cd
71 str1.substring(2,2) # 结果：cd
72
73 格式2：
74 //x.slice(start, end)
75 var str1="abcdefgh";
76 var str2=str1.slice(2,4);
77 var str3=str1.slice(4);
78 var str4=str1.slice(2,-1);
79 var str5=str1.slice(-3,-1);
80 alert(str2);
81 //结果为"cd"
82 alert(str3);
83 //结果为"efgh"
84 alert(str4);
85 //结果为"cdefg"
86 alert(str5);
87 //结果为"fg"
88
89
90 替换字符串：
91 var str1 = "abxy";
92 str1.replace("xy","cd") # 结果:abcd
93
94
95 分割字符串：
96 var str1 = "一，二，三";
97 str1.split(","); # 结果：一二三
98
99
100 连接字符串：
101 格式：
102 y=x.concat(addstr)
103 注：
104 x：代表字符串对象
105 addstr：添加字符串
106
107 var str1 = "abc"
108 str1.concat("def") # 结果abcdef
1 创建数组对象：
2 格式1：
3 var iarrnum = [1,2,3]
4
5 格式2：
6 new array(); # 不指定数组元素个数
7 new array(size); # 指定数组元素个数
8
9
10 二维数组：
11 var cnweek=new array(7);
12 for (var i=0;i<=6;i++){
13 cnweek[i]=new array(2);
14 }
15 cnweek[0][0]="星期日";
16 cnweek[0][1]="sunday";
17 cnweek[1][0]="星期一";
18 cnweek[1][1]="monday";
19 ...
20 cnweek[6][0]="星期六";
21 cnweek[6][1]="saturday";
22
23
24 length：获取数组的个数
25
26
27 连接数组：join
28 格式：
29 x.join(bystr)
30 注：
31 x：代表数组对象
32 bystr：作为连接数组中元素的字符串
33
34 var iarrnum = [1,2,3]
35 iarrnum.join("-") # 结果：1-2-3
36
37
38 连接数组：concat
39 var a = [1,2,3]l
40 var a = new array(1,2,3);
41 a.concat(4,5) # 结果：1，2，3，4，5
42
43
44 数组排序：reverse | sort
45 var iarrnum = [1,3,5,2,9];
46 iarrnum.reverse(); # 反转数组:9,2,5,3,1
47 iarrnum.sort(); # 从小到大排序:1,2,3,5,9
48
49
50 数组切片：slice
51 注:
52 x代表数组对象
53 start表示开始位置索引
54 end是结束位置下一数组元素索引编号
55 第一个数组元素索引为0
56 start、end可为负数，-1代表最后一个数组元素
57 end省略则相当于从start位置截取以后所有数组元素
58
59 var arr1=['a','b','c','d','e','f','g','h'];
60 var arr2=arr1.slice(2,4);
61 var arr3=arr1.slice(4);
62 var arr4=arr1.slice(2,-1);
63
64 alert(arr2.tostring());
65 //结果为"c,d"
66 alert(arr3.tostring());
67 //结果为"e,f,g,h"
68 alert(arr4.tostring());
69 //结果为"c,d,e,f,g"
70
71
72 删除子数组：
73 格式
74 x. splice(start, deletecount, value, ...)
75 注：
76 x代表数组对象
77 splice的主要用途是对数组指定位置进行删除和插入
78 start表示开始位置索引
79 deletecount删除数组元素的个数
80 value表示在删除位置插入的数组元素
81 value参数可以省略
82
83
84 var a = [1,2,3,4,5,6,7,8];
85 a.splice(1,2);
86 //a变为 [1,4,5,6,7,8]
87 alert(a.tostring());
88 a.splice(1,1);
89 //a变为[1,5,6,7,8]
90 alert(a.tostring());
91 a.splice(1,0,2,3);
92 //a变为[1,2,3,5,6,7,8]
93
94
95 数组的进出栈操作一：
96 //push pop这两个方法模拟的是一个栈操作
97
98 //x.push(value, ...) 压栈
99 //x.pop() 弹栈
100 //使用注解
101 //
102 //x代表数组对象
103 //value可以为字符串、数字、数组等任何值
104 //push是将value值添加到数组x的结尾
105 //pop是将数组x的最后一个元素删除
106
107
108 var arr1=[1,2,3];
109 arr1.push(4,5);
110 alert(arr1);
111 //结果为"1,2,3,4,5"
112 arr1.push([6,7]);
113 alert(arr1)
114 //结果为"1,2,3,4,5,6,7"
115 arr1.pop();
116 alert(arr1);
117 //结果为"1,2,3,4,5"
118
119
120 数组的进出栈操作二：
121 // unshift shift
122 //x.unshift(value,...)
123 //x.shift()
124 //使用注解
125 //
126 //x代表数组对象
127 //value可以为字符串、数字、数组等任何值
128 //unshift是将value值插入到数组x的开始
129 //shift是将数组x的第一个元素删除
130
131 var arr1=[1,2,3];
132 arr1.unshift(4,5);
133 alert(arr1);
134 //结果为"4,5,1,2,3"
135 arr1. unshift([6,7]);
136 alert(arr1);
137 //结果为"6,7,4,5,1,2,3"
138 arr1.shift();
139 alert(arr1);
140 //结果为"4,5,1,2,3"
1 // js中数组的特性
2 //java中数组的特性, 规定是什么类型的数组,就只能装什么类型.只有一种类型.
3 //js中的数组特性1: js中的数组可以装任意类型,没有任何限制.
4 //js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.
5 var arr5 = ['abc',123,1.14,true,null,undefined,new string('1213'),new function('a','b','alert(a+b)')];
6 /* alert(arr5.length);//8
7 arr5[10] = "hahaha";
8 alert(arr5.length); //11
9 alert(arr5[9]);// undefined */
1 创建date对象：
2 //方法1：不指定参数
3 var nowd1=new date();
4 alert(nowd1.tolocalestring( ));
5 //方法2：参数为日期字符串
6
相关文章:
-
-
[TOC] 接口是什么？ Go 语言不是一种 “传统” 的面向对象编程语言:它里面没有类和继承的概念。 但是 Go 语言里有非常灵活的 接口 概念，... [阅读全文]
-
采用 flexbox 弹性容器进行布局，只做练习用。 浏览器打开时切换到手机模式。 样本地址： http://tpl.zhuamimi.cn/%E6... [阅读全文]
-
为什么要谈这个topic？ 实践中，质量保障体系的建设，主要针对两个目标: 一是不断提高目标业务测试覆盖率，保障面向客户的产品质量；二就是尽可能的提... [阅读全文] -
1.1 struct to json 准备 很简单,使用encoding包可以互相转换,没什么好说的,但是有几点注意: 1.结构体内需要序列化的字段... [阅读全文]
-
首先，作业要求概括如下： 根据前缀表达式文法，实现statements() 和expression() 两个函数。 并且要求使得语义分析在完成分析前... [阅读全文]
-
版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。
上一篇： React入门看这篇就够了
发表评论