JavaScript 基础1入门、变量、运算符、表达式、进制

JavaScript 基础1

- 1、什么是javascript？
- 2、JavaScript能做什么？
- 3、JavaScript的历史
- 4、JavaScript入门
- 5、编写JS及如何运行JS
- - 5.1.外联script的写法
  - 5.2.内部script：直接将js脚本写在html页面中，这样的写法要求将js脚本写在script标签中：
  - 5.3.经常性错误示范：
  - 5.4.向页面中输出内容;
  - 5.5.alert
  - 5.6.JavaScript的注释
  - 5.7.JavaScript标签的属性
- 6、变量 VS 常量/字面量/直接量
- - 6.1. 常量
  - 6.2.变量
  - 6.3.变量的命名
  - 6.4.数据类型
  - 6.5.JS是弱引用语言
  - 6.6.编程习惯
  - - 代码压缩
- 7、运算符
- - 7.1.算数运算符
  - 7.2自动数据类型转换（难点，我们后面会多次提及，帮助大家巩固）
  - 7.4.强制数据类型转换
  - 7.5.算数运算补充
- 9、表达式（1、表达式的值 2、表达式的功能）
- 10、赋值运算符
- 11、一元运算符
- 12、关系运算符
- - 12.1.关系运算的规则（1）
  - 12.2.关系运算的规则（2）
  - 12.3关系运算（特殊值）
  - 13.1.逻辑运算的短路操作
  - 13.2. 逻辑运算符（非）
- 14、位运算（了解）
- 15、复习和补充
- - 15.1.运算符优先级
- 16、什么是进制？
- - 16.1.十进制转二进制
  - 16.2.二进制转八进制
  - 16.3.二进制转十六进制
  - 16.4.快捷的进制转换
  - 16.5.进制转换的应用
  - 16.6.进制转换练习

1、什么是javascript？

JavaScript ———— 一个面向对象的跨平台脚本语言。(高级编程语言)
HTML文件必须在浏览器里执行。
JS文件必须嵌入到HTML文件里才能执行。
凡是不能独立执行需要依赖其他程序的，通常都叫做脚本。

1.1.JS和HTML、CSS的关系

如果将我们建设一个网站比作是建设一栋大楼的话。

html 相当于这栋楼的骨架
Css 相当于这栋楼的装修
JavaScript 相当于管理这栋楼的物业，让我们住在这个小区，有更好的入住体验。

2、JavaScript能做什么？

网页特效（漂浮的广告）
用户记住账户名密码
网页游戏(围住神经猫)
……

3、JavaScript的历史

JavaScript 诞生于 1995 年。目的是为了验证表单输入的验证。在 JavaScript问世之前，表单的验证都是通过服务器端验证的。电话拨号上网的年代，服务器验证数据是一件非常痛苦的事情。

1995 年，当时工作在 Netscape(网景)公司的布兰登(Brendan Eich)为解决类似于 “向服务器提交数据之前验证”的问题。在 Netscape Navigator 2.0 与 Sun 公司联手开发一个称之为LiveScript 的脚本语言。为了营销便利，之后更名为 JavaScript。

邪恶的后来者

因为 JavaScript1.0 如此成功，所以微软也决定进军浏览器，发布了 IE3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷），并且也提供了自己的 VBScript。
标准的重要

在微软进入后，有 3 种不同的 JavaScript 版本同时存在：NetscapeNavigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是， JavaScript 并没有一个标准来统一其语法或特性，而这 3 种不同的版本恰恰突出了这个问题。随着业界担心的增加，这个语言标准化显然已经势在必行。

灵敏的微软、迟钝的网景
标准的发展

在接下来的几年里，国际标准化组织及国际电工委员会（ ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。
IE：JScript
LiveScript

浏览器大战后找到ECMA（欧洲计算机制造商协会，其中SUN如日中天）制定标准ECMA Script.

后为了蹭JAVA热度，改名为JavaScript

4、JavaScript入门

编辑工具：写代码的工具

如：dreamweaver，editplus，Notepad++ sublime atom webStrom

运行环境：看结果的地方

如：IE，firefox，chrome。

ECMAScript：是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展
BOM： Browse Object Model，提供与浏览器交互的方法和接口
DOM： Document Object Model，提供访问和操作网页内容的方法和接口

5、编写JS及如何运行JS

JS是一种脚本语言，他可以有两种方式在html页面中进行引入，

其中一种是外联JS，另一种是内部script。

5.1.外联script的写法

<script src="相对路径"></script>//该链接可以放在html页面的任意位置，不用和link标签一样一定放在head部分;

那么相对路径对应的应该为后缀为.js的文件。例如：index.js

alert('hello world');//index.js中的代码

5.2.内部script：直接将js脚本写在html页面中，这样的写法要求将js脚本写在script标签中：

<script>
          alert('hello world') //js脚本
</script>

【注】同样该script标签可以放在html页面任意的位置;但是一般情况下，语法规范要求我们将

5.3.经常性错误示范：

<script src="相对路径">
           alert('hello world')；

5.4.向页面中输出内容;

document.write('这是一些内容');

标签的解析:

document.write('<strong>我似乎强壮了一些</strong>')

转义字符:< || >

&lt; || &gt;
  document.write('<strong>强大的');

5.5.alert

alert()

使用。停止浏览器加载代码。

浏览器解析代码顺序。（从上到下，从左到右）；

5.6.JavaScript的注释

// 单行注释（快捷键：ctrl+/）
多行注释 (快捷键：ctrl+shift+/)

5.7.JavaScript标签的属性

src 表示要引入的外部文件
type 表示脚本语言的类型

【注】text/javascript表示说明这一段脚本语言是JavaScript，告诉浏览器这一段要按照JavaScript来解释执行。不写也可以。

6、变量 VS 常量/字面量/直接量

6.1. 常量

常量/直接量( 字面量 literal)

所有直接量(字面量)，就是程序中直接显示出来的数据

100      //数字字面量
'田雨飞' //字符串字面量
false    //布尔字面量

【注】数据类型: 基本数据类型 (后面还会重复提到)

Number

String

Boolean

复合数据类型

6.2.变量

变量定义/声明：

var age; //var 是关键字，age是变量名
赋值：

age = 20;
定义的同时赋值：

var age = 20；【注】声明/定义变量的同时，赋值，叫做初始化。
可以一次定义多个变量：

var name=“tianyufei", age=18，weight=108;
初值设置为null, 提供程序运行效率

6.3.变量的命名

【注】用户自定义的名字叫做标识符，变量名也是标识符。

JS的标识符：

标识符是指JS中定义的符号，例如：变量名、函数名等。
标识符可以由任意的大小写字母、数字、下划线(_)和美元符($)组成，但是不能以数字开头，不能是js中的保留字、关键字。
标识符区分大小写，如：age和Age是不同的变量。但强烈不建议，用同一个单词的大小写区分两个变量。
见名思意
驼峰式命名

6.4.数据类型

Number：数字（整数，浮点数float）

Array：数组

Object：对象

布尔类型：Boolean a==b

特殊类型：Null、Undefined、NaN

如果alert(abc)一个不存在的变量，会直接报错，而不是undefined，可见undefined和真正的未定义还是有些区别的。因为它是一种特殊类型。

【注】null也是一种值，但逻辑含义是没有值，它是对象Object类型。

【注】typeof关键字

6.5.JS是弱引用语言

弱引用类型：类型可以被更改（但不建议修改变量类型）
js是弱数据类型的语言，容错性较高。

定义时不需要定义类型，赋值赋的是啥类型就是啥类型

var temp；        //temp时啥数据类型？不确定
           temp= 12;                //temp变量是数字类型
           temp = “hello”;   //temp变量变成了字符串类型

怎么运行查看变量的类型

var x=123;
alert(typeof x);

6.6.编程习惯

空空格运算符前后各空一格空格，逗号或者分号后面还有语句，空一格空格。
代码缩进很多地方需要进行代码缩进，好的代码缩进可以帮助我们减少阅读时间，提高开发效率。一个tab键 == 四个空格
分号虽然不加分号在JavaScript语法上没有问题，但是建议不要省略分号，加了分号之后可以用软件压缩。良好的变成习惯（JavaScript权威指南）上的理由。

代码压缩

定义：去掉编写代码时的所有空格、tab、换行
目的：对计算机解析无用
因此：写JS要写分号；

7、运算符

算术运算符（+，-, *,/,%(取余数)）
字符串和变量的拼接(+)

关系运算符

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

逻辑运算符

&&    与(且)、||    或、!    非

赋值运算符a+=10;
```
=、+=、-=、*=、/=、%=
           
```
自增、自减
```
++a, a++
   --a, a--
           
```
a += 1

7.1.算数运算符

JavaScript 基础1入门、变量、运算符、表达式、进制

7.2自动数据类型转换（难点，我们后面会多次提及，帮助大家巩固）

其他数据类型转换为字符串：

var result = “你” + “好”   //结果 你好 类型是string
var result = “1” + 1;                //结果   11 类型是string
var result = “1” + true   //结果   1true 类型是string
var result = “1” + undefined ;   //结果 1undefined  类型是string
var result = “1” + null;                //结果 1null 类型是string

总结：任何类型的数据和字符串类型的数据做相加（+）操作时，其他数据类型会自动的转换为字符串类型。此时的相加**（+）不再是数学意义上的加法，而是表示“拼接”**的意思。

其他数据类型转换为数字：

var result = 1 - “2”;     //结果    1        类型是 number
var result = 1 - “我”;      //结果    NaN        类型是 number

【注】NaN是一个值，这个值的类型是（number）。表现的意思是“不是一个数字”;

2.规则：任何数据除了和字符串做相加运算外，与NaN做算术运算的结果始终都是NaN。包括NaN本身和NaN做运算的结果也是NaN。

字符串是数值会自动的转换为数字，否则会转换为NaN
true会自动的转换为1 false会自动的转换为0

var result = 1 * “1”;      //结果   1    类型是 number
var result = 1 / “1”;      //结果   1    类型是 number

var result = 1 + true;    //结果   2    类型是number
var result = 1 * false; //结果   0    类型是 number

null会自动的转换为0， undefined会自动的转为NaN

var result = 1 + null ;     //结果是1       类型是number
var result = 1 + undefined //结果是NaN        类型是number

3.总结：任何其他数据除了和字符串做相加操作外，与数字类型做算术运算时，其他数据会自动的转换为数字。

其他数据转换布尔：

Boolean(数据);

数字转Boolean

非0数字->true;

0 --> false;

字符串转Boolean

非空字符串(包含空格)-> true;

空字符串 -->false
null和undefined转换Boolean 都是false

7.3.浮点数

认识浮点数：带小数点的数

计算机天生计算小数运算有Bug

7.4.强制数据类型转换

字符串转换数字类型：parseInt()、parseFloat()

parseInt() 是把其它类型转换为整型；

parseFloat() 是把其它类型转换为浮点型（小数)

Number(数据); 数字
```
str1 = '110110'
alert(parseInt(str2,2))           //52
str1 = '64'
alert(parseInt(str2,8))           //52
           
```

认识NaN：他是一种特殊的Number类型结果，代表意外转换的数字，NaN和任何东西都是不等的。

7.5.算数运算补充

【注】当被除数为0的时候。

正数/0 结果为 infinity （无穷大）

负数/0 结果为 -infinity（无穷小）

9、表达式（1、表达式的值 2、表达式的功能）

由运算符和操作数（变量或常量）组成的式子

算术运算符组成的式子叫算术表达式

关系运算符组成的式子叫关系表达式或者条件表达式

逻辑运算符组成的式子叫做逻辑表达式

……

如：2+3；a+5；c>3; a&&b等；100是一个最简单的表达式。

审视表达式分两步

<1>看表达式的功能

<2>看表达式的值

10、赋值运算符

【赋值运算符】

赋值运算符用等于号(=)表示，就是把右边的值赋给左边的变量。
复合赋值运算符通过 x=的形式表示，x 表示算术运算符。

11、一元运算符

【一元运算符】

概念：只能操作一个值的运算符叫做一元运算符。

var age = ++box;     //加后取值 先执行加法运算,在取值
var height = box++; //加前取值 先取值,再执行加法运算

（了解，编程涉及不到）【其他类型应用一元运算符的规则】

var box = '89';
box++;    //90,数值字符自动转换成数值

var box = 'ab';
box++;    //NaN,字符串包含非数值转成NaN

var box = false;
box++;    //1,false转成数值0,累加就是1

var box = 2.3;
box++;    //3.3,直接加1

12、关系运算符

12.1.关系运算的规则（1）

【注】用于进行比较的运算符称作为关系运算符：小于(<)、大于(>)、小于等于(<=)、大于等于(>=)、相等()、不等(!=)、全等(恒等)(=)、不全等(不恒等)(!==)

和其他运算符一样,当关系运算符操作非数值时要遵循一下规则:

1.两个操作数都是数值，则数值比较；

2.两个操作数都是字符串，则比较两个字符串对应的字符编码值；

3.两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较；

12.2.关系运算的规则（2）

在相等和不等的比较上，如果操作数是非数值，则遵循一下规则：

1.一个操作数是布尔值，则比较之前将其转换为数值，false 转成 0，true 转成 1；

2.一个操作数是字符串，则比较之前将其转成为数值再比较

3.一个操作数是 NaN，则==返回 false，!=返回 true；并且 NaN 和自身不等；

4.在全等和全不等的判断上，比如值和类型都相等，才返回 true，否则返回 false

12.3关系运算（特殊值）

JavaScript 基础1入门、变量、运算符、表达式、进制

13.1.逻辑运算的短路操作

逻辑运算符通常用于布尔值的操作，一般和关系运算符配合使用，有三个逻辑运算符：

逻辑与(AND)、
逻辑或(OR)、
逻辑非(NOT)。

逻辑与运算符属于短路操作，顾名思义，如果第一个操作数返回是 false，第二个数不管是 true 还是 false 都返回的 false。
和逻辑与运算符相似，逻辑或运算符也是短路操作。当第一操作数的求值结果为 true，就不会对第二个操作数求值了。

13.2. 逻辑运算符（非）

逻辑非(NOT)：!

**逻辑非运算符可以用于任何值。**无论这个值是什么数据类型，这个运算符都会返回一个布尔值。它的流程是：先将这个值转换成布尔值，然后取反，规则如下：

1.操作数是一个空字符串，返回 true；
2.操作数是一个非空字符串，返回 false；
3.操作数是数值 0，返回 true；
4.操作数是任意非 0 数值(包括 Infinity)，false；
5.操作数是 NaN，返回 true；
6.操作数是 undefined，返回 true；

14、位运算（了解）

【更多的详情】

http://www.w3school.com.cn/js/pro_js_operators_bitwise.asp

应用层开发(面向对象语言)

JavaScript ->C语言->汇编->二进制（机器码）

15、复习和补充

1.字符串运算符

字符串运算符只有一个，即： “+”。它的作用是将两个字符串相加。规则：至少一个操作数是字符串即可。

2.逗号运算符

逗号运算符可以在一条语句中执行多个操作。

15.1.运算符优先级

16、什么是进制？

我们平时所习惯的不过是一种别人规定好的规则而已，比如我们在买东西的时候，一市斤，而英国使用的是磅；
 进制也是我们在数数的时候的一种习惯，我们每个人都有十个手指，我们习惯上使用的数数是十进制。但是对于计算机来说，我们必须使用二进制，那是因为组成计算机的元件，一般只有两种状态   0   1。
 【注】但是二进制对于我们程序员来说阅读不是很方便，也不方便书写，所以有了八进制和十六进制。
       八进制    0~7
       十六进制   0~9 a b c d e f

16.1.十进制转二进制

除二取余法

16.2.二进制转八进制

十进制转八进制，同样可以使用除八取余法。

一般情况下，我们直接使用二进制转八进制。

规则：从右往左数，每三位一组，不足三位的用0补齐，将每一组数转成十进制，这个数就是八进制数。

16.3.二进制转十六进制

十进制转八进制，同样可以使用除十六取余法。

一般情况下，我们直接使用二进制转十六进制。

规则：从右往左数，每四位一组，不足四位的用0补齐，将每一组数转成十进制，这个数就是八进制数。

16.4.快捷的进制转换

进制转换——> 变量/常量.toString(进制数)

var num1 = 072;      //八进制数      58
var num2 = 0xAF;    //十六进制数 175
alert(num1.toString(10));
alert(num2.toString(10)); //将数字转成指定的进制格式。

进制转换——> 将字符串转成十进制

var str = "3a";
alert(parseInt(str, 16)); //第二个参数，指定字符串的进制格式。

16.5.进制转换的应用

基本上使用的几率很小，对编程的帮助不大，了解就好。那为什么还要学习呢？因为了解进制转换，可以帮助我们更加深入理解计算机运行原理。

16.6.进制转换练习

练习:

1.将这些二进制数字10010(2) 1100(2) 10111(2)转成10进制数字

2.转成八进制、十六进制

10010(2) 18 22 12

1100(2) 12 14 c

10111(2) 23 27 17

作业:转成八进制、十六进制

1.将下列10进制数转成二进制

193 49 81 35

11000001 110001 1010001 100011

2.将下列二进制数转成十进制数

100001001 265

11001101 205

17、console.log

JavaScript 基础1入门、变量、运算符、表达式、进制