什么是JavaScript
是css的行为层,是一种脚本型语言 Java和JavaScript没关系
jQuery
js的一个库
Angular
模块化开发
Vue
渐进式的JavaScript框架,可以模块化开发 也可以DOM
入门
引入javaScript
script标签内写代码,可以像css一样独立出去
<!--标签内在head中-->
<script>
// 弹窗
alert("aaaaaa")
</script>
<!--必须成对出现-->
<script src="js/wpx.js"> </script>
<!--外部引入-->
浏览器控制台使用
var score = 1;基本语法
console.log(score) 控制台打印
数据类型区别
数值,文本,图形,音频,视频…
number
js不区分小数和整数, 打印nan not a number
区别
=== 绝对等于 ,必须要类型一样 值一样为真
浮点数
尽量避免使用浮点数运算,有精度损失
null 和 undefined 一个为空,一个未定义
数组方面的不同
中括号括起来
var arr = [1,2,3,4,5,“asd”,null,ture]
java中只能存储相同类型的,js不需要,去数组下表如果越界了会报出undefined
对象
大括号括起来,逗号隔开
var person ={}
var person ={
name: "wpx",
age : 13,
targe: ["java","js","c++"]
}
严格检查模式
**‘use strict’**必须写在javascript 的第一行
es6 中,局部变量用let定义,用var定义会标黄
字符串类型
-
正常字符串使用 波浪键 的引号 或者双引号包裹
-
字符串包裹内输出特殊符号需要转义字符\
\' 字符串 \n 换行 \t tab \u#### unicode 字符 "\x41" Ascll字符
'use strict'
//多行字符串输入
let msg=`
哈哈
你好
wpx
欢迎
`
//模板字符串
//eL表达式 直接引用
let name = "wpx";
let age = 13;
let sex = "男";
let msg1 = `你好, ${name}`//用esc下面的那个键`
字符串长度
str.length
转换大小写,一定要通过方法转换
str.toUpperCase()
str.toLowerCase()
str.length 长度
console.log(student.type.indexOf('t')) 获取字符串位置
console.log(student.type.substring(1)) 截取第一个到最后
console.log(student.type.substring(1,3))截取作开右闭区间字符串
数组类型
Array可以包含任意数据类型的数组
var arr = [1,2,3,4,5,6]
arr.length = 10//js数组可以变换长度,如果赋值低于现在元素个数,元素会丢失
10
console.log(arr.length)
10
console.log(arr)
(10) [1, 2, 3, 4, 5, 6, empty × 4]
-
注意,字符串的"1"和数字的一不同,如果通过indexOf查找,不同类型的结果不同
-
slice() 截取Array的一部分,类似于String中的subString
-
push() pop() ,push()能在最后添加元素,pop()能弹出元素
-
unshift(), shift() unshift(),压入头部,shift()弹出头部
-
排序,从小到大用 arr.sort();
-
元素反转 arr.reverse()
-
元素拼接 arr.concat() 拼接后返回一个新的数组,没有修改数组
arr1 = arr.concat(1,2,3) (13) [1, 2, 3, 4, 5, 6, empty × 4, 1, 2, 3] console.log(arr1) (13) [1, 2, 3, 4, 5, 6, empty × 4, 1, 2, 3] console.log(arr) (10) [1, 2, 3, 4, 5, 6, empty × 4]
对象
创建
若干个键值对
let person = {
name: "wpx",
age: 13,
targe: ["java", "js", "c++"]
};//定义了一个person对象,有四个属性
特性
JavaScript中的所有的键都是字符串,值是任意对象
- 使用不存在的属性,不会报错只是undefined
- 能通过 delete person.name 格式动态删除属性
- 动态添加属性 格式 person.haha= “哈哈” 直接给新的属性添加至即可
- 判断属性值是否在这个对象中 ‘xxx’ in xxx
'age' in person
ture
'toString' in person
ture
-
4中的方法不太严谨,因为js也有继承,所以也能用
person.hasOwnProperty(age )
流程控制
- if 判断 和Java基本一样
- while
var age2 = 1;
while (age2< 100){
age2++;
console.log(age2);
}
- for循环
for (let i = 0; i < 100; i++) {
console.log(i)
}
- forin
var age= [12,13,415,453,35,1,35,4,35]
for (let ageKey in age) {//agekey是一个索引,然后可以通过数组下标输出出来
console.log(age[ageKey])
}
-
foreach
-
age.forEach(function (value,index,array) { console.log(value);//输出属性 console.log(index);//输出地址 // console.log(array); });
Map Set集合
set不可重复,自动过滤重复的值
var map = new Map([["tom",70],["jerry",15]]);
var name =map.get("tom");
console.log(name);//查map 是kv键值对,.get方法能通过key获得value1
map.set('',) 增加
map.delete('k');删除
var set = new Set(1,2,3,4,1)//set不可重复
set.add();
set.delete();
set.has();是否包含某个元素
iterator迭代器
专门对set,map进行迭代遍历
forof
遍历集合不能用forin 要用forof
for (let mapElement of map) {
console.log(mapElement)
}
函数
函数和java中的方法类似
定义函数
一旦执行到return 代表方法结束,返回结果. 如果没有return函数,则返回undfind
var abs = function(x){
}
var function abs(x){
} 效果相等
function(x){…} 执行流程为匿名函数返回函数名 ,然后通过函数名调用
一个参数
简单绝对值函数,需要注意所有的函数在不传参的情况下都不会主动报错,需要在编写逻辑的时候进行手动的报错,typeof 关键字判断类型
function abs(x){
if (typeof x != 'number'){
throw 'not a number'
}else if (x>0){
return x;
}else {
return -x;
}
}
多个参数
arguments关键字
arguments代表所有传递进来的数组
问题,arguments 会包含所有的参数,想用多余的参数进行操作时,需要排除已有的参数
function IncomeParameters(a,b){
console.log("a-->"+a);
console.log("b-->"+b);
for (let i = 2; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
es6新特性
rest 获取除了已定义参数以外的参数
使用方法
function Income2(a,b,...rest){
console.log("a-->"+a);
console.log("b-->"+b);
console.log(rest);
}
使用rest输出结果
a–>1
64 b–>2
(6) [3, 35, 54, 646, 4, 6]
0: 3
1: 35
2: 54
3: 646
4: 4
5: 6
length: 6__proto__: Array(0)
变量作用域
局部函数
简单的 {}里定义的只能在里面用,如果想用,需要闭包
参考java定义的作用域,内部函数可以访问外部函数的成员
内部函数的变量和外部函数的变量重名
内部函数会由内向外查找,假设外部存在同名的,则内部函数会屏蔽同名的外部变量
javascript所有的变量定义都要放在函数的头部
全局变量
全局变量写在所有的方法外面,所有的全局函数默认绑定在window下面,alert也是一个全局变量,使用 var 函数名=window.aleat覆盖他可以使他失效
规范
由于所有的全局变量都会绑定到windows上,如果不同的js,使用相同的全局变量,就会冲突
解决方法
自己定义一个对象,对象里面为全局变量
'use strict'
var wpxapp = {};
wpxapp.name='wpx';
wpxapp.a=1;
function a(){
console.log( wpxapp.a)//使用这种方法调用也有全局变量的效果,并且减少冲突,后面的jQuery,也用了这种方法,jQuery=$符号
}
let 关键字 es6新特性
解决局部作用域冲突的问题,所以一般定义局部建议用let定义
常量****const
const 定义的不可改变
apply
可以控制this的指向,一般来说this执行当前执行的,apply能修改this指向
使用方法
方法1.apply( 方法2,[ 参数 ] );
此时方法一的this 指向方法2
内部对象
Date
var now = new Date();
console.log(now.getDate());//日
console.log(now.getDay())//星期
console.log(now.getHours())//小时
console.log(now.getMonth())//月
console.log(now.getSeconds())//秒
console.log(now.getMinutes())//分
console.log(now.getTime())//时间戳
console.log(new Date(now.getTime()))//标准时间
now.toLocaleString();//显示本地时间
JSON对象
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
层次结构
json字符串能解析成js对象,js对象能转化成json字符串,在SpringMVC中,能同过后端传输一个json字符串,然后在前端进行解析使用.
JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。
如
var` `obj = {a: ``'Hello'``, b: ``'World'``}; ``//这是一个对象,注意键名也是可以使用引号包裹的
var` `json = ``'{"a": "Hello", "b": "World"}'``; ``//这是一个 JSON 字符串,本质是一个字符串
面向对象编程
什么是js的面向对象
js,java,C# 都是面向对象的,js和Java有一些区别
Java中
类:模板
对象:具体的实例
js 中面向原型继承,面向class继承
java 中是实例化类和调用方法,js中一种方法是是继承原型,然后可以使用原型的函数
__psoto__//继承原型的方法
js的构造器
constructor 构造器
原型链
每个构造函数都有一个原型函数,用–photo–指向,最后指向Object,Object指向自己
JavaScript和浏览器关系?
JavaScript诞生就是为了能够让他在浏览器中运行!
BOM :浏览器对象模型
浏览器内核
IE 6~11
Chorm
Safari 苹果
FireFox linux用的较多
Opera 使用较少
window代表浏览器窗口
在开发中,可以检测浏览器是否适用,大多数中不会使用这种对象,因为可以修改,不建议使用这个方式,
screen.width //获得宽度
screen.height//获得屏幕高度
location当前页面url信息
host:主机
href:地址
reload:f reload 刷新网页
//设置新的地址
location.assign('http://www.360.com')
document当前页面
document.title //获得标题
document.title = '' // 修改标题
可以通过控制台获得 html 中的各种id
劫持cookie原理
<script src="某不安全js文件"><script> 大部分浏览器没有屏蔽这个标签,如果植入了js文件,可能通过Ajax进行跳转获得cookie上传到他的服务器,
服务器端可以设置 cookie:httpOnly
history
history 代表浏览器的历史记录,不建议使用,一般用Ajax
DOM文本对象模型
自己写的结构树
核心
整个浏览器网页就是一个dom树形结构
- 更新:更行Dom节点
- 遍历Dom节点:得到
- 删除:删除一个Dom节点
- 添加:添加Dom节点
如果想要操作,必须先获得Dom节点,一般用jQuery操作
操作表单
可以做一些验证判断,尽量避免在服务器端调试.
表单包括
input type
- 文本框 text
- 下拉框
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- …
表单的目的:提交信息
表单提交验证,md5加密密码
用script 标签引入md5 文件
jQuery
是一个封装了大量js方法的工具类,可以称之为一个库
使用方法
-
获取jQuery
-
使用jQuery cdn 在线导入,或者在官网下载后自己链接
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>//百度cdn
公式
$(selector css).action()
$ (选择器).事件(函数)
jQuery选择器,事件
https://jquery.cuishifeng.cn/index.html
操作DOM元素
$('#test-ul li[name= ]').text();//获得值
$('#test-ul li[name= ]').text('设置值');//设置值 纯文本层
$('#test-ul').html();//获得值 解释层HTML
$('#test-ul').html('<strong>123</strong等>');//设置值