Yutong & Orange


  • Home

  • Archives

《JavaScript高级程序设计》第三章笔记 - 操作符&语句

Posted on 2018-01-20

介绍

下半部分主要介绍了JavaScript的操作符,语句和函数。其中大多数熟练掌握的内容将不再展开赘述,主要回顾一些JavaScript特有的,以及之前并不熟悉的内容。

操作符(Operator)

一元操作符(Unary Operators)

  • ++/–
    • 操作数可以是数字,string,boolean或者object,操作后的数据类型是Number。
      • 可以转换为数字的string,先转化再+1或-1,不可以转换的,返回NaN。
      • boolean先转换为0或1,然后进行加减计算。
      • object先调用valueOf()方法,如果是NaN再调用toString()方法,再进行计算。
  • +/-
    • 如果应用在非数字的操作数上,使用和Number()方法一样的方法先进行转化再计算。

位操作符(Bitwise Operators)

  • 基本原理
    • 利用IEEE-754的64位二进制格式存储,但计算时整数是以32位计算之后再以64位存储。
    • 负数以二进制补码的形势存储,求绝对值的二进制码,取反,加1。
  • 按位非(~)
  • 按位与(&)
  • 按位或(|)
  • 按位亦或(^)
  • 左移(<<)
  • 有符号右移(>>,左边补符号位的数值)
  • 无符号右移(>>>,左边补0)

布尔操作符(Boolean Operators)

  • 逻辑非(!,计算结果是Boolean值)

    1
    2
    3
    4
    5
    6
    7
    alert(!false) //true
    alert(!"blue") //false
    alert(!0) //true
    alert(!NaN) //true
    alert(!"") //true
    alert(!null) //true
    alert(!"123") //false
  • 逻辑与(&&,返回的是第一个或者第二个操作数的值)

    1
    2
    alert(null && 3) // null
    alert(1 && 3) // 3
  • 逻辑非(||,返回的是第一个或者第二个操作数的值)

    1
    2
    3
    alert(null || 3) //3
    alert(1 || 3) //1
    alert(null || NaN) //NaN

乘性操作符(Multiplicative Operators)& 加性操作符(Additive Operators)

  • Infinity * 0 = NaN
  • Infinity / Infinity = NaN
  • Infinity % Infinity = NaN
  • Infinity + -Infinity = NaN
  • Infinity - Infinity = NaN
  • -Infinity - -Infinity = NaN

关系操作符

相等操作符

  • 类型转换
    • Boolean和字符串会被转换成数字。
    • Object调用valueOf()函数。
  • 全等和不全等
    • 全等是在不转换类型的情况下相等。
    • 不全等是转换类型之前或之后相等即可。
      1
      2
      3
      alert(1 == true) //true
      alert("1" == true) //true
      alert(1 === true) //false

赋值操作符

逗号操作符

语句

if语句

do-while语句

while语句

for语句

  • ECMAScript中没有块级作用域,所以for语句中定义的变量在for语句之外也可以使用。

    for-in语句

  • 用于迭代object中的属性。没有顺序之分。
    1
    for (var propName in window) {}

label语句

break和continue语句

with语句

  • 将代码的作用域控制在一个特定的对象中。
    1
    2
    3
    4
    5
    6
    7
    8
    var object = {
    prop1: 1,
    prop2: 2
    };
    with (object) {
    var p1 = prop1; //1
    var p2 = prop2; //2
    }

switch语句

函数

  • ECMAScript里面的函数的参数时是以数组arguments的形式表示的。所以不管在定义函数时有一个命名的参数,调用时都可以传递少于,等于或多于其个数的参数。
  • arguments的长度是实际调用时传递的参数的个数。可以通过改变arguments的值来改变命名参数的值,但是反之不适用。

    1
    2
    3
    4
    5
    function add(num1, num2) {
    arguments[1] = 10;
    return num1 + num2;
    }
    add(1,2); //return 11
  • 在严格模式下,不能修改arguments的值(syntax error),并且不能通过修改arguments的值改变num2的值。

  • 函数不能被重载,如果有多个函数重名,在代码最后面出现的得到函数名。
  • 函数都是值传递,没有地址传递。

《JavaScript高级程序设计》第三章笔记 - 语法&数据类型

Posted on 2018-01-16

介绍

本章主要介绍了JavaScript语言,准确来说是ECMAScript定义的一些语法基础。包括语法,关键字&保留字,数据类型,操作符,语句和函数。
由于ECMAScript的语法和C以及其他类似C的语言的语法相似,这里在一些已经熟练掌握的知识点不会展开讨论和举例。

语法

  1. 区分大小写。
  2. 标识符命名规则:
    1. 以字母,_或$开头
    2. 只包含字母,_,$,或者数字
    3. 字母包括ASCII码和Unicode字符,但不推荐使用。
  3. 关键字:
    |break |do |instanceof|typeof |
    |case |else |new |var |
    |catch |finally |return |void |
    |continue|for |switch |while |
    |debugger|function|this |with |
    |default |if |throw |
    |delete |in |try |
  4. 保留字:
    |abstract |enum |int |short |
    |boolean |export |interface |static |
    |byte |extends |long |super |
    |char |final |native |synchronized |
    |class |float |package |throws |
    |debugger |implements|protected |valotile |
    |double |import |public |
  5. 变量
    1. ECMAScript是松散类型,变量可以保存任何类型的数据。
    2. 已经被赋值的变量可以被重新赋予别的数据类型的值。
    3. 用var声明的变量是局部变量。

数据类型

  1. 基本数据类型(simple data type / primitive types):Undefined, Null, Boolean, Number and String.
  2. 复杂数据类型(complex data type):Object
  3. typeof操作符:返回值有“undefined”,“string”,“boolean”,“number”,“object”,“function”。但typeof Null的返回值是”object”。

Undefined

  • 只有一种值,即undefined。如果一个变量用var声明了且没有被赋值,将会得到值undefined。
  • 使用typeof判断没有赋值的变量和没有声明的变量时,都会返回“undefined”。所以建议每次声明变量时都赋值,就可以用typeof检测变量是否被声明。
  • 一般来说不推荐直接用

Null

  • 只有一种值,即null。
  • Null和Undefined存在值相等的关系。

    1
    alert(null == undefined); //return true
  • 不同于Undefined,如果一个对象object需要被赋值为null方便日后进行进一步操作,null用于赋值是合理的。

Boolean

  • true不等于1,false不等于0。
  • 类型转换
    | Data Type | true | false |
    | ————- |:————-: | —–: |
    |String | non-empty string | “” |
    |Number | non-zero number | 0 |
    |Object | any object | null |
    |Undefined | n/a | undefined|

Number

  • 基于IEEE-754标准
  • 一般为十进制,八进制以(0)开头,十六进制以(0x)开头。
  • 小数的存储空间为整数的两倍。故而如果小数的值是整数(如1.0),或者小数点后面没有值(如1.),都会以整数的方式存储。
  • 小数的运算不应该用来做判断条件,因为比如(0.1 + 0.2)的计算结果是0.30000000000004,是IEEE-754标准的通病。因此:
    1
    if (0.1+0.2 == 0.3) {}

这样的代码就并不好。

  • 最小值(Number.MIN_VALUE)是5e-324,最大值(Number.MAX_VALUE)是1.7976931348623157e308。
  • NaN表示Not a Number。比如 x / 0的运算会返回NaN。但是不会报错阻止后续程序的运行。NaN不等于任何值,包括自身。
  • isNaN()方法被调用时,会尝试将参数转化为数字,成功则返回false,否则返回true。
  • 类型转换
  1. Number()可以使用在任何数据类型上。
1
2
3
4
5
6
7
var num1 = Number(null); // return 0
var num2 = Number(undefined); //return NaN
var num3 = Number(""); // return 0
var num4 = Number(" "); // return 0;
var num4 = Number("0001"); // return 1;
var num5 = Number(true); // return 1;
var num6 = Number("hello world"); // return NaN
  1. parseInt()用来判断String可否被转化为整数。
1
2
3
4
5
6
var num1 = parseInt("12.3"); // return 12
var num2 = parseInt("123abc"); // return 123
var num3 = parseInt(""); // return NaN
var num4 = parseInt("0001"); // return 1;
var num5 = parseInt("0x3"); // return 0;
var num6 = parseInt("hello world"); // return NaN
  1. parseFloat()方法用来判断String可否被转化为小数。
1
2
3
4
5
6
var num1 = parseFloat("12.3.3"); // return 12.3
var num2 = parseFloat("123abc"); // return 123 - 整数
var num3 = parseFloat(""); // return NaN
var num4 = parseFloat("0001.2"); // return 1.2;
var num5 = parseFloat("0x3"); // return 0;
var num6 = parseFloat("hello world"); // return NaN

String

  • String是不可改变的,字符串生成后即在内存中存储,如果字符串变量被重新复制,将会为新字符串开辟存储空间,然后销毁旧字符串。
  • toString()方法适用于numbers, Boolean, objects和strings。

Object

对象主要有以下几个属性和方法:

  • constructor:构造器,用来生成对象实例。
  • hasOwnProperty(propertyName):判断对象是否有特定属性,参数需是string。
  • isPrototypeOf(object):判断对象的原型是否是另一个对象。
  • propertyIsEnumerable(propertyName):判断一个属性是否能够有for-in语句。
  • toLocaleString():返回一个字符串代表对象在执行环境中的表示。
  • toString():返回一个字符串代表对象。
  • valueOf():返回一个代表对象值得string,number或者Boolean。

《JavaScript高级程序设计》第二章笔记

Posted on 2018-01-14

介绍

第二章主要介绍了如何在HTML文件中引入JavaScript代码。

<script>

<script>是在HTML文件中加载JavaScript代码的主要方法,主要有以下六个属性。

  1. async:optional。表示立即开始加载脚本,但不影响后面代码的运行。只针对external src。但是多个async的文件被解析的顺序是不被保证的。

    1
    <script async src="example.js">
  2. charset:optional。表示src加载的脚本使用的字符集,经常被忽略,不常用。

  3. defer:optional。表示脚本加载后会等到页面加载完再运行。只针对external src。

    1
    <script defer src="example.js">
  4. language:已废弃。

  5. src:引用的external src的路径。
  6. type:替代了language。表示加载的脚本的内容类型(MIME类型)。一般设置为text/javascript,不设置时默认也是text/javascript。但是服务器传送JavaScript文件时常用的MIME类型其实是application/x-javascript,在type中设置该值又会被忽略。我的理解是这个属性的设置要不不够准确要不不被理睬。

    注意事项

  7. 在<script>标签里面不可以出现任何</script>字符串,否则将被编译为script的结束。
    例如:
    1
    2
    3
    <script>
    alert("</script>");
    </script>

是一段不会被正常解析的代码。

  1. 当<script>里面又有external的src属性值,又有internal的JavaScript代码,会加载外部文件,内在代码会被忽略。

<noscript>

<noscript>tag可以在HTML文档中,除了<script>tag之外的任何地方,意思是说在<noscript>tag里面的东西,只有在满足以下两种条件任意一种的情况下才会被加载。

  1. 浏览器不支持脚本。
  2. 浏览器的脚本功能被禁用。
    1
    2
    3
    <noscript>
    <p>本页面需要script功能来加载。</p>
    </noscript>

《JavaScript高级程序设计》第一章笔记

Posted on 2018-01-14

开篇以前

这一系列的文章主要是以读书笔记的形式,记录学习《JavaScript高级程序设计》一书的学习心得和总结。
对于阅读和学习本书的最初想法,来源于一次失败的国内IT公司前端岗位面试。准备面试和实际面试的过程中深刻的意识到了自己对前端知识了解的肤浅和松散。之前零散的记忆和学习也没有真正帮助到了解前端工作内容重心和核心技术。面试官推荐了这本书作为学习资料,并推荐了看书作为学习方法。由此将其确定为近期学习和准备面试的主要内容和方向。即使面试过程和结果都很不尽人意,仍然十分感谢面试官的指点。我想这对于我接下来的职业发展和个人提升,有非常重大的帮助和意义。
以此作为前端之路的起点。

介绍

第一章主要介绍了JavaScript的历史,演化过程,以及一些重要概念入ECMAScript,DOM以及BOM。

JavaScript历史

最初在有JavaScript之前,人们并不能真正意义上的和前端有任何交互。即使是简单的提交表单(form)也需要在服务器端(server)端进行内容判定再等待结果返回。在拨号上网年代十分耗费时间。因此NetScape公司开始编写一种在客户端可以执行的语言来辅助功能的完成。起初命名为Mocha,之后改为ViewScript。在发表之前因Java的大热而定名JavaScript,蹭蹭热度哈哈哈。
JavaScript1.0是一个很大的成功,之后微软也为其开发的浏览器IE写了类似的语言名为JScript。两种语言都只能在各自的浏览器中运行,可想而知引发了一些麻烦。之后ECMA(European Computer Manufacturers Association)成立了一个,由各大浏览器所属公司的程序员组成的小组,对JavaScript的语法做出了标准化的规范,称之ECMA-262,而在其之上定义了一种脚本语言ECMAScript。
JavaScript的实现是基于三点,ECMAScript,DOM以及BOM。

ECMAScript

ECMAScript并不基于浏览器,同时也没有关于输入输出的定义。简单来说我理解ECMAScript是一个实现了ECMA-262标准的,并不在于真的拿来写程序的这样一种语言。但是基于ECMAScript,可以实现具体的,可用的编程语言,JavaScript也只是其中的一种。同时,实现了ECMAScript的语言能够执行的环境也不只是浏览器,Adobe Flash也是其中之一。

ECMA-262规定的内容

  1. 语法(Syntax)
  2. 类型(Type)
  3. 语句(Statement)
  4. 关键字(Keywords)
  5. 保留字(Reserved words)
  6. 操作符(Operators)
  7. 对象(Objects)

ECMAScript2016 & ECMAScript2016

[TODO]ECMAScript2015,16新增特性
http://kangax.github.io/compat-table/es6/

ECMAScript的兼容

一个语言要称实现了ECMAScript,需要达到以下几点要求:

  • 支持“ECMA-262”所定义的所有“类型,值,对象,属性,函数以及程序句法和语义”。
  • 支持Unicode。

但是实现ECMAScript的语言被允许做以下的操作:

  • 添加ECMA-262中没有定义的类以及类的新属性。
  • 修改或者扩展内置的程序正则表达式的语法。
    由此,其实ECMAScript的实现是给予了充分的弹性和空间。

DOM(Document Object Model)

DOM是一种针对XML,现用于HTML的API,其功能是把页面映射为多层节点结构。基于这样的树形结构,DOM提供的API可以实现对节点的,增删改操作。
DOM作为JavaScript的一部分,其实实际上,是在浏览器中实现ECMAScript的一个扩展。也有别的语言实现了自己的DOM。

BOM(Browser Object Model)

如果说DOM帮助程序员使用程序控制页面上的布局和节点,那么BOM就是帮助程序员用程序控制浏览器的部分功能,例如弹出窗口,缩放,提供分辨率信息等等。

CSS - How CSS works [Study Notes]

Posted on 2017-12-25

This series is the study note of the Advanced CSS couse. This article will introduce how CSS works behind the scene. Including how the mechanism resolves the conflicting CSS codes, and how the final CSS values are parsed.

Basic Knowledge

Different Entities

There are three different entities affecting the CSS code. Author, User and Browser.
Author: the author of the original CSS code.
User: people who see the page on browser, can modify the CSS using front-end tools, such as Chrome developer tools.
Browser: The browser itself has its own oginal way of rendering the page using some CSS properties.

Resolve Conflicts

how CSS conflicts are resolved
There are three steps to do to resolve the conflicts in CSS codes.

Importance

First, it will check the importance of the declaration. The importance basic means how the code has been marked as important. There are normal declaration, and the declaration with the !important, like background-color: blue !important;. Also as introduced in the previous section, there are three different entities who can affect the CSS codes. The importance of the declaration, from the least to the most are in the order of:

  1. Default browser declarations
    The default browser declarations is just the foundation CSS code that the necessary for the browser to render the content properly. It can be easily overrided.
  2. User declaration
    User’s normal declaration using the front-end tools will always override the browser’s default settings.
  3. Author declarations
    User cannot override the properties that have valued defined by author’s code using the front-end tools.
  4. Author !important declarations
  5. User !important declarations
    But if user add !important in the declaration, it gives the code the highest priority in importance.

Specificity

If the conflicting declarations have the same importance, it will check the specificity of them. The more specific the declaration is, the higher priority will be given. From the least to the most specific declarations are in the order of:

  1. Elements, pseudo-elements
    1
    2
    3
    a {
    background-color: red;
    }

The declaration for the background-color here is for all the elements a. It has the least specifity.

  1. Classes, pseudo-classes, attribute
    1
    2
    3
    .class {
    background-color: yellow;
    }

Here the declaration is for all the classes with the class name as “class”.

  1. IDs
    1
    2
    3
    4
    5
    #id {
    background-color: blue;
    }
    Here is a declaration for the element with ID "id".
    1. Inline styles

A

1
2
3
If the CSS code has been written in the html code, it's the inline style and has the highest priority.

### Example

.button { //(inline:0, id:0, class:1, element:0)
background-color: red;
}
nav#nav div.div .button { //(inline:0, id:1, class:2, element:2)
background-color: yellow;
}
a { //(inline:0, id:0, class:0, element:1)
background-color: blue;
}

#nav a .button:hover { //(inline:0, id:1, class:2, element:1)
background-color: green;
}
```
In this case the second line will win the game!

Source order

If the conflicting declarations have same importance and specificity, the one in the latest section will be chosen and override the codes before.

Process Values

how CSS conflicts are resolved
This section will introduce how the values bare processed step by step by the browser.

  1. Declared value
    The browser will first search for author declaration for the property, and get all the related values.
  2. Cascaded value
    Then it will follow the rules introduced in the previous section, to get the actual value from the declaration.
  3. Specified value
    This is the default value for the property if no author declarations found.
  4. Computed value
    This step is for computing the relative value into actual values.
  5. Used value
    This step is for the final calculation based on the layout.
  6. Actual value
    This step will apply the restrictions of the browser and device into the values, then get teh final actual value.

How to turn relative values into absolute

how CSS conflicts are resolved

Inhiritance

how CSS conflicts are resolved

Sketching - Draw an eye & Lines

Posted on 2017-12-07

This series of articles are the notes taking of this udemy course. This article is about starting with drawing an eye and then lines in arts.

Draw An Eye

Procedures

  1. Start with the basic shapes of the eye, the eyebrow, the ball and the core.
  2. Then add shadows on the edges, darken the lines, find the fixed shapes.
  3. Color the core of the ball, adding more shades, figure out the reflection part in the ball, the muscules, and even more shades.
  4. Start drawing lines in eyebrow to make it authentic, also start coloring the eyeball, learn how to control the different kinds of shades, dark or light, tight or loose.
  5. Draw eyelashes, understand how eyelashes grows from the eyelid and has different angles.
  6. Even draw the reflection of eyelashes in the eye.

Key Notes

  1. Don’t work on a single part for too long. It will make the part dispatched from the rest. Make sure you are working all over the places.
  2. Always start with light lines to find the shape, don’t be too fixed at the beginning.
  3. Have a sense of shades and shadows.

What I drew

An Eye

Lines

Key Notes

  1. Contour lines are lines that fix the shape of the objects.
  2. There are different kinds of lines, dark, light, straight, curved, cornered, etc.
  3. Use different lines make the art much better.
  4. Practice draw the shape of objects using single line without looking at your work when you draw, instead stick at the object you are drawing.

Deploy Hexo Blog to Git

Posted on 2017-12-05

This article is about how to create a Hexo project and deploy it to your Github Page as your personal blog. I figured it out tonight following the instruction in this article HERE.

Create Your Hexo Project

Installation

You can simply follow the instruction on their official web page at https://hexo.io/docs/index.html. To install Hexo, you need NodeJS and Git installed as preferences. If you already have those installed, use the command line below to install Hexo. Then you are good to go.

1
$ npm install -g hexo-cli

Create A Project

First, make a directory in your local where you want to put your blog project, then go to that folder in your terminal. Then you can initialize a Hexo project using the command line at:

1
$ hexo init

This command will init the project for you. The file structure in the folder should look like:

1
2
3
4
5
6
7
+-- _config.yml //the configuration file
+-- package.json //contains the dependencies of the project
+-- scaffolds //contains some basis for posts, drafts, photos, etc.
+-- source //where the posts in your blog come from
| +-- _drafts //drafts
| +-- _posts //posts
+-- themes //contains the themes you'd like to use

Then you need to do the command below in the folder to install the dependencies. After that you will have a node_modules folder contains the libraries.

1
$ npm install

More details at https://hexo.io/docs/setup.html.

Run Server

To run the server, simply do hexo server or hexo d in short. Then you can go to localhost:4000 to check the blog project. When you do init, it created a default fundemental blog layout for you with the Hexo study information.

1
$ hexo server

Write Post

You can directly modify files in the _posts folder as mentioned using Markdown language.

Create GitHub Page

GitHub Page is somewhere you can deploy your web project onto. Every GitHub account get one page.

Create A Repository

It is required that you follow the naming pattern for your GitHub Page as [username]/[username].github.io. For example mine repository is at yutonghuangorange/yutonghuangorange.github.io, and my GitHub Page is at the url https://yutonghuangorange.github.io.

Create One Commit

It requires one commit to initialize the project. Basically it will render the index.html file in the repository as the index page. For example you can simly create a index.html file and write “Test” into it, when you go to the link you can see the text “Test” rendered in the page.

If you are using command line to play with Git, you can follow the instruction here.

1
2
3
4
5
$ git clone https://github.com/[username]/[username].github.io.git 
$ echo "Test" > index.html
$ git add .
$ git commit -m "The first commit for the index page"
$ git push

Then your GitHub Page repository should be good to go.

Deploy Hexo to GitHub

This is the key part of the whole process. There are basically two ways to do this. First is to use the Deploy function that Hexo has originally, Second is to use Git to do that.

The Principle of Deployment

When you deploy your hexo project to your github page, what it does is to first generate the required static files from whatever your Hexo project contains, then put those static files in a structure that Git can understand and render into a folder called .deploy_git, and upload those files to your repository. In this case, every time you want to update your repository, you need to first regenerate the static files then commit them.

Using Hexo Deploy

Configuration

First thing first, is to change the configuration file for your Hexo project in _config.yml file in the root of your project. Add the lines below to it.

1
2
3
4
5
deploy:
type: git
repo: [your repo] // for example: git@github.com:yutonghuangorange/yutonghuangorange.github.io.git
branch: [branch] // for example: master
message: [message]

Then you need to install the package used for this functionality.

1
$ npm install hexo-deployer-git --save

Then you need to generate the static files to be uploaded.

Procedures

1
$ hexo generate # or hexo g in short

Finally, deploy it to your git repo.

1
$ hexo deploy # or hexo d in short

Errors

You might get errors when you try the hexo d the first time.

1
2
3
4
Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.

If you see this, it means that you didn’t have a SSH key set up in your Git Hub account. You can follow the instructions HERE for a reference. After you set up the key, you should be able to deploy it to your repo properly.

12

Yutong Huang

17 posts
5 tags
© 2018 Yutong Huang
Powered by Hexo
|
Theme — NexT.Muse v5.1.3