JS概述

2017-09-26  本文已影响0人  嗨黄先生

1、JS作用

1、验证表单
2、页面特效(pc端的网页效果)
3、移动端(移动web和app)
4、异步和服务器 交互(AJAX)
5、服务端开发(noddejs)

1.1、浏览器工作原理

2、弱类型脚本语言(解释型语言,解析执行与编译执行)

2.1、解析执行与编译执行

编译执行:把代码编译成CPU认识的语言(文件),然后整体的执行。
解析执行:一行一行解析,解析一行执行一行。

2.2、弱类型脚本语言

脚本语言是:弥补编译语言的不足而存在的,作为补充语言,不用编译。
弱类型语言:简单理解定义一个变量,可以有多种数据类型。( var temp)

3、组成(前端标准和JS组成)

3.1、前段标准(HTML/css/js)

javascript、html、css各自的作用
HTML 提供网页上显示的内容(结构)
CSS 美化网页(样式)
javascript 控制网页行为(行为)
设计原则:
结构、样式、行为--分离!

3.2、JS组成

JS= ECMAScript + DOM +BOM +高级

ECMAScript(前身为欧洲计算机制造商协会)
JavaScript的语言规范
DOM(Document Object Model的简称)
javascript操作网页上元素的API
BOM(Browser Obeject Model的简称)
JavaScript 操作浏览器部分功能的API

3.3、输出语句

一、console.log("内容")在控制打印输出内容
二、alert("内容")弹出显示内容
三、document.write("内容")在页面书写内容

4、变量

4.1、命名规则

驼峰命名规则:getElementById/matherAndFather/aaaOrBbbAndCcc
遵从规则:
1、变量命名必须以字母或是下标号"_"或者"$"为开头
2、变量名长度不能超过255个字符。
3、变量名中不允许使用空格,首个字不能为数字。
4、不用使用脚本语言中保留的关键字及保留符号作为变量名。
5、变量名区分大小写。(javascript是区分大小写的语言)
6、汉语可以作为变量名。但是不建议使用!!!(low)

4.2、变量使用

定义赋值和定义后在赋值
var age = 19;
var age ; age = 19
不建议使用:var age = “张三”; age = 19; 跨类型。
案例:变换变量
非数值型和数值型。

5、数据类型

5.1、数据类型划分

数据类型划分
使用关键字typeof:查看方法: typeof name或者 typeof(name)

5.2、简单数据类型(值类型)

四种:字符串 、数字 、布尔 、未定义 、空
String Number Boolean undefined null

5.3、复杂数据类型(引用类型)

Object、function、Array、Date、RegExp、Error.......

5.4、字面量

固定的值,让你从“字面上”理解其含义。
数值字面量
var age=18;//数值字面量,18为字面值

5.5、简单数据类型介绍

Number
1、进制
进制包括2进制、8进制(011)、10进制、16进制(0xA)等。。
2、浮点数
因为精度丢失问题,所以不断计算后的两个浮点数是否相等。
3、数值范围
由于内存的限制,ECMAScript并不能保存世界所有的数值
最小值:Number.MIN_VALUE,这个值为:5e-324
最大值:Number.MAX_VALUE,这个值为:1.7976931348623157e+308
无穷大:Infinity
无穷小:-Infinity

NaN

a)NaN非数值(Not a Number的简写)
console.log(“abc”/18); //结果是NaN
Undefined和任何数值计算为NaN;
NaN 与任何值都不相等,包括 NaN 本身
b) isNaN() :任何不能被转换为数值的值都会导致这个函数返回 true
(isNaN译为是否符合一个标准,什么标准呢?不是一个数字的标 准,如果符合了那么就不是一个数字,不符合就是一个数字)
isNaN(NaN);// true
isNaN(“blue”); // true
isNaN(123); // false

String

1、字面量定义方式
用引号时,可单可双,唯独不可一单一双。可用.length看有几个字符。

var name="zhangsan";
var name='zhangsan';
var name='zhangsan";//错误,单引号和双引号要成对出现

2、转译
总结:无法输出的字符,先输出/,在输出字符。(“、\、换行等....)
3、字符串不可变
在内存中不会立刻消失,只能二次赋值,原有的字符在一定时间内被垃圾回收器回收。
4、字符串拼接
如果两个变量都是字符串,无论是否包含数字,只要是拼接,那么在前一个后面添加后一个字符串。(+与-情况不同,详情参考数据转换)

Booblean

1、Booblean类型有两个字面量:true和false,区分大小写。(大写不对)
虽然Booblean类型的字面值只有两个,但ECMAScript中所有类型的值都有与这两个Booblean值等价的值
2、true
true、除0数字、"something"、Object(任何对象)为true
3、false
false、0、""、undefined、null为false
4、if判断时会把()内的值强行转换成boolean类型进行判断

undefined和null

null和undefined有最大的相似性、看看null==undefined的结果(true)也就更加说明这点。但是null==undefined的结果(false).不过相似归相似,还是有区别的,就是和数字运算时,10+null结果为:10;10+undefined结果 为:NaN.
任何数据类型和undefined运算都是NaN;
任何值和null运算,null可看做0运算。

6.数据类型转换

任何简单类型转换成String(三种方法)
变量+“” 或者 变量+“abc”
String(变量)
变量.tostring() 注意:undefined和null不可以
Null和undefined无toString方法。
任何简单类型转换成Number
此转换容易产生NaN,一旦被转换的变量中含有非数字字符,都容易出现NaN
变量-/一个数字(有非数字字符会出现NaN)
例:var num1 = “11”- 0; var num2 =“11”
1;var num =“11”/1;
JS底层做了一个强制类型转换,把字符串转换成了Number进行运算。
Number(变量)(有非数字字符会出现NaN)
var num1 = Number(“18”); 把字符变成了数字。
var num2 = Number(“18.99”); 结果为18.99数字型。(有小数也转换)
parseInt()和parseFloat()(译为取整和取浮点数)
空字符串parseInt()和parseFloat()返回NaN,Number("")返回0
parseInt(变量):如果变量中收割字符为字母则结果为NaN。
否则取出现首个非数字前的整数。

123=parselnt("123.123aaa");

parseFloat(变量):如果变量中收割字符为字母则结果为NaN。
否则取出现首个非数字前的浮点数。(没有小数取整)

123.123=parseFloat("123.123aaa");

特别提示

Boolean类型中:true数值为1;false为0;
null的数值类型为0;
undefined无数值类型或者为NaN;
任何简单类型转换成Boolean
任何数据类型都可以转换成boolean类型,所以和以往两个转换不同;
Boolean(变量)

var bool=Boolean("1111");  bool为true

!!变量
第一个逻辑非操作会甚至于无论什么操作数返回一个与之相反的布尔值
第二个逻辑 非操作则对于该布尔值求反
于是就得到了这个值真正对应的布尔值

7、操作符

7.1、操作符种类

一、算数运算符(+—/...)
a)一元运算符:正号、负号、++、--、平方等一个变量就能运算
b)二元运算符:+-
/%等两个变量才能运算
c)三元运算符: 值1?值2:值3;
二、逻辑运算符( ||&& ! )(或且非)
三、比较运算符(<、>、==、>=...)
四、赋值运算符(=、+=、-=、*=、/=、%=)

7.2、优先级

7.3、&&和||运算

&&链接两个boolean类型,有一个是false结果就是false
链接值不是布尔类型时,按照成布尔类型计算,结果本身不变。(非布尔)
例子: 1 = 2&&1; 0 = 0 && 1; 都是true取后面,都是false取前面。

7.4、||链接两个boolean类型,有一个是true结果就是true

连接值不是布尔类型时,按照成布尔类型计算,结果本身不变。(非布尔)
例子: 2= 2||1; 1 = 0 || 1; 都是true取前面,都是false取后面。

var obj = document.body.scrollTop || document.documentElement.scrollTop;

8、流程控制

一、顺序结构(程序正常执行流程从上往下,从左往右)(不用研究)
赋值运算时为从右往左执行,且左侧为属性或变量,不取值!!!
二、选择结构
a)If语句
b)Switch语句
三、循环结构
a)for循环
b)while循环
do...while循环

8.1、循序结构

程序正常执行顺序不必过多研究,特殊需求,

8.2、选择结构

共有两种,if语句和switch语句。If常用,switch为特殊情况使用,判断条件出现的情况特别多的时候用switch,其他时候if语句比较方便。

8.3、If语句

一、If语句用法有三种
1.if(条件1){程序1}
2.if(条件1){程序1}else{程序2}
3.if(条件1){程序1}else if(条件2){程序2}...else{程序n}
二、三目运算(也叫三元运算)(目或者元代表几个表达式)
三目运算可以替代部分if...else...功能,运算简单,使用方便,代码清晰。

表达式1?值1:值2

8.4、Switch语句

switch (值1) {
case value1:
程序1;
break; // break 关键字会导致代码执行流跳出 switch 语句
case value2:
程序2;
break;
default:
程序3;
}
注意:
break可以省略,如果省略,代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符,因此不会发生类型转换
(例如,字符串 "10" 不等于数值 10)。

8.5、循环结构

共3种,for/while/do...while;可根据需求选择使用;
1.遍历数组首选for循环,简单循环使用for。
2.而while循环强调,不记循环次数(不知道循环多少次),首选while。
3.最后do...while循环强调,无论怎样,至少执行一次是,使用do...while。

8.6、for循环

1)执行流程
for (变量;条件1;条件2){ 执行程序 }
执行过程:变量->条件1->执行程序->条件2->条件1->执行程序.....
直到条件1不成立,跳出循环。
2)三个表达式均为可选,但是必须写分号!!!
for(;;){程序} 死循环;

上一篇下一篇

猜你喜欢

热点阅读