《给后端工程师的前端开发课程》笔记

ASP.Net服务器控件

给后端工程师的前端开发课程

HTML和CSS工作模式

前端工作模式：BS

HTML5基础标签学习

p:定义一个段落(paragraph)

a:超链接
img:图片

div:块元素

​ 我们每定义的一个div实际上是没有效果的，只不过是是我们当前定义了一个容器。他里面可以放置任何元素。

​ 块级元素，默认情况下宽度占100%，高度根据div内部的元素的设计而进行自动的扩展。

span:行内元素

​ 行内元素，与div正好相反。

​ 默认情况下定义的就是一个流式的布局。宽度根据div内部的元素的设计而进行自动的扩展，高度按照内部元素设计进行的一个自适应。(宽和高都是自适应)

form:表单

输入选项 下拉框 登录按钮等。。。

table:表格

b:粗体显示
h1/h2/h3/h4/h5/h6:标题元素

input:表单元素
ul:列表元素（ol）

Block块元素vs lnline行内元素

Box model盒子模型

• Block块元素，宽度默认100%
• Inline行内元素，宽度按实际元素宽度(类似于一种追加的形式在后面显示)

Tag Attribute标签属性

<a href="/index.html" target="_blank" style="color: red; ">Home</a>

·不同的标签拥有不同的属性
·有很多属性是所有标签共有的，比如: id / class / style /title等等

单标签和双标签

<!-―双标签,开始和结束标签-->
<a href=" /index.html" target="_blank" style="color: red; ">Home</a>
<!--单标签-->
<img src=" logo.png" alt=" logo"/>

Demo

标签定义 HTML 表格

一个 HTML 表格包括

元素，一个或多个 、元素。

以及

元素定义**表格行(row)**， 元素定义**表头(head)**， 元素定义表格单元,里面放真正的数据。

更复杂的 HTML 表格也可能包括 、、、、 以及 元素。

ul

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

• 标签定义无序列表。

将

• 标签与
• 标签一起使用，创建无序列表。

**提示：**使用 CSS 为列表定义样式。

**提示：**使用标签创建有序列表。

form

<form action="/users" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

<form> 标签用于创建供用户输入的 HTML 表单。
<form> 元素包含一个或多个如下的表单元素：
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>

form 标签是表单标签

action 属性设置提交的**服务器地址**

method 属性设置提交的方式 GET(默认值)或 POST

表单提交的时候，数据没有发送给服务器的三种情况：

1、表单项没有 name 属性值

2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器

3、表单项不在提交的 form 标签中

**GET 请求**的特点是：

1、浏览器地址栏中的地址是：action 属性[+?+请求参数]

请求参数的格式是：name=value&name=value

2、不安全

3、它有数据长度的限制

**POST 请求**的特点是：

1、浏览器地址栏中只有 action 属性值

2、相对于 GET 请求要安全

3、理论上没有数据长度的限制(其提交的数据不通过url参数走)

input

<form action="/users">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

标签规定了用户可以在其中输入数据的输入字段。

元素在 元素中使用，用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变，取决于 type 属性。
button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

注意: 元素是空的,它只包含标签属性。
【提示: 你可以使用 元素来定义 元素的标注。】

关于DOCTYPE

当前文档所遵循的HTML标准和版本

调试

Firebug & Chrome Dev Tools

调试HTML Document
调试CSS和即时编辑

网络资源调试
HTTP Request/Response

性能分析
etc

HTML DOM和CSS3基础学习

HTML DOM

我们知道的HTML代码是一个树形结构。

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM **以树结构**表达 HTML 文档。

Javascript DOM操作

Javascript对HTML DOM的操作（实操）

Javascript对XML的操作

document.getElementByTags('a')
document.getElementsByClassName('row')
etc.

HTML DOM加载机制和事件

①DOMContentLoaded
②load

DOMContentLoaded 和 window.onload 的区别

​ 当页面完全加载完毕后会触发 window.onload 事件，我们知道可以利用 window.onload 事件来触发并执行需要页面完全加载完毕后才能执行的 javascript 脚本，但是假如页面包含很多样式文件、图片文件、子框架页面(iframe)的话，onload 事件也会被相应延迟到这些文件加载完成才执行，有时候并不是我们所需要的，例如我们想知道页面从接受完毕到 dom 树解析完成所需要的时间，那么 onload 事件则不适合了。

​ 这个时候 DOMContentLoaded 就出场了，它定义为： 当页面文档加载并解析完毕之后会马上出发 DOMContentLoaded 事件，而不会等待样式文件、图片文件和子框架页面的加载。

CSS3基础

cSS选择器定义

by class,比如: **.**row. [公共类]

by id,比如: **#**wrapper [唯一]

by tag name,比如: a
style属性,比如: style=“color: red;”
高级选择器冒号":",比如: a:hover, li:last-child

层级选择:比如 div#wrapper a { …}

通用属性:比如 div, p { …}

demo

ul li :last-child 父子结构加上特定属性限定

样式是可以继承的

Block块元素vs lnline行内元素

Box model盒子模型

• Block块元素，宽度默认100%
• Inline行内元素，宽度按实际元素宽度(类似于一种追加的形式在后面显示)

块元素

divp

table

ul
form
h1/h2/h3/h4/h5/h6

etc

行内元素

a
. img

span
. b/i/u/strong/em

button
input
etc

cSS3页面布局

流式布局: float

位置定位: position

float属性
left
right

demo

clear属性

清除浮动，另起一行

left
right

both

.new_row{
    clear: both;
}

position属性

static(静态定位)：块级元素垂直堆叠

relative (相对定位)：真正的用途：可以为 “后代元素” 创造 “定位上下文” ；相对其 “原始位置” 控制该元素的 “偏移量”，同时不影响周围其他的元素。

absolute(绝对定位)：相对其最近的 “定位上下文” || “非static定位的‘祖先元素’” || “html元素”，进行定位 。会脱离文档流

fixed(固定定位)：其“定位上下文”被自动设置为浏览器视口， 脱离文档流。

2. 应用场景：

   “绝对定位”–>非常适合 “创建弹出层”，“提示”，“对话框”，这类覆盖于其他内容之上的组件。

​ 场景：利用偏移实现自动大小,relative + absolute 实现， 前者生成 “定位上下文”, 后者加上 top bottom left right 这些偏移量的控制，设置其中3个 自动控制剩余的1个。

.photo-header {
      position: relative;
 }

.photo-header-plate {
      position: absolute;
      right: 4em;
      bottom: 4em;
      left: 4em;
 }
//如果absolute的父节点是relative定位的话，那么其定位参考点就是其父节点的位置；如果父节点不是relative的话，那么其定位参考点就是当前整个浏览器窗口的定位
<header class="photo-header">
    <div class="photo-header-plate"></div>
</header>

display属性

block
inline
inline-block

none
etc.

可以实现块级元素和行级元素的互转

其他属性

color

font-size

font-weight

border

background

border-radius

box-shadow

transform 实现动画效果

visibility
· etc.

display vs visibility

都可以使元素不可见

. display: 为none时会从文本流中去除(并不参与页面布局的计算)
. visibility: 为hidden时仍旧参与文本流布局，只是视觉不可见

JavaScript入门

运行环境

①浏览器

浏览器: Chrome Dev Tools & Firebug

②服务器端: v8, spidermonkey etc.

采用node.js

版本

ECMAScript规范

​ . JavaScript 5
​ ECMAScript 2015: JavaScript 6

JavaScript是OOP吗?

是

数据类型学习

js中是没有hash和字典的概念的

什么是false

null
undefined

false

变量声明

var
局部变量和外部作用域变量

变量命名

驼峰式命名
var helloWorld = “hello world”;

function showAlert() { …}

条件控制

if(true) { · . · else { .· }

Boolean表达式

&&
ll
!

循环和遍历

for (var x= 0;x++;x <10 ){
}

条件控制

switch ( a) {
case 1:
        break;
default:
}

function返回值

function counter(x){
return x**x;
}
counter ( 2 );

object

var user = {
name : "hello",
age: 18
}
console.log ( user.name ) ;
console.log ( user['age'] );

Function其他

var showAlert = function ( name ) {
console.log ( name ) ;
}
showAlert( ' 343');

Closure闭包

var showAlert = function ( name ) {
name = name + ""+"world" ;
return function (index) {
console.log (index +"" + name ) ;}
}
var error = showAlert ('hello'); //返回一个函数  内部保留了其上下文的作用域（即为可以读到showAlert函数中name的值的）
error(1);
//结果：1helloworld

Closure闭包

( function( ){
var a = 1 ;
console.log (a) ;
})(); 
//如果我们在当前页面中定义一些独立只属于它自己的操作的话，我们就可以采用这种方式（作用域和继承的问题）

JavaScript DOM操作

DOM操作

DOM节点(网页中的一个标签)查询
DOM节点标签属性增加、删除、修改

DOM节点增加、删除、修改
浏览器事件的操作
etc.

//查询
document.getElementByTags ('a');
document.getElementsByClassName ('row') ;

Event事件

click
mouseover

mousemove

focus 聚焦
blur

touch

etc

jQuery和AJAX学习

jQuery入门

jQuery介绍

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>

DOM节点选择

$ ( 'p' );
$ ( '.row ' ) ;
$ ( '#wrapper ' ) ;
$ ( '.row : last' ) ;
$ ( 'input [ name="username" ]' );

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询"和"查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

实例:

• $(this).hide() - 隐藏当前元素

• $(“p”).hide() - 隐藏所有

  元素

• $(“p.test”).hide() - 隐藏所有 class=“test” 的

  元素

• $(“#test”).hide() - 隐藏 id=“test” 的元素

  ---

  jQuery 入口函数:

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

• jQuery 的入口函数是**在 html 所有标签(DOM)都加载之后**，就会去执行。
• JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

DOM节点维护

• $(this).hide() - 隐藏当前元素
• $(“p”).hide() - 隐藏所有

  元素

• $(“p.test”).hide() - 隐藏所有 class=“test” 的

  元素

• $(“#test”).hide() - 隐藏 id=“test” 的元素

jQuery对象!=DOM对象

var wrapper = $('#wrapper') ;
var wrapper2 = document.getElementById('wrapper');
wrapper ==wrapper2 //false
wrapper.get(0)== wrapper2 //true

jQuery是基于DOM实现的

DOM属性操作

$ ('#wrapper').adddClass ('theme') ;  //对元素进行的修改是会实时的反馈到页面上的
$('#wrapper').removeClass ('theme') ;
$ ('#wrapper').attr('class') ; //放回属性的值
$ ('#wrapper').attr('custom-attr' , 'attr_value') ; //设置属性的值
$ ('a').attr ('href') ;

Event

$ ( '#wrapper ' ).click ( function( ) {
console.log ( 'wrapper clicked ' );})

// same as
$ ( '#wrapper ' ).on ( 'click' , function ( ) {
console.log ( 'wrapper clicked ' ) ;
})

自定义事件

$ ('#wrapper').on ('custom-event-name', function(e){
console.log ('custom event triggered') ;
});

$ ('#wrapper').trigger ('custom-event-name') ;  //触发（需要手动去触发）

自定义事件-动态元素

$ ( document ).on ( 'click', '#wrapper', function( e){
console.log ( 'custom event triggered ' );
});

因为有些时候我们的一部分js代码是在打开页面的时候没有出来的，他需要用户执行相关的操作之后才会出现。那么这个时候如果我们想要的是在用户执行特定的操作之后我们才会去触发的事件的话，就采用动态元素。

Animate动画

$('#wrapper').animate ( {
height: 300,
opacity: 0.2})

AJAX介绍

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种用于创建快速动态网页的技术。

AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新(不会堵塞原页面)。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。

有很多使用 AJAX 的应用程序案例：Google Maps、Gmail、Youtube 和 Facebook。

页面交互

同步:a链接请求

异步:AJAX
页面体验和性能