JavaScript基础
目录
- 概念
- js基本语法
- js和html的结合方式
- js注释
- js数据类型
- js变量
- js运算符
- js流程控制语句
- js基本对象
- String对象
- Function对象
- Array对象
- Data对象
- Math对象
- RegExp对象
- Global对象
概念
JavaScript
是一门客户端脚本语言.- 运行在客户端
浏览器
中,每个浏览器都有JavaScript的解析引擎 脚本语言:
不需要变编译,直接就可以被浏览器解析执行- 功能
JavaScript可以增强用户和html页面的交互过程,可以来控制html元素,让界面有一些动态效果,增强用户体验.
- JavaScript =
ECMAScript
+ JavaScript特有的(BOM+DOM
)
js基本语法
js和html的结合方式
- 内部js
定义<script>,标签内容就是js代码 - 外部js
定义<script>,通过src属性引入外部的js文件
注意:
- <script>可以定义在html页面的任何地方,但是定义的位置会影响执行顺序.
- <script>可以定义多个.
js注释
- 单行注释: //
- 多行注释: /* */
js数据类型
- 原始数据类型(基本数据类型)
- number:数字.
整数/小数/NaN
(not a number 一个不是数字的数字类型) - string: 字符串。 字符串 “abc” “a” ‘abc’,
'abc'和"abc"都是字符串
- boolean: true和false
- null: 一个对象为空的占位符
- undefined:
未定义
。如果一个变量没有给初始化值则会被默认赋值为undefined
- number:数字.
- 引用数据类型: 对象
js变量
- 变量
存储数据的内存空间.
- Java语言是强类型语言,而JavaScript是弱类型语言。
强类型:
在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型
的数据弱类型:
在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型
的数据。
- 语法
var 变量名 = 初始化值;
- typeof() 运算符
获取变量的类型.
js运算符
- 一元运算符: 只有一个运算数的运算符
- ++, - -的区别(和Java相同不说了)
- +, - 正负号
注意:
在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换.
- string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
- boolean转number:true转为1,false转为0
- 算术运算符
- 赋值运算符
- 比较运算符
- 类型相同: 直接比较
*字符串: 按照字典顺序别叫,按位逐一比较,直到得出大小为止。 - 类型不同: 先进行类型转换,再比较
*===
:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
- 逻辑运算符
1. number:0或NaN为假,其他为真
2. string:除了空字符串(""),其他都是true
3. null&undefined:都是false
4. 对象:所有对象都为true - 三元运算符
表达式 ? 值1 : 值2;
js流程控制语句
- if … else
- switch
<script>
var a;
switch (a){
case 1:
alert("number");
break;
case "abc":
alert("string");
break;
case true:
alert("true");
break;
case null:
alert("null");
break;
case undefined:
alert("undefined");
break;
}
</script>
注意:
* 在Java中switch可以接受的数据类型: byte int shor char,枚举(1.5) ,String(1.7)
* 在JS中,switch语句可以接受任意的原始数据类型
- while
<script>
//1 ~ 100 求和 5050
var sum = 0;
var num = 1;
while (num <= 100) {
sum += num;
num++;
}
alert(sum);
</script>
- do … while
- for
<script>
//1 ~ 100 求和 5050
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
alert(sum);
</script>
js对象
String对象
- 创建
- var str = new String(“abc”)
- var str = “abc”
- 方法
bold()
: 加粗字符串fontcolor("red")
: 给字符串添加颜色fontsize(7)
: 给字符串设置大小 1-7从小到大link("https://www.baidu.com")
: 给一个字符串添加一个链接concat(str)
: 连接字符串charAt()
: 返回指定位置的字符串indexof()
: 检索字符串,返回位置,不存在返回-1
注意:
这里列举了一些常用方法,其他方法可以查文档 :https://www.w3school.com.cn/jsref/jsref_obj_string.asp
- 属性
length
: 返回字符串的长度.
Function函数(方法)对象
- 创建
方式一
方式二function 方法名称(形式参数列表){ 方法体... }
var 方法名 = function(形式参数列表){ 方法体... }
- 属性
length
: 返回该方法对象的参数个数. - 特点
- 方法定义是,形参的类型不用写,返回值类型也不写。
- 方法是一个对象,如果定义名称相同的方法,会覆盖
- 在JS中,方法的调用只与
方法的名称
有关,和参数列表无关 - 在方法声明中有一个隐藏的内置对象(数组),
arguments
,封装所有的实际参数,也就是说我们传递的参数都会被封装到arguments中
-
调用
方法名称(实际参数列表).
-
Demo
/** * 求任意个数的和 */ function add (){ var sum = 0; for (var i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } var sum = add(1,2,3,4); alert(sum);
-
js的函数重载问题
-
什么是重载? 方法名相同, 参数不同
-
js重载是否存在?
- js中不存在重载
- 可以通过arguments数组来模拟重载.
注意:
说白了,这就和Java中的语法糖 可变参数
有异曲同工之妙.
Array对象
-
创建
方式一var arr = new Array(元素列表);
方式二
var arr = new Array(默认长度);
方式三
var arr = [元素列表];
-
方法
concat()
连接两个或更多的数组,并返回结果。join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。pop()
删除并返回数组的最后一个元素push()
向数组的末尾添加一个或更多元素,并返回新的长度。reverse()
颠倒数组中元素的顺序。
- 属性
length
: 返回数组的长度 - 特点
- 在js中, 数组元素的类型可以是不同的
- 在js中, 数组长度是可变的
Data对象
- 创建
var date = new Date()
- 常见方法
toLocaleString()
:返回当前date对象对应的时间本地字符串格式getTime()
:获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
Math对象
- 创建
特点:Math对象不用创建,直接使用。 Math.方法名();
- 方法
random()
:返回 0 ~ 1 之间的随机数。 含0不含1ceil(x)
:对数进行上舍入。floor(x)
:对数进行下舍入。round(x)
:把数四舍五入为最接近的整数。
- 属性
PI
: 返回圆周率
E
: 返回常量e - Demo
/** * 取 1~100之间的随机整数 * 1. Math.random()产生随机数:范围 [0,1)小数 * 2. 乘以 100 --> [0,100) 小数 * 3. 舍弃小数部分 :floor --> [0,100) 整数 * 4. +1 -->[0,99] 整数 [1,100] */ var number = Math.floor((Math.random() * 100)) + 1; document.write(number);
- 相关文档: https://www.w3school.com.cn/jsref/jsref_obj_math.asp
RegExp对象
RegExp对象表示正则表达式,它是对字符串执行模式匹配的强大工具。
- 定义字符串的组成规则
- 单个字符:[], [ab]表示a或b中的一个, [a-zA-Z0-9] 表示a-z或A-Z或0-9中的一个字符
如: [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次 - 开始结束符号
* ^:开始
* $:结束
- 创建
方式一
方式二var reg = new RegExp("正则表达式");
var reg = /正则表达式/;
- 方法
test(参数)
: 验证指定的字符串是否符合正则定义的规范 - 相关文档 https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
Global对象
特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。 方法名();
- 方法
encodeURI()
:url编码decodeURI()
:url解码encodeURIComponent()
:url编码,编码的字符更多decodeURIComponent()
:url解码parseInt()
:将字符串转为数字
逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为numbereval()
:讲 JavaScript 字符串,并把它作为脚本代码来执行。
- URL编码
白骆驼–%E2%A1%82%E6%9C%9D%E9%98%B3
注意:
这里使用URL编码,在UTF-8编码下,一个中文字符是占3个字节,在GBK下是占2个字节,这里一个%
表示一个字节,一个字节有8bit,每4个bit转为十六进制
,所以就显示出上面的编码. - 相关文档 https://www.w3school.com.cn/jsref/jsref_obj_global.asp