Coursera课程笔记：HTML, CSS, and Javascript for Web Developers
目录
- Week 1: Introduction to HTML5
- 1、Welcome to HTML, CSS, and Javascript for Web Developers!
- 2、Development Environment Setup
- Github and Browser Sync
- Resources for Asking Questions
- 3、HTML Basic
- Lecture 1: What is HTML?
- Lecture 2: Relevant History of HTML
- Lecture 3: Anatomy of an HTML Tag
- Lecture 4: Basic HTML Document Structure
- Lecture 5: HTML Content Models
- 4、Essential HTML5 tags
- Lecture 6: Heading Elements (and some new HTML5 semantic comments)
- Lecture 7: Lists
- Lecture 8: HTML Character Entity References
- Lecture 9: Creating Links
- Lecture 10: Displaying Images
- Week 2: Introduction to CSS3
- 1、Cascading Style Sheets Basics
- Lecture 11: Power of CSS
- Lecture 12: Anatomy of a CSS Rule
- Lecture 13: Element, Class, and ID Selectors
- Lecture 14: Combining Selectors
- Lecture 15: Pseudo-Class Selectors
- 2、CSS Rules Conflict Resolution and Text Styling
- Lecture 16: Style Placement
- Lecture 17: Conflict Resolution
- Lecture 18: Styling Text
- 3、The Box Model and Layout
- Lecture 19: The Box Model
- Lecture 20: The background Property
- Lecture 21: Positioning Elements by Floating
- Lecture 22: Relative and Absolute Element Positioning
- 4、Introduction to Responsive Design
- Lecture 23: Media Queries
- Lecture 24: Responsive Design
- 5、Introduction to Twitter Bootstrap
- Lecture 25: Introduction to Twitter Bootstrap
- Lecture 26: The Bootstrap Grid System
- Week 3: Coding the Static Restaurant Site
- 1、Visit with the client & Setup Overview
- Lecture 27: Visit with the Client
- Lecture 28: Design Overview
- Lecture 29: Some Ground Rules and Overview of Setup
- 2、Coding the Navigation Bar of the Site
- Lecture 30: Coding Basics of Navbar Header
- Lecture 31: Coding Button for Future Collapsible Menu
- Lecture 32: Coding Nav Menu Buttons
- Lecture 33: Fixing Navbar Layout, Text, and Dropdown Menus
- 3、Coding the Homepage and the Footer
- Lecture 34: Coding the Jumbotron
- Lecture 35: Coding Navigation Tiles
- Lecture 36: Coding the Footer
- 4、Coding the Restaurant Menu Pages
- Lecture 37: Coding the Menu Categories
- Lecture 38: Coding the Single Menu Category Page
- Lecture 39: Testing the Mobile Version on a Real Phone
- Week 4: Introduction to JavaScript
- 1、JavaScript Basics
- Lecture 40: Adjusting Development Environment for JavaScript Development
- Lecture 41: Defining Variables, Function, and Scope
- 2、JavaScript Types and Common Language Constructs
- Lecture 42: JavaScript Types
- Lecture 43: Common Language Constructs
- Lecture 44: Handling Default Values
- 3、Objects and Functions in JavaScript
- Lecture 45: Creating Objects Using 'new Object()' Syntax
- Lecture 46: Functions Explained
- Lecture 47: Passing Variables by Value vs. by Reference
- Lecture 48: Function Constructors, prototype, and the 'this' Keyword
- Lecture 49: Object Literals and the 'this' Keyword
- 4、Arrays, Closures, and Namespaces
- Lecture 50: Arrays
- Lecture 51: Closures
- Lecture 52, Part 1: Fake Namespaces
- Lecture 52, Part 2: Immediately Invoked Function Expressions (IIFEs)
- Week 5: Using Javascript to Build Web Applications
- 1、Document Object Model Manipulation
- Lecture 53: DOM Manipulation
- Lecture 54: Handling Events
- Lecture 55: The 'event' Argument
- 2、Introduction to Ajax
- Lesson 56: HTTP Basics
- Lesson 57, Part 1: Ajax Basics
- Lesson 57, Part 2: Ajax Basics
- Lesson 57, Part 3: Ajax Basics
- Lecture 58: Processing JSON
- 3、Using Ajax to Connect Restaurant Site with Real Data
- Lecture 59: Fixing Mobile Nav Menu Automatic Collapse
- Lecture 60: Dynamically Loading Home View Content
- Lecture 61, Part 1: Dynamically Loading Menu Categories View
- Lecture 61, Part 2: Dynamically Loading Menu Categories View
- Lecture 62: Dynamically Loading Single Category View
- Lecture 63: Changing 'active' Button Style Through Javascript
课程地址： https://www.coursera.org/learn/html-css-javascript-for-web-developers
w3schools： https://www.w3schools.com/html/
Week 1: Introduction to HTML5
1、Welcome to HTML, CSS, and Javascript for Web Developers!
推荐的书：Soft Skills: A Developer’s Life Manual by John Sonmez
The following is a link to a GitHub.com repository we are using for this course:
https://github.com/jhu-ep-coursera/fullstack-course4
It contains:
- Source code for ALL examples used in this course
- Lecture Slide PDFs
- Starter code for end of module assignments.
2、Development Environment Setup
Github and Browser Sync
其中，Browser Sync用途：在本地编辑代码然后保存后，可以即时显示在浏览器中
安装方法：
要先安装Node.js，然后打开命令行或者Node.js command prompt:
// 配置国内的npm源：
npm config set registry https://registry.npm.taobao.org
// 配置后可通过下面方式来验证是否成功
npm config get registry
// 安装
npm install -g browser-sync
// 验证是否安装成功
browser-sync --version
使用：在对应的文件夹中输入命令（在命令行）
browser-sync start --server --directory --files "*"
Resources for Asking Questions
- stackoverflow.com
- https://jsfiddle.net/ : 在网页中输入代码，复制链接，重新打开后仍然可见
- codepen.io : 功能比第二个网站更强大
3、HTML Basic
Lecture 1: What is HTML?
summary：
Lecture 2: Relevant History of HTML
html5 standards: https://www.w3.org/TR/html52/
caniuse.com : 查某项功能有哪些浏览器支持
validator.w3.org : 验证html代码的语法是否正确
Lecture 3: Anatomy of an HTML Tag
等号前后可以有空格
Lecture 4: Basic HTML Document Structure
The head tag contains items that describe the main content of the page. Things like what character coding should the browser use for the main content. It can contain authors description of the page, page title, and whatever other external resources are needed to render the page properly, among other things. ==The point is it contains some metadata about the main content. ==
Lecture 5: HTML Content Models
The term content model refers to the full behavior the browser applies to the elements belonging to that content model, and to the nesting rules of those elements. In other words, which elements are allowed to be nested inside which other elements. Prior to HTML5 specification, HTML elements were either block level or inline elements. HTML5 split these two content models into seven models.
The div element stands for division, and the span element stands for span. The div element is your most generic block-level element, and the span is your super generic, inline element.
4、Essential HTML5 tags
Lecture 6: Heading Elements (and some new HTML5 semantic comments)
New HTML5 Elements
The most interesting new HTML5 elements are:
-
New semantic elements like
, -
New attributes of form elements like number, date, time, calendar, and range.
-
New graphic elements:
. -
New multimedia elements:
.
Lecture 7: Lists
Lecture 8: HTML Character Entity References
Non-breaking Space
A common character entity used in HTML is the non-breaking space: ;
A non-breaking space is a space that will not break into a new line.
Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.
Examples:
- § 10
- 10 km/h
- 10 PM
不要将
Lecture 9: Creating Links
In HTML, links are defined with the tag:
href: hypertext reference
Link Titles:
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
Lecture 10: Displaying Images
In HTML, images are defined with the
The
The alt Attribute
The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
Week 2: Introduction to CSS3
1、Cascading Style Sheets Basics
Lecture 11: Power of CSS
Lecture 12: Anatomy of a CSS Rule
Lecture 13: Element, Class, and ID Selectors
So one thing to notice here is that out of all the selectors, the element selector, the class selector and the id selector, the id is the least reusable one. That makes sense, right? Since by HTML rules, a particular id attribute value can only appear once in a document.
Lecture 14: Combining Selectors
select elements with both class ‘highlight’ and class ‘mainpoing’
Lecture 15: Pseudo-Class Selectors
2、CSS Rules Conflict Resolution and Text Styling
Lecture 16: Style Placement
inline styling: use style as an attribute; not recommended; can be used for quick testing
external style sheets
Lecture 17: Conflict Resolution
when targeting the same elements and having conflicts&
when targeting the same elements but for different properties
The basic idea is that you have the document object model tree. And if you specify some CSS property on some element, all the children and grandchildren and so on and so on of that element will also inherit that property without you having to specify the property for each and every element.
Lecture 18: Styling Text
字体颜色可以通过6位16进制数字来表示，前两位、中间两位、最后两位分别表示红绿蓝（RGB）的颜色深度
2em表示再将当前字体大小增大一倍
3、The Box Model and Layout
Lecture 19: The Box Model
In HTML every element is considered a box.
The box model refers to the components that make up an HTML box as well as the rules that govern how these box components affect the layout as well as how width and height of the box are calculated.
margin不算是box的一部分
设置width时：默认为指定content的宽度，不包括padding、border、margin等
通过设置box-sizing: border-box;，可以将宽度指定为content加padding加border的宽度（recommended）
全局设置
左右时，叠加
上下时，大吃小
当文本内容超出给定的宽、高限制时，使用overflow来调节
Lecture 20: The background Property
Lecture 21: Positioning Elements by Floating
Lecture 22: Relative and Absolute Element Positioning
这里的html是指element
4、Introduction to Responsive Design
Lecture 23: Media Queries
Lecture 24: Responsive Design
this way is not recommended nowadays
告诉浏览器不要对页面进行缩放，按照设备原来的宽度来显示页面就行
5、Introduction to Twitter Bootstrap
Lecture 25: Introduction to Twitter Bootstrap
Lecture 25 introduce how to get started with bootstrap
Lecture 26: The Bootstrap Grid System
Week 3: Coding the Static Restaurant Site
1、Visit with the client & Setup Overview
Lecture 27: Visit with the Client
Lecture 28: Design Overview
用于制作模板：
https://balsamiq.com/
Lecture 29: Some Ground Rules and Overview of Setup
tag中:
# 以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。
# 这行代码一般要放在靠前的位置
使用Google来调整字体：
2、Coding the Navigation Bar of the Site
Lecture 30: Coding Basics of Navbar Header
让browser-sync关注当前目录及子目录：
** HTML
Lecture 31: Coding Button for Future Collapsible Menu
HTML Tag：
从bootstrap官网复制的模板 - 用于小屏幕时右上角的菜单按键：
为none时，对应的element在页面中不显示
用来设定在大于一定宽度时，不显示
Lecture 32: Coding Nav Menu Buttons
使用bootstrap提供的图标：
这些icon属于font-icon，所以可以通过font-size来调整大小
Lecture 33: Fixing Navbar Layout, Text, and Dropdown Menus
根据不同的屏幕宽度调整
3、Coding the Homepage and the Footer
Lecture 34: Coding the Jumbotron
Lecture 35: Coding Navigation Tiles
用这个网站来得到指定大小的图片来占位置：
使用地图：
将下面的链接放在元素的href属性中：
embed map放在html中的对应位置
Lecture 36: Coding the Footer
HTML
The
The
The line-height property specifies the height of a line：
4、Coding the Restaurant Menu Pages
Lecture 37: Coding the Menu Categories
Lecture 38: Coding the Single Menu Category Page
Lecture 39: Testing the Mobile Version on a Real Phone
Week 4: Introduction to JavaScript
1、JavaScript Basics
Lecture 40: Adjusting Development Environment for JavaScript Development
可以在或者中引用或写JavaScript：
Lecture 41: Defining Variables, Function, and Scope
return后面也可以不跟任何值，来表明当前函数结束
All arguments defined in a JavaScript function are optional. You can call that same compare function without any arguments at all, and it all will be perfectly legal.
What this means is that it does not matter where a particular function is executed. What matters as far as resolving scope of a variable is concerned is where that function is physically defined. Function B is physically defined inside the global scope. Therefore a reference of x inside function B Is going to look inside function B first. If it doesn’t find it it’s going to use its outer reference to look for it there and its outer reference is the global scope.
2、JavaScript Types and Common Language Constructs
Lecture 42: JavaScript Types
Lecture 43: Common Language Constructs
**String concatenation: **
其中，第二段代码出现了type coercion
And type coercion just means that the language converts something for you from one type to another type automatically on the fly.
Strict Equality
Strict equality operator (===) differs from regular equality operator (==) in that it checks if both values on its right and left are of the same type first. If they are not, it doesn’t try to coerce them to be the same value and just returns false.
** What is true / false:**
快速判断：
As a side point, even though semicolons at the end of statements are optional in JavaScript, it is pretty much an accepted best practice to always put them there.
For loop
Lecture 44: Handling Default Values
a || b：if (a) return a; else if (b) return b
3、Objects and Functions in JavaScript
Lecture 45: Creating Objects Using ‘new Object()’ Syntax
Lecture 46: Functions Explained
Functions in JavaScript are objects. They’re regular objects that have some special properties to them. So since they’re regular objects, I should be able to set properties on them just like I set properties on the other object.
Lecture 47: Passing Variables by Value vs. by Reference
当传递给函数的参数为primitive type时：
当传递给函数的参数为object时：
Lecture 48: Function Constructors, prototype, and the ‘this’ Keyword
this指向当前对象
**Function Constructors: **
- 相当于class
- 一般将名字的首字母大写，来表明这是一个function constructor
- 此时不能有返回值
- 用
new来创建新对象
**Prototype: **用来定义类似静态方法的东西
Lecture 49: Object Literals and the ‘this’ Keyword
And when we see the new keyword, the this variable inside of that object is now referring to the actual object and not to the outside window or outside global object. So this in fact works exactly like function constructors in terms of the new keyword. Right, even though the new keyword here is kind of implicit, well everything’s here implicit, since this is an object literal.
4、Arrays, Closures, and Namespaces
Lecture 50: Arrays
So because of dynamic typing, in JavaScript I’m able to store different types of objects in the same array, which is not true of most languages.
Short hand array creation:
Now what’s interesting about arrays in JavaScript is that they can even be sparse.
遍历Object：
遍历array：
arrays are just objects in JavaScript, this for loop will loop over properties, even over properties that really have nothing to do with the core data that we want to loop over.
Lecture 51: Closures
So how then can it possibly know what the multiplier variable is? Because at the time that this is executing the makeMultiplier function is no longer in the execution stack. It’s done. It returned whatever we needed to return, and is no longer functioning. It’s done. It’s part of the execution stack. Well, the reason this still works is because of JavaScript closures. Since a function like this returned from inside of this function JavaScript preserves its outer lexical environment memory space for this function, so this function can go ahead and produce what it needs to produce. So the multiplier is something that’s still sitting in memory in lexical outside scope of this function. So even when we call doubleALL it will go ahead and execute this function. It will create its own execution environment. It will go ahead and look for the multiplier variable in its own execution environment. It will not find it and it will then try to look for for this variable in its outer lexical environment, and the outer lexical environment memory space will still remain even though the makeMultiplier function no longer exists. That’s how we basically are able to trap or to close in whatever variables and whatever memory space is sitting outside of the lexical environment of this return function, and that’s how closures work.
Lecture 52, Part 1: Fake Namespaces
this is something that you could do in order to separate kind of your name spaces, separate your functionality into separate files and also into separate name spaces, so you don’t step one up on the other.
Lecture 52, Part 2: Immediately Invoked Function Expressions (IIFEs)
为了在不同的js文件中分别保留greeting变量：
Week 5: Using Javascript to Build Web Applications
1、Document Object Model Manipulation
Lecture 53: DOM Manipulation
the document object contains our entire HTML page
document.getElementById("title");