JavaScript
一、JavaScript简介
1.什么是javascript
javascript简称js,由网景公司开发的客户端脚本
语言,不需要编译,可以直接运行
web前端三层:
- 结构层 HTML,定义页面的结构
- 样式层 CSS,定义页面的样式
- 行为层 JavaScript,实现交互,进而提升用户的体验
2.JavaScript作用
- 在客户端浏览器上动态的操作页面
- 在客户端浏览器上做数据的校验
- 在客户端上发送异步请求
二、引用方式
1.内联方式
在页面中使用script标签,在script标签中编写js代码
script可以放在页面的任意位置,一般放在头部
<script>
alert("hello javascript");
</script>
2.行内方式
在普通标签中去编写js代码,一般需要结合事件的属性,如onclick onmouseover等
事件属性—> 面向对象
eg: 对象— 外观修饰–css
行为、事件—某一事件发生的对象不一样,所引发的反应也不一样—对象的多态性
<!--2.行内方式-->
<input type="button" value="点我" onclick=alert("我被点了")>
<!--<a href="" onclick="alert('超链接被触发了')">超链接</a>-->
<a href="javascript:alert('超链接被触发了')">超链接</a>
<div onmouseover="alert('走开')">把鼠标移上来</div>
3.外部方式
使用单独的.js文件定义,然后在页面中使用script标签引入外部脚本文件
<script type="text/javascript" src="js/hello.js"</script>
注意:如果某个scirpt标签用于引入外部文件,则该script标签的标签体中不能再写js代码
三、基本语法
1.变量
变量是用来存储常量的量
常量就是固定值—常数项
js是一门弱类型的语言,声明变量时使用var关键字,不需要指定变量的类型
语法: var
变量名=常量或者表达式;
在ECMAscript 6规范当中新增let关键字,可以声明变量
使用let
来声明的变量支持块级作用域,而使用var来声明的变量不支持块级作用域
注:在IDEA中配置ES版本:settings—>language&frameworks—> javascript language version
变量的命名规则:
1)由字母、数字、下划线、汉字组成
2)由字母、下划线开头
3)不能和系统关键字重名
4)区分大小写
2.输入和输出
输出:
- alert()弹出警告框
- console.log()输出到浏览器的控制台
- doucement.write()输出到页面
输入:
-
prompt()弹出一个输入框,获取用户输入的信息或者数据
使用typeof 变量 判断变量的类型
使用Number(变量),将字符串转换为数值
3.转义字符
常用转义符:
- \n 换行
- \t 缩进
- " 双引号
- ’ 单引号
- \ \ 斜杠
4.注释
单行 //
多行 /* */
5.编码规范
代码是区分大小写
每个语句以分号结尾
代码注意缩进
四、核心语法
1.数据类型
常量:具体值,不变的量 —常数项
变量:变化的值,存储常量的值
基础数据类型:
- string字符串
- number数值(返回NaN表示非数字 not a number,其自身是number,表示数值的不正常状态)
- boolean布尔
- null空
- undefined 未定义类型
类型转换:
-
转换number
使用Number()、parseInt()、parsefloat()
-
转换为字符串
拼接一个空字符串
-
转换为Boolean
使用Boolean()
注意: 0、空字符串、null、undefined、NaN都会被转换为false,其它值会被转换为ture
2.运算符
算术运算符: + - * / % ** ++ –
关系运算符: > < >= <= == === !=
赋值运算符: = += -= *= /= %=
逻辑运算符: && || !
条件运算符: 条件?表达式1:表达式2
3.选择结构
if else switch
4.循环结构
while do while for
break continue
break 退出整个循环
continue 结束本次循环,返回到条件判断处,继续进行下次循环
var str = 'welcome';
for(var index in str)
{
console.log(index); // 输出了str的索引
console.log(str[index]);
}
####5.数组
5.1定义方法
语法:
var arr = new Array();
var arr = new Array(值1,值2,...);
var arr = [值1,值2...]
- 数组的个数会自动扩展
- 数组中元素的默认止为undefined
- 使用length属性
5.2常用方法
方法 | 描述 |
---|---|
sort() | 排序,默认按字符编码进行升序,非string类型会自动转换为string,可自定义比较规则 |
reverse | 反转,将数组元素倒序排列 |
join | 将数组中的元素使用指定的分隔符连成字符串,默认通过逗号分隔 |
indexof() | 返回指定元素在数组中首次出现的位置 |
slice(begin,end) | 截取数组中索引从begin到end之间的元素,左闭右开,如果省略第二个参数,直接到末尾 |
toString | 将数组转换为字符串 |
5.3 二维数组
二维数组可看为特殊的一维数组,即一维数组的每个元素又是一个一维数组
var arr = new Array();//定了具有m行元素的特殊的一维数组
arr[0] = new Array();//第0行有n个元素
arr[1] = new Array();//第1行有n个元素
arr[][]=值;
var arr = [
[值1,值2...],
[值1,值2...],
...
]
6.函数
6.1 自定义函数
语法:
function 函数名(参数1,参数2,...)
{
函数体;
}
注意:
- 定义函数时,不需要指定参数的类型
- 实参的个数和形参的个数可以不同,未指定实际参数时其形参的默认止为undefined
- 不需要指定返回值的类型,如果有返回值,直接使用return返回即可
- 如果函数中没有return返回值,则默认返回undefined
变量的作用域:
-
局部作用域
在函数中声明的变量,只能在该函数内访问,函数运行结束,变量自动销毁
-
全局作用域
在函数外声明的变量,在任何位置都可以访问
-
块级作用域
使用let关键字,只能在声明他的代码块中访问
6.2回调函数
不立即执行的函数调用,满足一定条件下才会进行,或者由别的代码调用执行,称为callback
调用时致谢函数名,没有小括号和参数
应用场景:
- 作为事件绑定的函数
- 作为另一个函数的参数
6.3匿名函数
没有名字的函数,称为匿名函数,一般用于回调
应用场景:
-
用于函数的回调
window.onclick = function () { console.log('111'); };
-
用于一次性执行的函数,会自动执行,称为自执行函数
(function () { console.log('333'); })();
6.4箭头函数
ES6中允许使用箭头 =>
定义函数,称为箭头函数,也叫lambda表达式,是一种特殊的匿名函数
var c = (x,y) => {
var sum = x+y;
return sum;
};
五、符合类型
1.string
1.1定义方式
语法:
var str = 'welcome to JS!'; //基本数据类型
var str = new String('welcome'); //引用数据类型
使用length属性获取字符串的长度
1.2常用方法
方法名 | 说明 |
---|---|
charAt() | 返回在指定索引位置的字符,也可以使用[索引]的方式 |
indexOf() | 返回某个指定的字符串在字符串当中首次出现的位置 |
lastindexOf() | 返回某个指定的字符串在字符串当中最后出现的位置 |
toLowerCase() | 将字符串转换为小写 |
toUpperCase() | 将字符串转换为大写 |
subString() | 提取字符串中两个指定索引号之间的字符串,左闭右开 |
repalce() | 将指定的字符串替换成新字符串 |
solit() | 把指定的字符串分割为字符串数组 |
trim() | 去除字符串前后空格 |
2.Date
2.1定义方式
语法:
var date = new Date(); //定义一个日期对象,表示当前时间
var date = new Date(year,month,day,hour,minute,second);//参数为指定的年月日时分秒
var date = new Date(millsSecond); //参数为当前时间与1970-1-1相差的毫秒数
2.2常用方法
方法名 | 说明 |
---|---|
getFullYear | 以四位数字返回年份 |
getMonth() | 返回月份[0,11],0表示1月 |
getDate() | 返回一个月中的某一天(1-31) |
getHours() | 返回小时[0,23] |
getMinutes() | 返回分钟[0,59] |
getSeconds() | 返回秒数[0,59] |
getmilliseconds() | 返回毫秒[0,999] |
getDay() | 返回一周中的某一天[0,6] 0表示周日 |
getTime() | 返回从1970-1-1 0:0:0至今的毫秒数 |
setXxx方法与getXxx方法一样
3.JSON
3.1JSON简介
javascript object notation 是一种轻量级的数据交换格式,用于表示javascript对象的一种方式
采用与编程语言无关的文本格式,易与阅读和编写,同时也易于解析和生成
3.2基本用法
语法:{"属性名":"属性值","属性名":"属性值",...}
注意:
- json结构是由一系列的键值对所组成的,称为JSON对象
- 属性名必须用双引号括起来
使用:
- 简单的JSON对象
- 复合属性&#x