JavaScript

最新推荐文章于 2023-01-09 18:55:20 发布

原创最新推荐文章于 2023-01-09 18:55:20 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

在这里插入图片描述

什么是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等>');//设置值