javascript基础入门案例,javascript基础入门书籍

目录

第1章 JS概述 5

1.1 JS作用 5

1.2 浏览器工作原理 6

1.3 弱类型脚本语言（解释型语言，解析执行与编译执行） 6

1.3.1 解析执行与编译执行 6

1.3.2 弱类型脚本语言 6

1.4 组成（前端标准和JS组成） 7

1.4.1 前端标准（HTML/CSS/JS） 7

1.4.2 JS组成 7

1.5 引入方式 8

1.5.1 行内式（后台人员比较喜欢用） 8

1.5.2 内嵌式（学习期间用） 8

1.5.3 外链式（实际开发） 8

第2章 变量 8

2.1 命名规则 8

2.2 变量使用 9

2.2.1 定义赋值和定义后在赋值 9

2.3 案例：交换变量 9

第3章 数据类型 9

3.1 数据类型划分 9

3.1.1 简单数据类型（值类型） 9

3.1.2 复杂数据类型（引用类型） 9

3.2 字面量 9

3.3 简单数据类型介绍 10

3.3.1 Number 10

3.3.2 String 11

3.3.3 Booblean 12

3.3.4 undefined和null 12

第4章 数据类型转换 12

4.1 任何简单类型转换成String（三种方法） 13

4.1.1 变量+“”   或者     变量+“abc” 13

4.1.2 String(变量) 13

4.1.3 变量.toSting() 注意：undefined和null不可以 13

4.2 任何简单类型转换成Number 13

4.2.1 变量-*/一个数字（有非数字字符会出现NaN） 13

4.2.2 Number(变量)（有非数字字符会出现NaN） 13

4.2.3 parseInt()和parseFloat()（译为取整和取浮点数） 14

4.2.4 提别提示 14

4.3 任何简单类型转换成Boolean 14

4.3.1 Boolean(变量) 14

4.3.2 ！！变量 15

第5章 操作符 15

5.1 操作符种类 15

5.2 优先级 15

第6章 流程控制 16

6.1 循序结构 17

6.2 选择结构 17

6.2.1 If语句 17

6.2.2 Switch语句 17

6.2.3 案例：（可以用if语句实现，下去可以自己练习） 18

6.3 循环结构 18

6.3.1 for循环 19

第1章  JS概述

1.1 JS作用

1．验证表单（以前的网速慢）

2．页面特效（PC端的网页效果）

3．移动端（移动web和app）

4．异步和服务器交互（AJAX）

5．服务端开发（nodejs）

1.2 浏览器工作原理

1.3 弱类型脚本语言（解释型语言，解析执行与编译执行）

1.3.1 解析执行与编译执行

编译执行：把代码编译成CPU认识的语言(文件)，然后整体的执行。

解析执行：一行一行解析，解析一行执行一行 Python解释器的安装步骤。

1.3.2 弱类型脚本语言

脚本语言是：弥补编译语言的不足而存在的，作为补充语言，不用编译。

弱类型语言：简单理解定义一个变量，可以有多种数据类型。（var temp）

1.4 组成（前端标准和JS组成）

1.4.1 前端标准（HTML/CSS/JS）

JavaScript、HTML、CSS各自的作用

HTML 提供网页上显示的内容（结构）

CSS 美化网页（样式）

JavaScript（JS） 控制网页行为（行为）

设计原则：

结构、样式、行为---分离！

1.4.2 JS组成

JS  =  ECMAScript  +  DOM  +  BOM + 高级

ECMAScript（前身为欧洲计算机制造商协会）

JavaScript的语法规范

DOM（Document Object Model 的简称）

JavaScript操作网页上元素的API

BOM（Browser Object Model 的简称）

JavaScript操作浏览器部分功能的API

1.5 输出语句

一、console.log(“内容”)在控制台打印输出内容

二、alert(“内容”)弹窗显示内容

三、document.write(“内容”)在页面书写内容

1.6 引入方式

1.6.1 内嵌式（学习期间用）

1.6.2 外链式（实际开发）

注释问题：单行，多行，方法注释等..... 快捷键：ctrl+/ 和ctrl+shift+/

第2章  变量

2.1 命名规则

驼峰命名规则：getElementById/matherAndFather/aaaOrBbbAndCcc

遵从规则：

1.变量命名必须以字母或是下标符号”_”或者”$”为开头。

2.变量名长度不能超过255个字符。

3.变量名中不允许使用空格，首个字不能为数字。

4.不用使用脚本语言中保留的关键字及保留符号作为变量名。

5.变量名区分大小写。(java是区分大小写的语言)

6.汉语可以作为变量名。但是不建议使用！！！（low）

2.2 变量使用

2.2.1 定义赋值和定义后在赋值

var  age = 19;

var age ;     age = 19

不建议使用：var age = “张三”;     age = 19;    跨类型。

2.3 案例：交换变量

非数值型和数值型。

第3章  数据类型

3.1 数据类型划分

使用关键字typeof：查看方法：  typeof name   或者   typeof(name)

3.1.1 简单数据类型（值类型）

四种： 字符串 数字 布尔  未定义 空

  String   Number   Boolean undefined    null

3.1.2 复杂数据类型（引用类型）

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

3.2 字面量

固定的值，让你从“字面上”理解其含义。

数值字面量

var age = 18;  // 数值字面量，18为字面值

3.3 简单数据类型介绍

3.3.1 Number

1.进制

  进制包括2进制、8进制（011）、10进制、16进制（0xA）、制等....

2.浮点数

因为精度丢失问题，所以不判断计算后的两个浮点数是否相等。

3.数值范围

       由于内存的限制，ECMAScript 并不能保存世界上所有的数值

最小值：Number.MIN_VALUE，这个值为： 5e-324

最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

无穷大：Infinity

无穷小：-Infinity

4.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

3.3.2 String

1.字面量定义方式

用引号时，可单可双，唯独不可一单一双。可用.length看有几个字符。

var name = "zhangsan";

var name = 'zhangsan';

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

2.转译

总结：无法输出的字符，先输出/，在输出字符。（“、\、换行等....）

3.字符串不可变

    在内存中不会立刻消失，只能二次赋值，原有的字符在一定时间 内被 垃圾回收器回收。

4.字符串拼接

如果两个变量都是字符串，无论是否包含数字，只要是拼接，那么在前一个后面添加后一个字符串。（+与-情况不同，详情参考数据转换）

3.3.3 Booblean

1.Boolean类型有两个字面量：true和false，区分大小写。（大写不对）

虽然Boolean 类型的字面值只有两个，但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值

2.true

true、除0数字、“something”、Object(任何对象)为true

3.false

false、0 、“”、undefined 、null为false

4.if判断时会把（）内的值强行转换成boolean类型进行判断。

3.3.4 undefined和null

null和undefined有最大的相似性。看看null == undefined的结果(true)也就更加能说明这点。但是null ===undefined的结果(false)。不过相似归相似，还是有区别的，就是和数字运算时，10 + null结果为：10；10 + undefined结果为：NaN。

任何数据类型和undefined运算都是NaN;

任何值和null运算，null可看做0运算。

第4章  数据类型转换

一、转换成字符串类型

二、转换成数值类型

三、转换成布尔类型

4.1 任何简单类型转换成String（三种方法）

4.1.1 变量+“”   或者     变量+“abc”

4.1.2 String(变量)

4.1.3 变量.toSting() 注意：undefined和null不可以

Null和undefined无toString方法。

4.2 任何简单类型转换成Number

此转换容易产生NaN，一旦被转换的变量中含有非数字字符，都容易出现NaN

4.2.1 变量-*/一个数字（有非数字字符会出现NaN）

例：var  num1  = “11”- 0;  var num2 =“11”* 1;var num =“11”/1;

JS底层做了一个强制类型转换，把字符串转换成了Number进行运算。

4.2.2 Number(变量)（有非数字字符会出现NaN）

var num1 = Number(“18”); 把字符变成了数字。

var num2 = Number(“18.99”);   结果为18.99数字型。（有小数也转换）

4.2.3 parseInt()和parseFloat()（译为取整和取浮点数）

空字符串parseInt()和parseFloat()返回NaN，Number("")返回0

parseInt(变量)：如果变量中收割字符为字母则结果为NaN。

否则取出现首个非数字前的整数。

123 = parseInt(“123.123aaaa”);

parseFloat(变量)：如果变量中收割字符为字母则结果为NaN。

否则取出现首个非数字前的浮点数。（没有小数取整）

123.123 = parseFloat(“123.123aaaa”);

4.2.4 提别提示

Boolean类型中：true数值为1；false为0；

null的数值类型为0；

undefined无数值类型或者为NaN;

4.3 任何简单类型转换成Boolean

任何数据类型都可以转换成boolean类型，所以和以往两个转换不同；

4.3.1 Boolean(变量)

var bool = Boolean(“1111”); bool为true；

4.3.2 ！！变量

第一个逻辑非操作会基于无论什么操作数返回一个与之相反的布尔值

第二个逻辑非操作则对该布尔值求反

于是就得到了这个值真正对应的布尔值

第5章  操作符

主要研究操作符的种类以及优先级。

案例学习。

5.1 操作符种类

一、算数运算符（+—*/...）

a) 一元运算符：正号、负号、++、--、平方等一个变量就能运算

b) 二元运算符：+-*/%等两个变量才能运算

c) 三元运算符： 值1？值2：值3；

二、逻辑运算符（ ||&& ! ）（或且非）

三、比较运算符（<、>、==、>=...）

四、赋值运算符（=、+=、-=、*=、/=、%=）

5.2 优先级

1 ()

2 !、-（负数）、++、-- （正数省略+）（一元运算）

3 *、/、%

4 +、- （加，减）（二元运算）

5 <、<=、<、>= （一级逻辑运算）       

6 ==、!=、===、!==、 （二级逻辑运算）

7 && （三级级逻辑运算）

8 ||

9?: （三元运算）

10 =、+=、-=、*=、/=、%= （赋值运算）

5.3 &&和||运算

5.3.1 &&链接两个boolean类型，有一个是false结果就是false。

链接值不是布尔类型时，按照成布尔类型计算，结果本身不变。（非布尔）

例子： 1 = 2&&1；   0 = 0 && 1；   都是true取后面，都是false取前面。

5.3.2 ||链接两个boolean类型，有一个是true结果就是true。

链接值不是布尔类型时，按照成布尔类型计算，结果本身不变。（非布尔）

例子： 2= 2||1；   1 = 0 || 1；   都是true取前面，都是false取后面。

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

第6章  流程控制

一、顺序结构（程序正常执行流程从上往下，从左往右）（不用研究）

赋值运算时为从右往左执行，且左侧为属性或变量，不取值！！！

二、选择结构

a) If语句

b) Switch语句

三、循环结构

a) for循环

b) while循环

c) do...while循环

6.1 循序结构

程序正常执行顺序不必过多研究，特殊需求，后续老师特殊讲解。

6.2 选择结构

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

6.2.1 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

6.2.2 Switch语句

switch (值1) {

    case value1:

        程序1；

        break; // break 关键字会导致代码执行流跳出 switch 语句

    case value2:

        程序2；

        break;

    default:

        程序3；

}

注意：

break可以省略，如果省略，代码会继续执行下一个case

switch 语句在比较值时使用的是全等操作符，因此不会发生类型转换

（例如，字符串 "10" 不等于数值 10）。

6.2.3 案例：（可以用if语句实现，下去可以自己练习）

1.判断当天是星期几

2.把百分制转换成优良中可差

6.3 循环结构

共3种，for/while/do...while；可根据需求选择使用；

1．遍历数组首选for循环，简单循环使用for。

2．而while循环强调，不记循环次数（不知道循环多少次），首选while。

3．最后do...while循环强调，无论怎样，至少执行一次是，使用do...while。

6.3.1 for循环

1) 执行流程

for (变量;条件1;条件2){ 执行程序 }

执行过程：变量->条件1->执行程序->条件2->条件1->执行程序.....

直到条件1不成立，跳出循环。

2) 三个表达式均为可选，但是必须写分号！！！

for(;;){程序}   死循环;

3) 案例1

  6个简单案例，用来体验for循环如何使用。（利息和数列提升思维）

4) 案例2

九九乘法表