前端JS01

1.1 大纲介绍

1.1.1 阶段介绍

前五天基础语法

中间五天 DOM(文档对象模型) 操作dom树

最后五天特效

http://www.webhek.com/ 特效

http://www.codecombat.cn/ 通过代码做游戏

1.1.2 JS的学习方法：

http://kb.cnblogs.com/page/191787/

1.1.3 前五天课程目标：

掌握编程的基本思想

掌握JavaScript的基础语法

变量

运算符

循环

数组

函数

内置对象

自定义对象

1.2 浏览器是如何工作的

浏览器工作原理地址：http://www.2cto.com/kf/201202/118111.html

1、User Interface 用户界面，我们所看到的浏览器

2、Browser engine 浏览器引擎，用来查询和操作渲染引擎

3、2用来显示请求的内容，负责解析HTML、CSS

4、Networking 网络，负责发送网络请求

5、JavaScript Interpreter(解析者) JavaScript解析器，负责执行JavaScript的代码

6、UI Backend UI后端，用来绘制类似组合框和弹出窗口

7、Data Persistence(持久化) 数据持久化，数据存储 cookie,HTML5中的sessionStorage

1.3 Javascript的简史

1995年的时候由网景公司开发的，当时的名字叫livescript 为了推广自己的livescript，搭了java顺风车，改名为javascript

与此同时，微软因此在自身的浏览器里，也推出了自己的脚本语言

jscript

1997年时候，由ECMA(欧洲计算机制造商协会)出面，推出了一套javascript的规范，Ecmascript ,规范提出js由三部分组成

JS的组成：

ECMAScript 基础语法

DOM 文档对象模型

BOM 浏览器对象模型

2003之前，网页界面上的弹窗广告几乎都是由js做的，被人称做牛皮癣

2004年的时候，JS的命运发生改变 ajax(谷歌公司)

2007的时候苹果公司推出的手机，可以用来上网

2010的时候 H5的出现 canvas 又推高了js的地位

2011年的时候， node.js 将js这种语言伸向后服务器端

1.4 JS语言的特性

JavaScript是世界上用的最多的脚本语言

脚本语言：不需要编译，直接运行时边解析边执行的语言

JavaScript是一种客户端(本地PC的浏览器)的脚本语言

JavaScript是一种弱类型的动态语言(当JS被引擎解析执行的时候，才会最终的确定变量的数据类型是什么;动态添加一些属性或是方法)

弱类型：对于数据类型的要求不严格，JS中的所有变量声明只有一个关键字就是var var a = 123;

后台语言对于数据类型要求相当严格：string bool int char double

基于对象：内置大量现成对象，编写少量程序可以完成目标

编译：一般后台语言都是编译执行的，将编写好的代码的一次性的编译成可执行文件，例如.exe文件，

小结：

1. 简单易用

可以使用任何文本编辑工具编写记事本，其它编辑器

只需要浏览器就可以执行程序

2. 解释执行

事先不编译

逐行执行

无需进行严格的变量声明

3. 基于对象

内置大量现成对象，编写少量程序可以完成目标

1.5 JS的书写位置

书写位置：

如果页面中有html代码的，尽量将js代码写在这些标签之后

输出的五句话：

1.6 变量

变量是用来帮助我们往计算机中存储数据的。

1.6.1 变量的命名

变量的命名一定要有意义，一看变量名就知道是什么意思

1.6.2 命名规则：

变量名必须以字母或下划线“_”或$开头

变量可以包含字母(从A至Z的大小字母)，数字,下划线或是$

JavaScript严格区分大小写，computer和Computer是两个完全不同的变量

建议：

变量的名称要有意义

变量的命名遵守驼峰命名法，首字母小写,第二个单词的首字母大写

例如：userName userPwd hightSchool

禁止使用javascript的保留字和关键字作为变量名（见下面的保留关键字图）

1.7 直接量

就是可以直接拿过来使用的数据值

1.8 +运算符

在变量和直接量(字符串)之间或两个字符串之间，用+起连接的作用

如果是两个数字之间用+的话，就是起加法运算中的加法运算

1.9 上午回顾

浏览器如何工作

JS的简介

JS的书写位置，可以写在当前页面的script标签里面，写在页面的任何位置，第二个，是可以引入过来

变量：用来帮助我们往计算机中存储数据用的，也可以获取数据

声明变量： var name; 告诉程序，我要开辟一块内存空间来存储数据，这块内存空间的名字是name,

name = “张三”; 是将张三这个数据存到开辟的内存空间当中

= 不是数学中的相等，是赋值运算符

var 变量名 = 数据值;

变量的命名规范：

变量的命名一定要有意义，让人一看就知道是做什么

命名规范：

变量以字母或或是”_”或是$开头，数字绝对不能做为变量的开头

可以包含字母(从A至Z的大小字母)，数字,下划线”_”或是$.

变量的命名遵守驼峰命名法，

当变量中有多个单词的时候，第一个单词的首字母小写,第二个单词的首字母大写

例如：userName userPwd hightSchool

严禁使用系统中的关键字和保留字。

+运算符的一个用法

+两边如果有一边是字符串的时候，起连接的作用

如果两边都是数字的话，是数学中的加法运算

1.10 变量的重复赋值

var age = 18; // 在内存中开辟一块空间，空间名是age,然后将18这个数据存到这块内存空间当中，
age = 81; // 将81这个数据存到age这块内存空间当中,原来的值就覆盖掉了，不存在了，只存有现有的值81
age = 200;
console.log(age);

1.11 Typeof 关键字用来检测变量的数据类型

string 这个就很多

Number 阿拉伯数字，不管正负，整浮，都是number

1.12 算术运算符

一元运算符：++ --

根据操作数来说，一元运算符，就是只需要一个操作数的运算符，二元，是需要两个操作数。

前加后加或是前减或是后减的区别：

后加加，参与运算的时候，先用自身的原值参与运算，之后再将自身的值加1，而前加加，是先将自身的值加1，而后拿着现在加1后的值，再参与运算。

减减同理。

二元运算符： + - * / %

1.13 转义符

\+一个特殊的字符，组成有一个有意义的或者其它功能的一个字符

\”

\t 制表符有四个字符的空格

\b backspace的缩写往前删除一个

\n 换行

1.14 复合赋值运算符

将=(赋值运算符)和算术运算符进行了一个合写

// 复合赋值运算符
    var a = 100;
//    a = a+5;
    a+=5; // a = a+5;
    console.log(a);

    b+=200;// b = b +200;
    c *= 30; // c = c*30;

d /=50; d = d/50;

e %= 20; e = e%20;

1.15 关系运算符

关系运算符是用来描述事物两者之间的关系，

> < >= <= == != === !==

1.16 Boolean类型

True

False

1.17 JS中的数据类型

string number boolean undefined null 基本数据类型

复杂数据类型对象 Date Array function

Undefined是一种数据类型，只有一个值就是undefined，代表变量声明了，没有赋值的一种状态。

变量声明与定义的区别：

变量声明指的量，只给变量起了一个名字，并没有数据值，var name;

变量的定义，就是连声明加赋值，var name = “张三”;

1.18 逻辑运算符

&& || ！

先看逻辑与 && 身材好颜值高

表达式1	表达式2	表达式1&&表达式2
true	true	true
True	False	false
False	True	false
False	False	false

逻辑|| 身材好颜值高

表达式1	表达式2	表达式1\|\|表达式2
True	True	true
True	False	true
False	True	true
False	False	false

! 刚好相反

表达式	！表达式
True	false
False	true

1.19 运算符的优先级

1.20 数据的类型转换

转成number

隐式转换 + - * / %

强制转换使用外部的方法或是函数进行的数据转换

Number() parseInt() parseFloat()

1.20.1 Number()函数

var a = "123";
var b = true;
console.log(Number(a)); // 123
console.log(Number(true)); // 1
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number("123.456")); // 123.456
console.log(Number(" ")); //0

boolean类型的值转换成Number类型true-->1 false-->0

unerfined-----> NaN

如果能将值转换成数字，就转换成对应的值，如果不能转换，则报NaN.

Number()函数的特点：

a.如果转换的内容可以转成数字，那么就直接返回这个内容对应的数字。

b.将整体进行转换，如果有一个不可以转换那么返回NaN.

c.如果在内容中出现小数，那么小数会保留，也会输出小数。

d.如果内容为空(null)，那么转换成0;

1.20.2 转string

隐式类型转换 +“”

强制类型 toString() String();

万物皆对象，JS中的对象几乎都有toString(); null，undefined是没有toString()方法，如果要强制转换的话，只能使用String();

能用toString()转换的对象，对String()都可以

1.20.3 转boolean类型

隐式类型 !!

强制类型 Boolean()

数据类型转boolean的时候，为false的情况：

0, “”,null,undefined,NaN, 这些转成boolean类型的时候都为false，其它的都为true;

1.21 NaN number类型

NaN : not a number 不是一个数字

是数字类型的一种，代表数字的一种不正常的状态，也就是说，本来可以转换成数字或是参与运算的变量，并没有转换过来，这个时候就报一个NaN,这样就避免了程序报错。

NaN是非常特殊的，特殊到凡是与NaN进行的运算，最终结果都是NaN,更特殊的是，NaN与谁都不相等，包括自己。

isNaN() 是不是一个数字非数字

1.22 JS中的语言结构

顺序结构

分支结构 if if-else

选择结构 if else-if else-if ...else swicth-case

循环结构 while do-while for for-in

1.23 If()

If(判断条件){ 一般是一个boolean类型的值或是关系表达式或是逻辑表达式

要执行的代码;

}

执行过程：

当程序运行到if处的时候，首先进入小括号，判断括号里面的条件是否成立，如果成立，也就是括号里是true，则进入大括号执行里面的代码，如果条件不成立，也是返回false，则直接跳过大括号，执行后面的代码。

If只能判断一种情况，如果想判断两种情况

If小括号中如果不是boolean类型的值，也不是关系表达式也不是逻辑表达式的时候，会隐式的调用Boolean()，将传进来的值，进行一个boolean类型的转换。

1.24 If..else

If(判断条件){ 一般是boolean类型的值或是关系表达式或是逻辑表达式

要执行的代码;

}else {

要执行的代码;

}

执行过程：

程序运行到if处，首先进入小括号，判断里面的条件是否成立，如果条件成立，也就是返回true,则进入大括号，执行里面的代码，如果判断条件不成立，也就是返回false,则进入else对应的大括号里面，执行里面的代码，执行完毕之后直接跳出if-else语句。两种情况肯定会执行其中一个大括号中的代码。

posted @ 2016-07-27 22:49 王康1 阅读(349) 评论(0) 收藏举报

刷新页面返回顶部

王康1

前端JS01

1.1 大纲介绍

1.1.1 阶段介绍

1.1.2 JS的学习方法：

1.1.3 前五天课程目标：

1.2 浏览器是如何工作的

1.3 Javascript的简史

1.4 JS语言的特性

1.5 JS的书写位置

1.6 变量

1.6.1 变量的命名

1.6.2 命名规则：

1.7 直接量

1.8 +运算符

1.9 上午回顾

1.10 变量的重复赋值

1.11 Typeof 关键字用来检测变量的数据类型

1.12 算术运算符

1.13 转义符

1.14 复合赋值运算符

1.15 关系运算符

1.16 Boolean类型

1.17 JS中的数据类型

1.18 逻辑运算符

1.19 运算符的优先级

1.20 数据的类型转换

1.20.1 Number()函数

1.20.2 转string

1.20.3 转boolean类型

1.21 NaN number类型

1.22 JS中的语言结构

1.23 If()

1.24 If..else

公告