第一章 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>标签内 写代码

<script>
alert('hello word')
</script>

引入外部 脚本文件

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

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

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

2.2 JavaScript注释

单行注释

// 我是注释

多行注释

/*
多行注释
*/

2.3 指令(语句)结束符

alert('大家好');
alert('大家好');

alert('大家好')
alert('大家好')

2.4 输出内容

document.write('你是不是喜欢我?');  //直接输出到页面
console.log('hello word'); //输出到控制台

2.5 定义变量

//javascript 使用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  

被动产生

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   空运算符

,   逗号运算符

总结

ECMAScript和JavaScript ES6(ES2015)

在HTML中使用 js。 <script></script>

js的基本语法: 注释,指令结束符(;换行) 变量、 输出内容

js程序: 获取页面的元素,元素对的属性。 事件 函数

数据类型: 原始类型 (Number string boolean null undefined) 对象类型(array、object)

运算符: 算术运算符(++ 、--) 比较运算符(== 、===、!=、!==) 、 位运算符、逻辑运算符、赋值运算符、其他(字符串连接符、比较运算符、typeof )

五、流程控制

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 (条件)
  代码

  

 

  

  

  

  

  

  

  

  

   

  

  

  

  

 

  

  

  

猜你喜欢

转载自www.cnblogs.com/chen464863847/p/9449328.html
今日推荐