第一章 JavaScript简单介绍和基础语法

一、谈谈JavaScript

 JavaScript,通常会简称为"JS",是一种浏览器脚本语言

1.1 JavaScript编程语言特点

 javaScript是一种脚本编程语言

 javaScript是一种解释性语言

 javaScript是弱类型语言

 javaScript是事件驱动的语言

 javaScript是一种基于对象的语言

 javaScript具有跨平台性

1.2 JavaScrip应用领域

  WEB前端(页面特效,页面渲染)

  WEB后端(Node.js)

  Hybrid APP(混合APP)

  游戏(Cocos2d.js、Unity3D)

二、JavaScript基本语法

 

2.1 在HTML中使用

在<script>标签内 写代码

1 <script>
2     alert('hello word')
3 </script>

 

引入外部 脚本文件

<script src="./script.js"></script>

 

通过事件属性定义在元素内部

<button onclick="alert('好疼啊')">点我啊</button>

 

2.2 JavaScript注释

单行注释

// 我是注释

多行注释

/*
多行注释
*/

 

2.3 指令(语句)结束符

1 alert('大家好');
2 alert('大家好');
3 
4 alert('大家好')
5 alert('大家好')

 

2.4 输出内容

document.write('你是不是喜欢我?');  //直接输出到页面

console.log('hello word');  //输出到控制台

 

2.5 定义变量

avascript 使用var 关键字定义变量 
var username = 'xiaofeifei'

ES6中新增 let关键字
let userage = 68

 

变量名命名规范:

标识符必须由"数字","字母","_",或者"$"组成,并且不能以数字开头

标识符不能与关键字冲突

严格区分大小写

 

2.6 弹框

alert() 警告框 没有返回值

confirm() 确认框 返回布尔值

promot() 输入框 返回用户输入的内容,点确认。点取消,null

 

2.7 获取页面中的元素 作为js对象

document.getElementById() 返回对象,通常被称为元素对象

元素对象与HTML元素 存在映射关系
元素对象用来描述某个HTML元素
HTML元素的属性,会映射成元素对象的属性

 

2.8 双标签元素里面的内容

eleObj.innerHTML 获取/设置

 

三、JavaScript 数据类型  

 

3.1数据类型 

JavaScript的数据类型分为原始类型和对象类型,这里我们先来了解原始类型

原始类型:

数字 Number,字符串 String,布尔值 Boolean,空 null,未定义 undefind

对象类型:

数组 Array、函数 Funtion、日期 Date、正则 RegExp、错误 Error、对象 Object等

 

3.2 数字 Number

js不区分整型和浮点型

定义:十进制表示、十六进制表示、科学计数法表示

特殊的Number值 NaN

表示Not A Number,类型是Number但又不是常规的数字

和任何值不相等

与任何值运算,结果还是NaN

isNaN()  //函数 判断是否是 NaN

 

3.3 字符串String

声明方式:单引号、双引号、反引号、模板字符串

 

单引号 双引号 没有区别

反引号:

   多行

   可以支持中${变量}添加变量

3.4 布尔值

true
false

 

3.5 Null和undefind  

被动产生

null 表示未定义的对象

undefind 表示"缺少值"

 

3.6 数据类型转换

强制转换

Number()
字符串:纯数字转为正常的数字,其他NaN
布尔值: true->1 false->0

String()


Boolean()
字符串->布尔: 只有空字符串转为false,其他true
数字->布尔: 0和NaN是false,其他true
null和undefined都会转为false

 

3.7 自动转换

根据运算符 做出适当的类型转换

 

四、运算符

 

4.1 算术运算符

+ 加号  正号
- 减法  负号
* 
/ 
% 
++ 累加
-- 累减

 

4.2 比较运算符

>
>=
<
<=
== 相等  两个操作数,只要值相等(类型不同会自动转换)就相等
=== 全等  类型和值都要相同才全等
!= 不等  
!== 不全等
in 判断 数组的索引和对象的属性是否存在
instanceof 一个对象是否属于某个构造函数(类)

 

4.3 逻辑运算符

&& 逻辑与and
|| 逻辑与or
! 逻辑非not

 

4.4 位运算符

&
|
~
^
<<
>>

 

4.5 赋值运算符 

=
+=
-=
*=
/=
%=

 

4.6 其他运算符

+   字符串连接符

?:   比较运算符 表达式?值1:值2

typeof   判断类型

delete   删除对象的属性和数组的成员

void   空运算符

,   逗号运算符

 

五、流程控制

 

5.1条件语句(分支结构)

单向分支

if (条件表达式){
    code...
}

 

双向分支

if (条件表达式){
    code...
} else {

}

 

多向分支

if (条件表达式){

} else if(条件表达式) {

} else if(条件表达式) {

} else {

}

swith(条件表达式){
    case 表达式可能的结果: code... break;
    case 表达式可能的结果: code... break;
    case 表达式可能的结果: code... break;
    default code...
}

 

嵌套分支 

if (条件表达式) {
  if (条件表达式) {

  } else {

} 
} else {
  if (条件表达式) {

  }
}

 

5.2 循环语句  

while 循环 

 while (循环条件) {
  //循环体
 }

do...while 循环

 do {
  //循环体
 } while (循环条件)

for 循环

 for (变量定义;循环条件; 变量变化) {
  //循环体
 }

 

5.3 其他语句  

跳转语句

continue;  跳出当前循环 继续下一次
break;  结束循环
return;  结束函数

异常

  try {

  } catch(err) {

  }


  try {

  } catch(err) {

  } finally {

  }

严格模式

写在所有代码的最前面

开启严格模式

'use strict'

严格模式下 声明不加var会报错
eval()在严格模式不能用

 

5.4 注意 

当分支语句和循环语句 结构体({}内)只有一行代码的时候,可以省略{}
if (条件)
  代码

 

 

  

 

  

  

posted @ 2018-08-10 16:41  每天都要开心的过  阅读(240)  评论(0编辑  收藏  举报