javaScript学习(一)
-
-
JS的基本使用
一、什么是JavaScript?
1.1 概念
JavaScript是一门客户端脚本语言,不需要编译就可以被浏览器解析执行了。
-
运行在浏览器中的。每一个浏览器都有JavaScript的解析引擎
-
脚本语言:不需要编译,直接就可以被浏览器解析执行了
什么是脚本语言?
java源代码 ----> 编译成.class文件 -----> java虚拟机中才能执行
脚本语言: 源码 -------- > 解释执行
1.2 JS的特征
- 解释执行。
- 基于对象:有一些内置对象可直接使用,不完全符合面向对象的三大特征。
- 弱类型: 变量、函数中都不出现数据类型的声明。
1.3 作用
可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。
三句话:
HTML: 决定了页面的框架
CSS: 用来美化我们的页面
JS: 提供用户的交互的
二、JS的基本使用
2.1 JS的组成
ECMAScript : 核心部分 ,定义js的语法规范
DOM: document Object Model 文档对象模型 , 主要是用来管理页面的
BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高
2.2 JS的语法(通用)
-
变量弱类型: var i = true;
-
区分大小写
-
语句结束之后的分号 ,可以有,也可以没有(不建议)
-
写在script标签内
tip:
Java语言是强类型语言,而JavaScript是弱类型语言。
强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
2.3 基本语法详解(ECMAScript )
2.3.1 JS与HTML的结合方式
1. 内部JS: * 定义<script>,标签体内容就是js代码 2. 外部JS: * 定义<script>,通过src属性引入外部的js文件
tip:
1.<script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
2. <script>可以定义多个。
1. 单行注释://注释内容 2. 多行注释:/*注释内容*/
2.3.3 JS的数据类型
-
原始数据类型(基本数据类型)
-
number:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
-
string:字符串。 字符串 "abc" "a" 'abc'
-
boolean: true和false
-
null:一个对象为空的占位符
-
undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
-
-
引用数据类型:对象
-
JS的变量是弱类型,其语法如下:
var 变量名 = 初始化值;
-
typeof运算符:获取变量的类型。
-
注:null运算后得到的是object
2.3.5 运算符
-
一元运算符:只有一个运算数的运算符:++,-- , +,-(正负号)
-
++ --: 自增(自减)
-
++(--) 在前,先自增(自减),再运算
-
-
-
注意:
在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
其他类型转number:
string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
boolean转number:true转为1,false转为0
-
-
赋值运算符:=、+=...
-
比较运算符
'>、 <、 >=、 <= 、== ===(全等于)'
-
"===" 全等号: 值和类型都必须相等
-
== 值相等就可以了
-
比较方式
-
类型相同:直接比较
-
字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。
-
-
类型不同:先进行类型转换,再比较
-
===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
-
-
-
-
逻辑运算符:&&、 ||、 !
-
其他类型转boolean
-
number:0或NaN为假,其他为真
-
string:除了空字符串(""),其他都是true
-
null与undefined:都是false
-
对象:所有对象都为true
-
-
-
三元运算符
* 表达式? 值1:值2; * 判断表达式的值,如果是true则取值1,如果是false则取值2; 例句: var a = 3; var b = 4; var c = a > b ? 1:0;
2.3.6 流程控制语句
-
if...else...
-
while
-
do...while
-
for
-
switch
* 在java中,switch语句可以接受的数据类型: byte int shor char,枚举(1.5) ,String(1.7) switch(变量): case 值:... break; case 值:... break; default:...; * 在JS中,switch语句可以接受任意的原始数据类型
2.4 基本对象(ECMAScript)
2.4.1 function:函数对象
创建
1. function 方法名称(形式参数列表){ 方法体 } 2. var 方法名 = function(形式参数列表){ 方法体 }
属性
-
length:代表形参的个数
方法名称(实际参数列表);
特点
-
方法定义时,形参的类型不用写,返回值类型也不写。
-
方法是一个对象,如果定义名称相同的方法,会覆盖
-
在JS中,方法的调用只与方法的名称有关,和参数列表无关
-
在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
2.3.2 Array:数组对象
创建
1. var arr = new Array(元素列表); 2. var arr = new Array(默认长度); 3. var arr = [元素列表];
方法
-
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
-
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
属性
-
length:数组的长度
特点
-
JS中,数组元素的类型可变的。
-
JS中,数组长度可变的。
2.3.3 Boolean对象
-
其他类型转boolean
-
number:0或NaN为假,其他为真
-
string:除了空字符串(""),其他都是true
-
null与undefined:都是false
-
对象:所有对象都为true
var date = new Date();
方法
-
toLocaleString():返回当前date对象对应的时间本地字符串格式
-
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
2.3.5 Math:数学对象
创建
-
特点:Math对象不用创建,直接使用。 Math.方法名();
常用方法
-
random():返回 0 ~ 1 之间的随机数。 含0不含1。
-
ceil(x):对数进行上舍入。
-
floor(x):对数进行下舍入。
-
round(x):把数四舍五入为最接近的整数。
-
PI
2.3.6 Number对象
其他类型转number:
-
string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
-
boolean转number:true转为1,false转为0
2.3.7 RegExp:正则表达式对象
1. 什么是正则表达式?
正则表达式:定义字符串的组成规则。
-
单个字符:[]
如:[a] [ab] [a-zA-Z0-9_]
-
特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9] \w:单个单词字符[a-zA-Z0-9_]
-
-
量词符号:
-
?:表示出现0次或1次
-
*:表示出现0次或多次
-
+:出现1次或多次
-
{m,n}:表示 m<= 数量 <= n
-
m如果缺省: {,n}:最多n次
-
n如果缺省:{m,} 最少m次
-
-
-
开始结束符号
-
^:开始
-
$:结束
-
2.正则对象
-
创建
-
var reg = new RegExp("正则表达式");
-
var reg = /正则表达式/;
-
-
方法
-
test(参数):验证指定的字符串是否符合正则定义的规范
-
3. 常用的正则表达式
-
- 全文搜索:var reg = /[A-Z]/g;
- 忽略大小写:var reg = /o/gi;
- 多行查找:var reg = /Hello$/m;
4.字符说明
- /^[a-z]/:^表示以[a-z]中的任意一个字母开始。
- /[^a-z]/:此时^表示字符串中不能包含 [a-z] 中的任意一个字母。
2.3.8 Global:全局对象
1.特点
Global全局对象,这个Global中封装的方法不需要对象就可以直接调用。 方法名();
2. 方法
-
只针对文本编码、解码
-
encodeURI():url编码
-
decodeURI():url解码
-
-
针对文本和特殊字符的编码
-
encodeURIComponent():url编码,编码的字符更多
-
decodeURIComponent():url解码
-
-
parseInt():将字符串转为数字
-
逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
-
-
isNaN():判断一个值是否是NaN
-
NaN六亲不认,连自己都不认。NaN参与的==比较全部为false
-
-
eval():将 JavaScript 字符串,并把它作为脚本代码来执行。