JavaScript基础语法（1）

zoukankan html css js c++ java

JavaScript基础语法（1）
JavaScript介绍

为什么要学JavaScript？
- 网页三部分
  
  html:控制网页的结构
  
  css：控制网页的样式
  
  js：控制网页的逻辑
- 最初的javascript
  
  用于判断客户端的输入（表单校验）
  
  后来一度被用作小广告
- 现在的JavaScript：现在的JS无所不能
  
  异步与服务器交互（AJAX）
  
  网页和特效
  
  服务端开发（nodejs）
  
  命令行工具开发（nodejs）
  
  桌面程序（Electron）
  
  app开发（Cordova）
  
  控制硬件--物联网（Ruff）
  
  游戏开发（cavans, cocos2d-js）
演示：
- Canvas游戏
- 美女相册
什么是JavaScript？

JavaScript是一种运行在浏览器端 的脚本语言 , 现在也可以运行在服务端

不同于HTML和css，JavaScript是一门编程语言，因此要比HTML和css复杂一些，学习的时间也更长。

JavaScript历史
- 1995年，Netscape(网景)公司的Brendan Eich(布兰登·艾奇)（伊利诺伊大学香槟分校），花了10天时间为Netscape Navigator2.0开发了一个位置为LiveScript的脚本程序，目的是在浏览器中执行预检测程序（表单校验）
- 后来Netscape在与Sun合作之后将其改名为JavaScript。目的是为了利用 Java 这个因特网时髦词汇。
- 微软发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）
- 三足鼎立阶段：
  
  CEnvi的scriptEase
  
  Netscape的JavaScript
  
  IE的JScript
- 标准化阶段：1997年，ECMA（欧洲计算机制造商协会）邀请了Netscape、Sun、微软、Borland等公司的一些程序员组成了TC39，最终锤炼出来了ECMA-262，该标准定义了一门全新的脚本语言，名为ECMAScript。
javascript的组成
- ECMAScript - JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
- DOM：一套操作网页元素的API
- BOM：一套操作浏览器功能的API
JavaScript入门

JavaScript书写位置

JavaScript的代码书写分为两种：
- 写在script标签中
```
<script>
  alert('Hello World!');
</script>
```
- 引入一个js文件
```
<script src="main.js"></script>
```
注意：如果script标签指定了src属性，表示引入一个外部的文件，就不能在写javascript代码了

注释

注释代码不会被执行，仅仅起到一个提示的作用。注释可以对复杂的代码进行解释，方便后期的维护和开发。
- 单行注释
```
// 这是单行注释， 单行注释只能写一行代码
//  快捷键： ctrl + /  
```
- 多行注释
```
/*
    这是多行注释，在多行注释中可以
    换行
    快捷键  alt + shift + a
/*
```
【永无bug.js】

在写代码的时候，需要写注释，这是一个良好的习惯

输出语句
- 警告框alert
```
//alert会弹出一个警告框
alert("hello world");
```
- 确认框confirm
```
//confirm弹出一个确定框
confirm("你爱我吗？");
```
- 输入框prompt
```
//prompt:弹出一个输入框，可以输入值
prompt("请输入你的银行卡密码");
```
- 在网页中输入内容
```
//可以识别标签
document.write("hello world");
document.write("<h1>hello world</h1>");
```
- 在控制台输入
```
//F12打开控制台，在console中可以看到打印的信息
console.log("hello word");
```
总结：alert、comfirm、prompt三个用户体验太差，只有在学习的时候会用到。console.log经常用来打印日志，调试的时候非常有用。

变量

变量：可以变化的量。

变量的作用是：存储数据

如何使用变量
- var声明变量
```
var age;
```
- 变量的赋值
```
var age;
age = 18;
```
- 同时声明并且赋值
```
var age = 18;
```
- 同时声明多个变量并赋值
```
var age = 10, name = 'zs';
```
- 不声明变量，直接赋值(不会报错，但是不推荐)
```
age = 18;
console.log(age);
```
- 不声明变量，也不赋值变量，直接使用（会报错）
```
console.log(age);
```
结论：
- 变量需要声明之后，才能使用，养成一个良好的编程习惯。
- javascript代码一旦报错了，后面的代码就不再执行了。
变量的命名规则和规范
- 规则 - 必须遵守的，不遵守会报错
  
  由字母、数字、下划线、$符号组成，不能以数字开头
  
  不能是关键字和保留字，(不用死记，慢慢就见得多了)
  
  区分大小写
- 规范 - 建议遵守的，不遵守不会报错
  
  变量名必须有意义
  
  遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：myName、userPassword
- 下面哪些变量名不合法
  
  a
  1
  age18
  18age
  2b
  name
  $name
  _sex
  &sex
  theworld
  a b
关键字：

保留字:

变量的练习

交换两个变量的值

数据类型

javascript中数据类型分为简单数据类型和复杂数据类型，今天只学简单数据类型

number、string、boolean、undefined、null

number-数字类型

数字： 11 255 333 1024

进制(了解)

在javascript中表示一个数字，除了有我们常用的十进制11, 22,33等，还可以使用八进制、十六进制表示等。

十进制
```
//我们最常用的进制，进行算术运算的时候，八进制和十六进制最终都要转换成十进制
//逢10进1
var num = 9;
var num = 29;
```
八进制
```
// 0开头的数字， 逢8进1
var num1 = 07;
var num2 = 012;
```
十六进制
```
// 0x开头的数字，逢16进1，  数字范围1-9A-F
var num = 0xA;
var num = 0x12;
```
tips:关于二进制，计算机在只认识二进制，所以所有的代码最终都会转换成二进制数据。

浮点数

浮点数就是小数,，比如0.1
- 浮点数
```
var num = 0.1;
```
- 科学计数法
```
//当一次数字很大的时候，可以用科学计数法来表示
var num = 5e5;  //5乘以10的5次方
var num = 3e-3;//3乘以10的-3次方
```
- 浮点数精度丢失问题
```
//在进行浮点数运算的时候，可能会出现精度丢失的问题
0.1 + 0.2 = 0.30000000000000004;
0.2 + 0.2 = 0.4;
//尽量少用浮点数进行运算，不要让浮点数进行比较。
```
数值范围
```
最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity
```
字符串类型

字符串类型，使用双引号 " 或者 ' 包裹起来的字符
```
//双引号和单引号必须成对出现
var str = 'hello world';
var str = "hello world";
```
字符串长度

每一个字符串都有一个length属性，可以获取到字符串中字符串的个数
```
var str = "akdjflksjdflk";
console.log(str.length);
```
转义字符

思考，如何打印?
```
//我是一个"老实"的人
//选择"好看"的外表，还是'有趣'的灵魂
```
字符串拼接
- +号具有字符串拼接功能，它能将两个字符串拼接成一个字符串。
- +号同时具有算术加法的功能，它能将两个数字进行相加
- 如果+号两边有一个是字符串，那么就是拼串的功能，如果都是数字，那么就是算数的功能。
```
var a = "hello";
var b = "itcast";
console.log(a + b);//字符串拼接功能

var a = "100";
var b = 100;
console.log(a + b);//字符串拼接功能

var a = 100;
var b = 100;
console.log(a + b);//加法功能
```
布尔类型

布尔类型：true 和 false
```
//布尔类型只有两个值
true:表示真
false:表示假
```
注意：区分大小写，不要写成True或者是False了

undefined和null
- undefined表示一个没有赋值的变量
- null表示一个空的对象
字面量与变量
- 字面量，也叫直接量，值是固定不变的，浏览器能够直接识别的量，比如11, "abc", true, false, undefined, null等都是字面量，可以直接使用。
- 变量：浏览器必须要经过声明之后，才认识变量，如果没有声明，直接使用变量是会报错的。
操作符

变量可以存储数据，我们还需要学习操作符来操作这些数据

算术运算符
```
//快速的说出以下的结果？
console.log(123 + 123);
console.log("123" + 123);
console.log(123 - 123);
console.log(123 - "123");
console.log(12 * "12");
console.log(12 / 12);
console.log(10 % 2);
```
赋值运算符

赋值运算符有： = , +=, -=, *=, /=, %=
```
var num = 10;
num += 1;   //num = num + 1;
num -= 1;   //num = num - 1;
num *= 2;   //num = num * 2;
num /= 2;   //num = num / 2;
num % = 2;  //num = num % 2;
```
一元运算符

一元运算符：只有一个操作数的运算符

二元运算符：有两个操作数的运算符，比如算术运算符、赋值运算符

自增运算符：++
- 先自增： ++i
- 后自增：i++
```
//先自增：
var num = 1;
console.log(++num); //先自增：表示先加1，后返回值

//后自增：
var num = 1;
console.log(num++);// 后自增：表示先返回值，后+1
```
自减运算符：--
- 先自减：--i
- 后自减：i--
练习：
```
//1. 思考思考
var num = 5;
console.log(num++);
console.log(++num);

//2. 猜猜看
var a = 1; var b = ++a + ++a; console.log(b);    
var a = 1; var b = a++ + ++a; console.log(b);    
var a = 1; var b = a++ + a++; console.log(b);    
var a = 1; var b = ++a + a++; console.log(b);  
```
逻辑运算符
- &&：与运算符，表示且，只有当两个操作数都为true的时候，结果才是true
- ||：或运算符，表示或，只要有其中一个操作数是true,结果就是true
- !：非运算符，取反
```
console.log( true && true );
console.log( false && true );
console.log( true && false );
console.log( false && false );

console.log( true || true );
console.log( false || true );
console.log( true || false );
console.log( false || false );

console.log(!true);
console.log(!false);
```
比较运算符

比较运算符也叫关系运算符， < > >= <= == != === !==，关系运算符的结果是布尔类型
```
var a = 5;
var b = 6;
console.log(a > b);//大于
console.log(a < b);//小于
console.log(a >= b);//大于等于
console.log(a <= b);//小于等于

console.log(a == b); //相等，只比较值，不比较类型
console.log(a === b); //全等，比较类型和值
console.log(a != b); // 不等， 只判断值，不判断类型
console.log(a !== b); // 不全等 判断值，且判断类型
```
运算符优先级
- ()的优先级最高
- 一元运算符(++, --, !)
- 算术运算符（先*/%, 后+-）
- 关系运算符 (先> < >= <=，后== === != !==)
- 逻辑运算符（先&&后||）
不用死记，如果不确定的时候，使用()增加优先级
```
//猜猜看
var result = ((4 >= 6) || ("人" != "狗")) && !(((12 * 2) == 144) && true);
console.log(result);

//蒙一下
var num = 10;
console.log(5 == num / 2 && (2 + 2 * num).toString() === "22");
```
类型转换

查看变量的类型

typeof关键字可以查看数据的类型
```
var num = 11;
console.log(typeof num);
num = "abc";
console.log(typeof num);
```
小技巧：在控制台可以根据颜色来判断数据的类型哦(^__^)

转换成数字类型
- Number()
```
console.log(Number('55'));
Number()可以把任意值转换成数值类型，但是如果字符串中有不是数字的字符，返回NaN
```
- parseInt()
```
var num1 = parseInt("12.3abc");  // 返回12，如果第一个字符是数字会解析直到遇到非数字结束
var num2 = parseInt("abc123");   // 返回NaN，如果第一个字符不是数字或者正负符号就返回NaN
```
- parseFloat()
```
parseFloat()把字符串转换成浮点数
parseFloat()和parseInt()非常相似，不同之处在与
    parseFloat会解析第一个. 遇到第二个.或者非数字结束
    如果解析的内容里只有整数，解析成整数
```
- 算术运算
```
var str = '500';
console.log(+str);      // 取正
console.log(-str);      // 取负
console.log(str - 0);
```
NaN

NaN: not a number, 表示一个number类型的非数字

在js中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，js不会报错，而是会返回一个NaN

NaN的注意事项：
- NaN的类型是number类型的，表示一个非数字
- NaN不等于任何值，包括NaN本身
- 通过isNaN()可以判断一个number类型的值, 是否是一个数字，返回false的时候，表示是一个数字。
```
var num = 5;
console.log(isNaN(5));
```
转换成字符串
- toString()
```
var num = 5;
console.log(num.toString());// 把数值5变成字符串5
//将来所有的数据都会有toString()方法，除了null和undefined
```
- String()
```
var num = 5;
num = String(num);
console.log(num);
```
- 拼串，使用起来最方便
```
var num = 5;
num = num + "";
console.log(num);
```
转换成布尔类型

所有的值都可以转换成布尔类型

其中，""，NaN，undefined，null，0，false这几个值会转换成false，其他值都会转换成true
- Boolean()
```
console.log(Boolean(1));
console.log(Boolean(0));
```
- !!
```
var a = "abc";
console.log(!!a);
```
懦夫从未启程，弱者死在途中
查看全文

相关阅读:
使用 jfinal + beetl + bootstrap 实现商城展示及管理系统
 关于Node.js的__dirname，__filename，process.cwd()，./文件路径的一些坑
 canvas离屏、旋转效果实践——旋转的雪花
 走一步再走一步，揭开co的神秘面纱
 用javascript写一个emoji表情插件
 基于HTML5快速搭建TP-LINK电信拓扑设备面板
 百度地图获取规划路径信息
 devicePixelRatio 那些事儿
 怎样用JavaScript和HTML5 Canvas绘制图表
 首次写iPad布局感想（H5）

原文地址：https://www.cnblogs.com/oliviazhang/p/13567995.html

JavaScript基础语法（1）

JavaScript介绍

为什么要学JavaScript？

什么是JavaScript？

JavaScript历史

javascript的组成

JavaScript入门

JavaScript书写位置

注释

输出语句

变量

如何使用变量

变量的命名规则和规范

变量的练习

数据类型

number-数字类型

进制(了解)

浮点数

数值范围

字符串类型

字符串长度

转义字符

字符串拼接

布尔类型

undefined和null

字面量与变量

操作符

算术运算符

赋值运算符

一元运算符

逻辑运算符

比较运算符

运算符优先级

类型转换

查看变量的类型

转换成数字类型

NaN

转换成字符串

转换成布尔类型