Web开发tutorial

2019-12-01

其他文章

字数统计: 2.6k字 | 阅读时长≈ 12分钟

环境

VS code + Live Server

¶VS code快捷键

Ctrl+D 每按一次选中一个之后一样的，可以一起替换

Ctrl+\ 注释或取消注释

¶清除谷歌浏览器缓存

设置（万恶的缓存啊，疯狂浪费debug时间~）

html与CSS

html: content

CSS: design

¶HTML

1	<!DOCTYPE html> <!--输入小于号后回车，会自动补全这个-->

HTML语句由标签组成，基本格式为<标签名属性attribute=值value> 显示的字</标签名>

标签的属性支持自定义，如下面例子中的data-img：

<h4>Pictures</h4>
        <ul->
            <li><a data-img="Robin-pic" id="Robin" href="#">Robin Li</a></li>
            <li><a data-img="Jack-pic" id="Jack" href="#">Jack Ma</a></li>
            <li><a data-img="Pony-pic" id="Pony" href="#">Pony Ma</a></li>
        </ul->

        <img class="hide" id="Robin-pic" src="http://img.mp.itc.cn/upload/20161026/d1a7a24596c44c56a84be2c3966fe399_th.jpg" alt="李彦宏 !图片无法显示">
        <img class="hide" id="Jack-pic" src="http://img.mp.itc.cn/upload/20161026/27164e28ab2f42e1bd6aca56b747ef7d.jpg" alt="马云 !图片无法显示">
        <img class="hide" id="Pony-pic" src="http://img.mp.itc.cn/upload/20161026/c1fecd758dcf4cc2a1819b606d0a8607_th.jpg" alt="马化腾 !图片无法显示">

布局

¶CSS

HTML嵌入CSS样式（四种方法）：http://c.biancheng.net/view/1293.html

css左右居中的几种常见方法 - 北极冰块 - 博客园 (cnblogs.com)

常用属性

border	边框
margin
padding
color	字体颜色
opacity
background
display

//比如： margin:0px 0px 0px 0px ;
//代表：margin: top right bottom left

margin和padding的区别：

margin：

padding：

css常用名字：styles.css stylesheet.css main.css

display:inline-block和元素水平居中的关系

pseudo class

selector：active

CSS选择器

选择器	例子	例子描述	CSS
.class	.intro	选择 class=“intro” 的所有元素。	1
#id	#firstname	选择 id=“firstname” 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有元素。	1
element,element	div,p	选择所有元素和所有元素。	1
element element	div p	选择元素内部的所有元素。	1
element>element	div>p	选择父元素为元素的所有元素。	2
element+element	div+p	选择紧接在元素之后的所有元素。	2

¶RESPONSIVE RULES

/*RESPONSIVE RELUS*/

@media screen and (max-width:715px){
   
}

Mobile Web 调试方法：

build in-browser: 拖动改变浏览器的窗口大小
Actual Device: 使用真机的浏览器，输入ip地址和端口号即可

JavaScript

¶Javascript基础

语句使用;隔开

定义变量var x=1

JavaScript里的数据类型有：undefined, number, string, array

var myList=[12,"oranges",["Will","Bob"]];
// myList[0] myList[1] myList[2]
myList[3]="pineapples"; //添加元素
myList.length
myList.shift() //返回第一个元素，并将其从array中删除
myList.pop() //返回最后一个元素，并将其从array中删除
myList.forEach(function(value,index){
    alert("I have "+value+" in my shopping bag");
}); //这种方法旧的浏览器可能会报错

alert("Hi " + "KPP!");	//弹出提示框
var name = prompt();		//弹出提示框请求输入，输入结果赋值给name
var name = prompt("what is your first name?");	

//循环：while do for, 和C语言几乎一样
var times=0;
while(times<10)
{
    console.log("tried it ",times);
    times++;
}

do
{
    console.log("tried it ",times);
    times++;
}while(times<10)； //注意分号，最好写上

for(var i=0;i<10;i++)
{
    console.log("tried it",i);
}

if语句和C语言一样

函数和python差不多。没有定义return的话，默认返回 undefined：

function go(name,age)
{
    alert(name+age+" hey there");
    return age+1; 
}
var name = prompt();
var b=go(name,34);

this.attributes也可以写成this[attributes]

¶将JavaScript插入网页

html代码内插入JavaScript：在<body>标签内的最后写
1
2
3
4
<body>
<script>
<\script>
</body>

单独写在js文件中

1	<script src="/Scripts/main.js"></script>

¶Selector

DOM: Document Object Model

document.getElementsByTagName("h1");
document.getElementsByTagName("p")[0];
document.getElementsByClassName("features");
document.getElementById("whatever");
document.querySelector("a"); //括号里为CSS中的selector，只会返回第一个结果
document.querySelectorAll("a"); //返回所有结果

https://caniuse.com/查询querySelector()语句在哪些浏览器可以使用。

firstPTag = document.getElementsByTagName("p")[0];
firstPTag.innerHTML="new paragraph";
var li = document.querySelector(".done");
li.className = "";
li.className = li.className + "done";
li.className = li.className.replace("done","replaceThis");
li.classList
li.classList.add("new");
li.className.remove("new");
li.parentElement
li.parentElement.children[0].innerHTML="Frank";

¶Events

和java、Qt等一样，也是Listener机制

var numOne=document.getElementById("num-one");
numOne.addEventListener("click",function(){
    alert("Hi");
});

其余事件还有：click, mouseenter, mouseleave, mousedown, mouseup, mousemove, keydown, keyup, focus, blur

实例A+B：

var numOne=document.getElementById("num-one");
var numTwo=document.getElementById("num-two");
var addSum=document.getElementById("add-sum");

numOne.addEventListener("input",add);
numTwo.addEventListener("input",add);

function add(){
    var one=parseFloat(numOne.value) || 0; //string变为float
    var two=parseFloat(numTwo.value) || 0;
    addSum.innerHTML = "Sum is: "+(one+two);
}

实例，（需要Elements作为变量的）代码重用：

var Robin=document.getElementById("Robin");
var Jack=document.getElementById("Jack");
var Pony=document.getElementById("Pony");
Robin.addEventListener("click",picLink);
Jack.addEventListener("click",picLink);
Pony.addEventListener("click",picLink);

function picLink(){
    // console.log(this);
    var allImages=document.querySelectorAll("img");
    for(var i=0; i<allImages.length; i++){
        allImages[i].className="hide";
    }

    var picId=this.attributes["data-img"].value;
    var pic=document.getElementById(picId);
    pic.className="";
}

实例：代办事项（输入框的响应例程）

var checklist = document.getElementById("checklist");
var items = checklist.querySelectorAll("li");
var inputs = checklist.querySelectorAll("input");
for(var i=0; i<items.length; i++){
    items[i].addEventListener("click",editItem);
    inputs[i].addEventListener("blur",updateItem);
    inputs[i].addEventListener("keypress",itemKeypress);
}
function editItem(){
    this.className="edit";
    var input = this.querySelector("input");
    input.focus(); //点击一次就能输入了
    input.setSelectionRange(0,input.value.length); //点击全选
}
function updateItem(){
    this.previousElementSibling.innerHTML=this.value;
    this.parentNode.className="";
}
function itemKeypress(event){
    // console.log(event.which);
    if(event.which ==13){ //回车
        updateItem.call(this);
    }
}

¶javascript的5个weird and awesome

First Class Functions

函数可以被当做变量传递

function add(first,second,callback){
    console.log(first+second);
    if(callback){
    	callback();
    }
}
add(2,3,function(){
    console.log("done");
});
add(4,5);
///////////////////////////////////////////////
function handleClick(){
    //something smart
}
$("#myDiv").click(handleClick);

Event-Driven Environment

所有代码被存在内存里，一些函数只有当它需要使用的时候才会调用。

Closures

//retains state and scope after executes
$(document).ready(function(){
    var a=1;
    $('button').on("click",function(){
        a=a+1;
        alert(a);
    });
});

具有自动垃圾回收机制。

Scope

// scope === variable access
//context === this

var a=1;  //即 window.a
function foo(){
    var b=2;
}
foo();
console.log(b); //会报错，因为b这个变量不在window这个scope中

var a=1;
function foo(){
    var a=2;
    console.log(window.a); //1
    console.log(a); //2
}
foo();
console.log(a);	//1

function foo(){
    a=2;
}
foo();
console.log(a); //不会报错，会输出2；当定义变量没有写var时，默认定义了一个window scope变量
//如果不想让这样，可以在文件开头写：
//"use strict";

Context

function foo(){
    console.log(this);
}
foo(); //结果为：window，因为它相当于 window.foo();

var obj = {
    foo: function(one,two,three){
        console.log(this==window);
        //console.log(this);
    }
};
obj.foo(1,2,3); //false
//call, apply, bind
obj.foo.call(window,1,2,3); //true
obj.foo.apply(window,[1,2,3]); //true
var myBoundFoo = obj.foo.bind(window);
myBoundFoo(); //true

$("body").on("click",obj.foo); //body

它有什么用呢？举个实例

<ul->
    <li>Clicked <span>0</span> Times</li>
    <li>Clicked <span>0</span> Times</li>
    <li>Clicked <span>0</span> Times</li>
</ul->

$("li").on("click",function(){
   var currentTimes = parseInt($(this).find("span").html()); 
   $(this).find("span").html(currentTimes+1);
});

JQuery: 一个JavaScript库

使用：在html文件的body最后写

<script src="bower_components/jquery/jquery.js"></script>
<script>
//   $(document).ready(function(){ //表示当页面加载完毕再运行javascript
//    });
//上面的可以简写为 
    $(function(){});
</script>

一些例子：

<script src="bower_components/jquery/jquery.js"></script>
<script>
    $(function(){
        $("#btn1").html("My button");
        $("#panel1").css({color:"red",fontWeight:"bold"});
        $("#panel2").css({opacity:"0.5"});
        $("#btn1").hide(400).show(1000);
        $("#btn1").slideToggle(500).slideToggle(500);
        $("#btn2").delay(1000).slideUp(1000).slideDown(1000);
        $("#btn3").delay(3000).fadeOut(1000).fadeIn(1000);
    });
</script>

Event：

$(function(){
    $("#btn1").on("click",function(){
        $("#panel1").toggle(200);
    })
});

Selector:

1	$("button[id=btn1]")

Events实例（代码重用）：

$(function(){
    var content="My new content";
    $("#btn4").on("click",function(){
        $("#panel1").fadeToggle(200);
    });
    $(".bt").on("click",function(){
        var panelId = $(this).attr("panelid");
        $("#"+panelId).fadeToggle(200);
        $("#"+panelId+" .panelBody").html(content);
    });
});

How the Internet Works for Developers

¶前端

Browser向Server发送Requests，Server返回html，Browser根据html中所列的内容，依次向Server请求css和JavaScript 等文件。所以，html、css、JavaScript文件尽可能简短会加快用户的访问速度。整个流程如下图所示：

JavaScript可以通过xhr request或ajax request

Request和Response的格式如下：

一个访问google.com的实例如下：

可以在浏览器F12，打开Network查看。Request Method为GET是获取信息，POST是登陆，PUT是你编辑或更新了某些东西，DELETE删除了某些东西。

Response Headers里面的status，200表示OK，300表示重定向，400表示出现错误或not found，500表示服务器出错。

¶服务器端

Basic “Web Site” Server

“Web Application” Server

如果网络的流量很大，需要多个“Web Application” Server，然后使用负载均衡器去调配多个服务器。

后端技术：

Ruby on Rails nodejs PHP laravel

NodeJS

¶WHY YOU NEED A BUILD SYSTEM What Should a Build System Do

-Repetitive Tasks
-Concatenating Javascript
-Prefixing CSS
-Utilities
-JSHint
-Uglify(compress/minify)Javascript
-Local Server
-Live Reload GRUNT-GULP-BRUNCH Why is this good for you?
Page Speed
-Less file requests for page load
-Faster file requests Development Workflow
-You can use cool technologies
-You can break code into multiple files
-Easier to avoid code conflicts!
-You can avoid annoying,repetitive tasks

¶What is NodeJS?

node -v查看版本

node进入程序

node test.js 运行JS程序

Ctrl+C 两次退出

进入程序后相当于在浏览器的console，不同的是浏览器最开始的scope是window，nodejs中的scope是global；浏览器console中有document，nodejs中是process。

What do you do with it
- utilities on your machine （对于前端
- a web server (framework: express, koa) （对于后端
Gimme some super-basics
- how modules work
  
  多个JS文件之间调用函数或变量，实例如下：
  
  module1.js
  1
  2
  3
  var m2=require("./module2");
  console.log(m2);
  // m2();
  module2.js
  1
  2
  3
  4
  5
  6
  var a=1;
  module.exports.a=a;
  exports.b=2;
  // module.exports = function(){
  // console.log("module 2!");
  // };
- npm modules (node package manager)
  
  下载和管理packages，你可以在你的工程文件夹下输入npm install xxx 来安装xxx包（npm install xxx -S 安装包的同时更新package.json），通过var _=require("xxx");来调用。它有点像python里的conda，不同的是它是安装放在某个特定工程文件夹下的包，而不是整个电脑都能用的环境。
  
  可以通过npm init将当前工程用到的包导出到一个json文件 package.json。
  
  npm install自动下载调用所需的所有包。
- make a basic webserver
  1
  2
  3
  4
  5
  6
  7
  var http = require("http");
  var server = http.createServer(function(request,response){
  console.log("got a request!");
  response.write("hi!");
  response.end();
  });
  server.listen(3000);

学习资源

¶视频教程

¶模板

https://startbootstrap.com/