JavaScript_js判断是pc端还是移动端-程序员宅基地

技术介绍

行为层

JavaScript 一门]弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译,而是将文本格式
的字符代码发送给浏览器由浏览器解释运行。
Native原生JS开发
原生JS开发，也就是让我们按照[ ECMAScript]标准的开发方式，简称是ES,特点是所有浏
览器都支持。截止到当前博客发布时间，ES标准已发布如下版本:
●ES4 (内部，未正式发布)
●ES5 (全浏览器支持)
●ES6 (常用，当前主流版本: webpack打包成为E5支持! )
●ES8
●ES9 (草案阶段)
区别就是逐步增加新特性。
TypeScript微软的标准
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript 的一个超集,且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯海尔斯伯格(C#、Delphi、TypeScript 之父; .NET 创立者)导。
该语言的特点就是除了具备ES的特性之外还纳入了许多不在标准范围内的新特性，所以会导致很多浏览器不能直接支持TypeScript语法，需要编译后(编译成JS)才能被浏览器正确执行。

JavaScript框架

●jQuery: 大家熟知的JavaScript 框怒。优点是简化了DOM操作,缺点是DOM操作太频繁，
影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7. 8;
●Angular: Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬
到了前端并增加了模块化开发的理念，与微软合作,采用TypeScript语法开发;对后台程序员友
好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代，除了名字,基本就
是两个东西;截止发表博客时已推出了Angular6)
●React: Facebook出品，- -款高性能的JS前端框架;特点是提出了新概念[虚拟DOM] 用于
减少真实DOM操作,在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复
杂，因为需要额外学习一门[JSX] 语言;
●Vue: -款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思,如实现模块化开
发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虛拟DOM)的
优点;
●Axios :前端通信框架;因为Vue的边界很明确，就是为了处理DOM,所以并不具备通信能
力，此时就需要额外使用一一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;

UI框架

●Ant-Design: 阿里巴巴出品，基于React的UI框架:
●ElementUI. iview. ice: 饿了么出品，基于Vue的UI框架
●Bootstrap: Twitter推出的一一个用于前端开发的开源工具包
●AmazeUl:又叫“妹子UI”，一款HTML5跨屏前端框架

JavaScript构建工具

●Babel: JS编译工具，主要用于浏览器不支持的ES新特性,比如用于编译TypeScript
●WebPack:模块打包器，主要作用是打包、压缩、合并及按序加载

三端统一

混合开发(Hybrid App)

主要目的是实现一套代码三端统一(PC、 Android: .apk 、iOs: .ipa )并能够调用到设备底层硬
件(如:传感器、GPS、摄像头等)，打包方式主要有以下两种:
●云打包: HBuild -> HBuildX, DCloud出品; API Cloud
●本地打包: Cordova (前身是PhoneGap)

微信小程序

详见微信官网，这里就是介绍一个方便微信小程序UI开发的框架: WeUI

后端技术

前端人员为了方便开发也需要掌握一定的后端技术，但我们Java后台人员知道后台知识体系
极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了NodeJS这样的技术。
NodeJS的作者已经声称放弃NodeJS (说是架构做的不好再加上笨重的node_ modules, 可能
让作者不爽了吧)，开始开发全新架构的Deno

既然是后台技术，那肯定也需要框架和项目管理工具，NodeJS 框架及项目管理工具如下:
●Express: NodeJS框架
●Koa: Express简化版
●NPM:项目综合管理工具，类似于Maven
●YARN: NPM的替代方案,类似于Maven和Gradle的关系

主流前端框架

iView

iview是- -个强大的基于Vue的UI库,有很多实用的基础组件比elementui的组件更丰富，主
要服务于PC界面的中后台产品。使用单文件的Vue组件化开发模式基于npm + webpack +
babel开发，支持ES2015高质量、功能丰富友好的API，自由灵活地使用空间。
●官网地址
●Github
●iview- admin

备注:属于前端主流框架，选型时可考虑使用，主要特点是移动端支持较多

ElementUI

Element是饿了么前端开源维护的Vue UI组件库,组件齐全,基本涵盖后台所需的所有组件,
文档讲解详细，例子也很丰富。主要用于开发PC端的页面，是一个质量比较高的Vue UI组件库。
●官网地址
●Github
■vue-element- admin
备注:属于前端主流框架，选型时可考虑使用，主要特点是桌面端支持较多

ICE

飞冰是阿里巴巴团队基于React/Angular/Vue的中后台应用解决方案，在阿里巴巴内部，已经有
270多个来自几乎所有BU的项目在使用。飞冰包含了-条从设计端到开发端的完整链路，帮助用户快
速搭建属于自己的中后台应用。
●官网地址
●Github
备注:主要组件还是以React为主，截止2019年02月17日更新博客前对Vue的支持还不
太完善，目前尚处于观望阶段

VantUI

1、什么是JavaScript

1.1 概述

JavaScript是一门世界上最流行的脚本语言
Java、JavaScript
10天~
一个合格的后端人员，必须要精通JavaScript

1.2 历史

https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript它可以理解为是avaScript的一个标准
最新版本已经到es6版本~
但是大部分浏览器还只停留在支持es5代码上!

最新版本已经到es6版本~
但是大部分浏览器还只停留在支持es5代码.上!
开发环境–线上环境，版本不一致

2、快速入门

2.1、引入JavaScript

1、内部标签

<script>
    //....
</script>

2、外部引入

abs.js

....

test.html

<script src="abc.js"></script>

代码例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--script标签内，写javascript代码-->
<!--   <script>
       alert("hello,world");
   </script>-->

<!--    外部引入-->
    <script src="js/qs.js"></script>


    <!--不用显示定义type，也默认就是javascript-->
    <script type="text/javascript">

    </script>
</head>
<body>
</body>
</html>

2.2、基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
    <script>
        // 1.定义变量 变量类型 变量名=变量值;
        var score=71;
        //alert(num)
        if (score>60 && score<70){
      
            alert("60~70")
        }else if(score>70 && score<80){
      
            alert("70~80")
        }else{
      
            alert("other")
        }
        //console.1og(score)在浏览器的控制台打印变量! System. out. print1n();
        /*
        asdasdasd
        **/

    </script>
</html>

浏览器必备调试须知
在这里插入图片描述

2.3、数据类型

数值，文本，图形,音频，视频…

变量

var 王者荣耀="倔强青桐"

number

123 // 整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99   //复数
NaN  //not a  number
Infinity //表示无限大

字符串

'abc' "abc"

布尔值
true，false

逻辑运算

&& 两个都为真，结果为真

|| 一个为真，结果为真

! 真即假，假即真

比较运算符

=
== 等于(类型不一样，值一样，也会判断为true)
=== 绝对等于(类型-一样，值-一样，结果true)

这是一个JS的缺陷，坚持不要使用==比较
须知:

●NaN===NaN ，这个与所有的数值都不相等，包括自
己
●只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题

console.1og((1/3) === (1-2/3))

尽量避免使用浮点数进行运算，存在精度问题!

Math. abs(1/3-(1-2/3)) <0.00000001

null 和 undefined

●null空
●undefined未定义

数组
Java的数值必须是相同类型的对象~，JS中不需要这样!

var arr =[1,2,3,4,5,'he11o',nu11, true]

new Array(1,12,3,4,4,5,'he11o');

取数组下标:如果越界了，就会

undefined

对象

	//Person person =new Person(1,2,3,4,5);
	 
    var person={
        name:"四月",
        age:19,
        tags:['js','java','web']
    }

取对象的值

person.name
>"四月"
person.age
>19

2.4、严格检查模式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
    前提: IEDA需要设置支持ES6语法
    'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一 些问题
    必须写在JavaScript的第一行!
    局部变量建议部使用Let去定义~
    -->
    <script>
        'use strict';
        let  i=1;
        // ES6 Let

    </script>
</body>
</html>

3、数据类型

3.1、字符串

1、正常字符串我们使用单引号,或者双引号包裹
2、注意转义字符 \

\'
\n
\t
\u4e2d \u#### Unicode字符
\x41
Asc11字符

3.多行字符串编写

//tab 上面esc键下面
var msg =
' he1lo
world
你好ya
你好 '

4、模板字符串

//tab上面 esc键下面
let name = "qinjiang";
1et age = 3;
1et msg =你好呀，${name}

5、字符串长度

str.length

6、字符串的可变性，不可变
赋值失败可以得出不可变
在这里插入图片描述

7、大小写转换

//注意，这里是方法，不是属性了
student. toupperCase ( )    //大写
student. tol owerCase ( )   //小写

8、student.indexOf('t)
获取当前字符的一个位置下标（index）

9、substring

[)
student. substring(1) //从第一个字符串截取到最后一个字符串
student. substring(1,3) //[1,3)

3.2、数组

Array可以包含任意的数据类型

var arr=[1,2,3,4,5,6]
arr[0]
arr[0]=1

1、长度

arr.length

注意:加入给arr.length赋值,数组大小就会发生变化~，如果赋值过小，元素就会丢
失

2、indexOf, 通过元素获得下标索引

arr. indexof(2)
1

字符串的“1"和数字1是不同的

字符串的“1”和数字1是不同的

3、slice () 截取Array的一部分，返回一个新数组

4.pusg,pop

push:   压入到尾部
pop:     弹出尾部的一个元素

5、unshift(),shift（）头部

unshift:压入到头部
shift:弹出头部的一一个元素

7、元素反转 reverse()

(3) ["A"， "B"，"C"]
arr.reverse( )
(3)["C"，"B' "A"]

8、concat () 拼接数组

(3) ["A", "B","C"]
(6)arr.concat([1,2,3])
arr
(3) ["A", "B","C"]

注意: concat () 并没有修改数组，只是会返回一个新的数组

9、连接符join
打印拼接数组，使用特定的字符串连接

(3) ["A", "B","C"]
arr.join('-')
"A-B-C"

10、多维数组

arr = [[1,2],[3,4],["5","6"]];
arr[1] [1]
4

数组:存储数据(如何存, 如和取，方法都可以自己实现! )

3.3、对象

若干个键值对

var对象名={
属性名:属性值，
属性名:属性值 ，
属性名:属性值
}

//定义了一个person对象，它有四个属性!
var person = {
name: "kuangshen"
age: 3,
email: "247 3674 3@qq. com
score: 0
}

Js中对象，… 表示一个对象，键值对描述属性 xxXX: xxxx，多个属性之间使用逗号
隔开，最后一个属性不加逗号!
JavaScript中的所有的键都是字符串，值是任意对象!

1、对象赋值.

person.name = "qinjiang”
"qinjiang”
person.name
qinjiang

2、使用一个不存在的对象属性，不会报错!

person.haha
undefi ned

3、动态的删减属性,通过delete删除对象的属性

delete person . name
true
person

4、动态的添加，直接给新的属性添加值即可

person.haha = "haha'
"haha '
person

5、判断属性值是否在这个对象中! xxx in xxx!

' age' in person  true
//继承
'tostring"  in person
  true

6、判断-一个属性是否是这个对象自身拥有的hasOwnProperty()

person.hasOwnProperty( 'tostring')
false
person.hasownProperty(' age ')
true

3.4、流程控制

if判断

var age = 3;
if (age>3){
     //第一个判断
	alert("haha");
}else if(age<5) {
     //第二个判断
	alert ("kuwa~");
}else {
     //否则，，
	alert("kuwa~");
}

while循环，避免程序死循环

while(age<100){
	age=age+1;
	console.1og(age)
}
do(age<100)]{
	age=age+1;
	console.log(age);
}

for循环

for(let i=0;i<100;i++){
    
	console.1og(i)
}

forEach循环

var age = [12,3,12,3,12,3,12,31,23,123];
//函数
age.forEach(function (value) {
    
console.1og(value)
});

for…in

//for(var index in object){}
for(var num in age){
    
	if (age.hasownProperty(num)){
    
		console.1og("存在")
		console.1og(age [num])
	  }
}

3.5、Map 和 Set

Map

//ES6
Map
//学生的成绩，学生的名字
// var names = ["tom" , "jack", "haha"];
// var scores = [100,90,80];
var map = new Map([['tom' ,100],['jack' ,90],['haha' ,80]]);
var name = map. get('tom'); //通过key获得value
map.set(' admin'，123456); //增加
map.delete('tom'); //删除

Set:无序不重复的集合

set.add(2); //添加!
set.delete(1); //删除!
console.1og(set.has(3)); //是否包含某 个元素!

3.6、iterator

作业:使用iterator来遍历迭代我们Map, Set !

遍历数组

//通过for of / for  in下标
var arr = [3,4,5]
for (var x of arr){
    
console.1og(x)
}

遍历map

var map = new Map([["tom" , 100], ["jack"，90], ["haha" ,80]]);
for (let x of map){
    
console.1og(x)
}

遍历set

var set = new Set([5,6,7]);
for (let X of set) {
    
console.1og(x)

4、函数

4.1、定义函数

定义方式一

绝对值函数

function abs(x){
    
	if(x>=0){
    
		return x;
	}else{
    
		return -X;
	}
	}

一旦执行到return代表函数结束，返回结果!
如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var abs=function(x){
    
	if(x>=0){
    
		return x;
	}else{
    
		return -X;
	}
}

function(x){ … }这是一-个匿名函数。但是可以把结果赋值给abs，通过abs就可以调用函数!
方式一和方式二等价!

调用函数

abs(10)  //10
abs(-10) //10

参数问题: javaScript 可以传任意个参数，也可以不传递参数~
参数进来是否存在的问题?
假设不存在参数，如果规避?

var abs = function(x){
    
	//手动抛出异常来判断
	if (typeof x!== 'number') {
     
		throw 'Not a Number ' ;
	}
	if(x>=0){
    
		return x;
	}else{
    
		return - x;
	}

argyments

argyments 是一个JS免费赠送的关键字；
代表，传递进来的所有的参数，是一个数组~

var abs = function(x){
    
	console.1og("x=>"+x);
	for (var i = 0; i<arguments.1ength;i++){
    
		console.1og(arguments []);
	}
	if(x>=0){
    
		return x;
	}else{
    
		return -x;
	}
}


abs(1,2,3,45,1,44)

问题: arguments 包含所有的参数,我们有时候想使用多余的参数来进行附加操作。需要排除已有
参数~

rest

以前

   function a(a,b) {
    
            console.log("a=>"+a);
            console.log("a=>"+b);
            if (arguments.length>2){
    
                for (var i=2;i<arguments.length;i++){
    
                }

            }
        }

ES6引入的新特性，获取除了已经定义的参数之外的所有参数~

   function aa(a,b,...rest) {
    
            console.log("a=>"+a);
            console.log("a=>"+b);
            console.log(rest);
        }

rest参数只能写在最后面，必须用… 标识。

4.1、变量的作用域

在javascript中，var 定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用~ (非要想实现的话，后面可以研究一下
，闭包)

function qj() {
    
varx = 1;
X=X+1;
}
x=x+2;//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function qj() {
    
	var x = 1;
	x=x+1;
	}
function qj2() {
    
	var x = 'A';
	x=x+1;
}

内部函数可以访问外部函数的成员，反之则不行

function qjO) {
    
	var x = 1;
	//内部函数可以访问外部函数的成员，反之则不行
	function qj2(){
    
		vary=x+1; // 2
	}
	varz = y+1;//Uncaught ReferenceError: y is not defined 
}

假设，内部函数变量和外部函数的变量，重名!

function qj() {
    
	var x = 1;
	function qj2() {
     
	varx = 'A';
	console.1og('inner'+x); //outer1
	}
	console.1og(' outer'+x); //innerA
	qj2()
}
	qj();

假设在JavaScript中函数查找变量从自身函数开始~，由”内"向”外” 查找.假设外部存在这个同名
的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function qj() {
    
	varX="x"+y;
	console.1og(x);
	vary = 'y';
}

结果: xundefined
说明;js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值’;

function qj2() {
    
	var y;
	
	varx="x"+ y;
	console.1og(x);
	y ='y';
｝

这个是在JavaScript建立之初就存在的特性。养成规范:所有的变量定义都放在函数的头部,不要
乱放，便于代码维护;

function qj2() {
    
	varx = 1,
	y=x+1,
	z,i,a; //undefined
	//之后随意用
	}

全局函数

//全局变量
x =1;
function fO {
    
console.1og(x);
}
f();
console.1og(x);

全局对象window

varX='xxx';
alert(x);
alert(window.x); //默认所有的全局变量，都会自动绑定在window对象下:

alert()这个函数本身也是window的方法

varx = ' xxx';
window. alert(x);
var o1d_ _alert = window. alert;
//o1d_ alert(x);
window.alert = function () {
    
};

// 发现alert() 失效了
window. alert(123);

//恢复
window.alert =
o1d_ alert;
window. alert(456);

Javascript实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用
范围内找到，就会向外查找，如果在全局作用域都没有找到，报错 RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的window.上。如果不同的js文件，使用了相同的全局变
量,冲突~>如果能够减少冲突?

//唯一全局变量
var KuangApp = {
    };
//定义全局变量
KuangApp. name = ' kuangshen';
KuangApp.add = function (a,b) {
    
return a + b;
}

把自己的代码全部放入自己定义的唯一-空间名字中，降低全局命名冲突的问题~

jQuery

局部作用域 let

function aaa() {
    
	for(vari=0;i<100;i++){
    
		console.1og(i)
		}
		console.1og(i+1); //问题? i 出了这个作用域还可以使用
	}

ES6 let关键字,解决局部作用域冲突问题!

function aaa() {
    
	for(1eti=0;i<100;i++){
    
	console.1og(i)
	}
    console.1og(i+1); //Uncaught ReferenceError: i is not defined

建议大家都是用 let 去定义局部作用域的变量;

常亮 const

在ES6之前，怎么定义常量:只有用全部大写字母命名的变量就是常量;建议不要修改这样的值

var PI = '3.14' ;
console.1og(PI) ;
PI = '213'; //可以改变这个值
console.1og(PI);

在ES6引入了常量关键字 const

const PI = '3.14'; //只读变量
console.1og(PI);
PI = '123'; // TypeError: Assi gnment to constant variable.
console.1og(PI);

4.3方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西:属性和方法

   var siyue={
    
            name: '四月',
            bitrh: 2020,
            //方法
            age: function () {
    
                //今年 - 出生的年
                var now=new Date().getFullYear();
                return now-this.bitrh;
            }
        }
        
        //属性
        siyue.name;
        //方法，一定要带（）
        siyue.age();

this.代表什么?拆开上面的代码看看~

function getAge() {
    
	//今年一出生的年
	var now = new Date().getFu11Year();
	return now-this.bitrh;
	}
var kuangshen = {
    
	name:
	'秦疆'
	bitrh: 2000,
	age: getAge
	}
// kuangshen.age() ok
// getAge() NaN  window

this是无法指向的，是默认指向调用它的那个对象;

apply

在js中可以控制this指向

function getAge() {
    
	//今年一出生的年
	var now = new Date().getFullyear();
	return now-this.bitrh;
	}
	var kuangshen = {
    
	name:'秦疆' ，
	bitrh: 2000 ，
	age: getAge
	};
	// kuangshen.ageO ok
	getAge.app1y(kuangshen,[]);// this, 指向了kuangshen, 参数为空

5、内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
'object"
typeof {
    }
"object"
typeof Math. abs
"function"
typeof undefined
"undefined"

5.1、Date

基本使用

var now = new Date(); //sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)
now. getfu11year(); //年
now. getMonthO; //月0~11 代表月
now. getDate(); //日
now. getDay(); //星期几
now. getHours(); //时
now. getMinutesO); //分
now. getSeconds(); //秒

now. getTime(); //时间戳全世界统一1970 1.1 0:00:00亳秒数

console.1og(new Date (1578106175991)) //时间戳转为时间

转换

now = new Date (1578106175991)
Sat Jan 04 2020 10:49:35 GMT+0800 (中 国标准时间)
now. tolocalestring //注意，调用是一个方式，不是一个属性!
f toLocalestring() {
     [native code] }
now. toLocalestring()
"2020/1/4上午10:49:35"
now. toGMTString()
"Sat，04 Jan 2020 02:49:35 GMT"

5.2、JSON

json是什么

早期，所有数据传输习惯使用XML文件!
●JSONlavaScript Object Notation, JS对象简谱)是一种轻量级的数据交换格式。
●简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
●易于人阅读和编写，同时也易于机器解析和生成,并有效地提升网络传输效率。

在JavaScript-切皆为对象、任何js 支持的类型都可以用JSON来表示; number, string…
格式:
●对象都用{}
●数组都用[]
●所有的键值对都是用key:value

JSON字符串和JS对象的转化

var user = {
    
name: "qinjiang",
age: 3,
sex:'男'
}
//对象转化为json字符串{"name": "qinjiang", "age":3, "sex":"男"}
var jsonUser = JSON.stringify(user);

//json字符串转化为对象参数为json字符串
var obj = JSON.parse(' {"name":"qinjiang" ,"age":3,"sex":"男"}');

很多人搞不清楚，JSON和JS对象的区别

var obj = {
    a: 'hello' ,b: 'hellob'};
var json = '{"a": "he11o", "b": "he11ob"}'

5.3、Ajax

●原生的js写法xhr 异步请求
●jQuey 封装好的方法$("#name"aja(")
●axios 请求

6、面向对象编程

6.1、什么是面向对象

原型对象

javascript. Java、 C#。。。。面向对象; javascript有些区别!
●
类:模板
●对象:具体的实例
在JavaScript这个需要大家换一下思维方式!
原型:

	var Student = {
    
	name: "qinjiang",
	age: 3,
	run: function () {
    
		console.1og(this.name +”run....");
	}
	};
	var xiaoming = {
    
		name: "xiaoming"
	};
	//原型对象
	xi aoming._ proto__ = Student;
	var Bird = {
    
		fly: function () {
    
		console.1og(this.name +”fly....");
	}
	};
	//小明的原型是student
	xiaoming._ proto__ = Bird;

function Student (name) {
    
	this.name = name ;
}
//给student新增一个方法
student.prototype.he11o = function () {
    
	alert('He1lo')
};

class 继承

c lass 关键字，是在ES6引入的
1.定义-个类,属性,方法

//定义一个学生的类
class Student{
    
constructor (name) {
    
	this.name = name;
}
he11o(){
    
	alert('he11o')
}
}

var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
xiaoming.hello();

2、继承

//定义一个学生的类
class Student{
    
constructor (name) {
    
	this.name = name;
}
he11o(){
    
	alert('he11o')
}
}
class xiaostudent extends student{
    
	constructor (name,grade) {
    
	super(name);
	this.grade = grade;
	}
}

	myGrade(){
    
		alert('我是一名小学生'
	}
var xiaoming = new Student("xiaoming");
var xiaohong = new xi aostudent ("xiaohong" ,1);

原型链

proto:

在这里插入图片描述

7、操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器关系?
JavaScript诞生就是为了能够让他在浏览器中运行!
BOM :浏览器对象模型
●IE 6~12
●Chrome
●Safari
●FireFox Linux
●Opera

三方
●QQ浏览器
●360浏览器

window

window代表浏览器窗口

window.alert(1)
undefined
window. innerHei ght
258
window. innerwi dth
919
window. outerHeight
994
window. outerwi dth
919
//大家可以调整浏览器窗口试试...

Navigator

Navigator ,封装了浏览器的信息

navigator.appName
"Netscape"
navi gator . appversion
"5.0 (windows NT 10.0; W0w64) Applewebkit/537.36 (KHTML， like Gecko)
Chrome/63.0.3239.132 safari/537. 36"
navigator.useragent
"Mozi11a/5.0 (windows NT 10.0; Wow64) Applewebkit/537.36 (KHTML， like
Gecko) Chrome/63. 0.3239.132 safari/537. 36"
navigator.platform
"win32"

大多数时候，我们不会使用 navigator对象，因为会被人为修改!
不建议使用这些属性来判断和编写代码

screen
代表频幕尺寸

screen.width
1920px
screen.height
1080px

location(重要)

location代表当前页面的URL信息

host: "www. bai du. com"
href :"https: //www. baidu. com/"
protocol: "https:"
reload:f re1oad() //刷新网页
//设置新的地址:
location. assign('https://b1og. kuangstudy. com/')

document

document代表当前的页面，HTML DOM文档树

document. title
"百度一下，你就知道"
document. title='狂神说'
"狂神说'

获取具体的文档树节点

    <dl id="app">
        <dt>Java</dt>
        <dt>JavaSE</dt>
        <dt>JavaEE</dt>
    </dl>

    <script>
        var dl=document.getElementById("app");
    </script>

获取 cookie

document.cookie
"__guid=111872281. 88375976493059340.1578110638877.133; monitor_ count=1"

劫持cookie原理

<script src="aa.js"></script>
<!--恶意人员:获取你的cookie.上传到他的服务器-->

服务器端可以设置cookie: httpOnly

history (不建议使用)

history代表浏览器的历史记录

history.back() //后退
history.forward() //前进

8、操作DOM对象（重点）

DOM:文档对象模型，

获得dom节点

//对应css选择器
        var h1=document.getElementsByTagName("h1");
        var p1=document.getElementById("p1");
        var p2=document.getElementsByClassName("p2");

        var father=document.getElementById("father")
        var childrens= father.children; //获取父节点下的所有子节点
        // father.firstChild;
        // father.lastChild;

这是原生代码，之后我们尽量都是用jQuery();

更新节点

<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>

操作文本
id1.innerText=’ 456 ’ 修改文本的值
●id1.innerHTML=’ 123 可以解析HTML文本标签

操作JS

id1.style.color ='yellow';  //属性使用字符串包裹
id1.style. fontsize=' 20px'; //驼峰命名问题
id1.style. padding ='2em'

删除节点

删除节点的步骤:先获取父节点,在通过父节点删除自己

<div id="father">
<h1>标题一</hl>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document. getElementById('p1');
var father = p1.parentE1 ement;
father.removeChild(self)
//删除是一个动态的过程;
father.removeChi1d(father . children [0])
father.removeChild(father . children [1])
father.removeChild(father . children [2])
</script>

注意:删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意~

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一-个元素
了，但是这个DOM节点已经存在元素了，我们就不能这么干了!会产生覆盖

追加

<p>id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById('js');
var 1ist = document.getElementById('list');
list appendChild(js);//追加到后面
</script>

效果
在这里插入图片描述

创建一个新的标签

<script>
var js = document. getElementById('js'); //已经存在的节点
var 1ist = document. getE1 ementById('list');
//通过JS创建一个新的节点 
var newp = document . createElement('p');//创建一个p标签
newP. id = 'newP' ;
newP. innerText = 'Hel1o, Kuangshen' ;
//创建一个标签节点
var myscript = document. createElement('script');
myScript . setAttribute(' type', ' text/javascript');
//可以创建一个Style标签
var mystyle= document. createElement('style'); //创建了一个空sty1e标签
mystyle. setAttribute('type', 'text/css');
mysty1e. innerHTML = ' body{background-color: chartreuse;}'; //设置标签内容
document. getE1 ementsByTagName( ' head') [0] . appendchild(mysty1e)
</script>

insertBefore

var ee = document. getE1 ementById('ee');
var js = document. getElementById('js');
var list = document. getElementById('list');
//要包含的节点. insertBefore (newNode，targetNode)
list.insertBefore(js,ee);

9、操作表单 (验证)

表单是什么 form DOM 树

●文本框. text
●下拉框< select>
●单选框radio
●多选框checkbox
●隐藏域hidden
●密码框password
●
…
表单的目的:提交信息

获得要提交的信息

 <form action="post">
        <p>
        <span>用户名:</span><input type="text" id="username" />
        </p>
<!--        多选框的值，就是定义好的value-->
        <p>
            <span>性别：</span>
            <input type="radio" name="sex" value="man" id="boy">男
            <input type="radio" name="sex" value="women" id="girl">女
        </p>
    </form>
<script>
    var input_text=document.getElementById("username");
    var boy_radio=document.getElementById("boy");
    var  girl_radio=document.getElementById("girl");
    //得到输入框的值
    //得到修改输入框的值
    input_text.value ='123'
    //. 对于单选框，多选框等等固定的值，boy_ radio. value只能取到当前的值
    boy_radio.checked; // 查看返回的结果，是否为true， 如果为true，则被选中心
    girl_radio.checked = true; //赋值

表单提交.MD5加密


<form action="post" method="/login"  onsubmit="return add()">
    <p>
        <span>用户名:</span><input type="text" id="username" />
    </p>
    <!--        多选框的值，就是定义好的value-->
    <p>
        <span>密码:</span><input type="password" id="input-password" />
    </p>
    <input type="submit" id="md5-password" name="password">

<!--    绑定事件 onclick 被点击-->
    <button type="button" onclick="add()">提交</button>
    <script>
        function add() {
      
            var uname=document.getElementById("username");
            var pwd=document.getElementById("input-password");
            var md5pwd=document.getElementById("md5-password");
            console.log(uname.value);
            //MD5 算法
            //可以校验判断表单内容，true 就是通过提交，false,阻止提交
            md5pwd.value=md5(pwd.value);
            console.log(pwd.value);
            return false;
        }
    </script>

10、JQuery

javaScript

jQuery库，里面存在大量的avascript函数

获取jQuery

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
      <a href="" id="test-jquery"></a>
    <script>
       $("#test-jquery").click(function () {
    
           alert("hello,jQuery");
       })
    </script>
</body>
</html>

选择器

//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css 中的选择器 它全部都能用!
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click() //class.选择器

文档工具站: htp:/jguery.cuishifeng.cn/

事件

鼠标事件，键盘事件，其他事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #divMove{
      
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>

</head>
<body>
<!--    要求: 获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>
    //当网页元素加载完毕之后，响应事件
    $(function () {
      
        $("#divMove").mousemove(function (e) {
      
            $("#mouseMove").text("x:"+e.pageX+"y:"+e.pageY)
        });
    });
</script>
</body>
</html>

操作DOM

节点文本操作

$(' #test-u1 1i [name=python]').text(; //获得值
$(' #test-u1 1i [name=python]').text('设置值'); //设置值
$(' #test-ul').html(); //获得值
$(' #test-ul'). html(' <strong>123</strong>'); //设置值

css操作

$('#test-ul 1i [name=python]').css({
    "co1or","red"})

元素的显示和隐藏:本质display none;

$('#test-u11i [name=python]').show()
$('#test-u11i [name=python]').hide()

娱乐测试

$ (window).width()
$ (window).height()
$('#test-u1 1i [name=python]').toggle();

未来ajax ()

$(' #from' ).ajax()

$.ajax({
     ur1: "test.htm1"，context: document body,success:function(){
    
 $(this). addClass ("done");
}});

小技巧

1、如果巩固S (看jQuery源码,看游戏源码! )
2、巩固HTML。CSS (扒网站，全部down下来,然后对应修改看效果~)

本文链接：https://blog.csdn.net/qq_45692698/article/details/120072240

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

关于multi-head的一点思考-程序员宅基地

文章浏览阅读2k次。Google于2017年提出了Transformer，而提出该模型的论文名为《Attention is all you need》，之前翻译该论文的时候并没有太多注意attention，更多的放在了整体的模型结构上。最近面试了一个候选人，他介绍项目用到的AOA时，提到了从“横向”和“纵向”两个维度做softmax，突然让我对Transformer中的multi-head attention有了新的求知欲（虽然这两个事情联系不大，但的确对之前不在意的细节产生了好奇）。从文章名可以看出attention在Tr_multi-head

模型重叠效应-程序员宅基地

文章浏览阅读939次，点赞18次，收藏17次。重叠效应（Overlap Effect）是一种认知偏差，指的是当两个或更多的刺激在时间或空间上接近时，它们的影响会相互重叠，从而导致对这些刺激的感知、记忆或判断出现偏差。这种效应通常会导致人们对某个刺激的感知或记忆受到其他刺激的干扰，从而影响其准确性。重叠效应的起源可以追溯到早期的心理学研究。最早提出这个概念的是德国心理学家赫尔曼·艾宾浩斯（Hermann Ebbinghaus），他在研究记忆的过程中发现，当两个记忆任务同时进行时，它们会相互干扰，从而影响记忆的效果。

使用next()和nextLine()方法接收从键盘输入字符串型数据区别_从命令行输入字符串reader.next-程序员宅基地

文章浏览阅读4.5k次。import java.util.*; //加载java.util类库里的所有类public class Test{ public static void main(String[] args) { String s1,s2; Scanner reader=new Scanner(System.in); System.out.print("请输入_从命令行输入字符串reader.next

Windows10安装Pytorch步骤记录_如何查找自己电脑上是否下载过pytorch-程序员宅基地

文章浏览阅读923次。文章目录安装Anaconda并且创建Pytorch环境下载Anaconda配置环境变量anaconda的命令行窗口配置添加新的下载源添加激活新的python环境利用conda安装pytorch添加pytorch镜像源正式安装pytorch查看是否安装成功利用pip安装安装Anaconda并且创建Pytorch环境下载Anaconda先从anaconda官网，选择匹配自己系统的版本，安装anaconda；注意！如果你系统已经装了python的话，不要勾选add anaconda to the syst_如何查找自己电脑上是否下载过pytorch

基于Matlab实现深度学习（RCNN）的汽车目标检测的以及代码解释_基于深度学习的汽车目标检测-程序员宅基地

文章浏览阅读1.1w次，点赞25次，收藏234次。基于Matlab的深度学习的汽车目标检测目前大部分的深度学习或者主流的深度学习算法大部分都是基于python所做的“前端”所实现的，python的语言足够简洁，社区相对成熟（框架多，类库多，教程丰富），从目前的来看，scala等后起之秀在短时间内代替不了Python。但是在这一篇小Q想用matlab自带的深度学习做一回汽车的目标检测，抛砖引玉，用另外一种思维。这次我们是用的是已标记的小汽车样本数据训练RCNN（Reigions with Convolutional Neural Networks, R_基于深度学习的汽车目标检测

关于OPPO R11上面运行项目出现ClassNotFoundException问题的原因及解决方案记录_andr-perf-mpctl: invalid request, no optimizations-程序员宅基地

文章浏览阅读4.4k次。这个项目很简单，只是用了一个AgentWeb展示一个网页的功能，其他手机上面都没有问题，只有OPPO R11上面报了这个问题，找了度娘也没有解决。真是捉急吖！！！回归正题，错误如下：2019-03-25 15:03:02.219 593-3069/? E/ANDR-PERF-MPCTL: Invalid profile no. 0, total profiles 0 only2019-..._andr-perf-mpctl: invalid request, no optimizations performed

随便推点

Eclipse RCP插件开发【1.插件介绍】-程序员宅基地

文章浏览阅读1.1k次，点赞18次，收藏21次。扩展点是 Eclipse RCP（Rich Client Platform）中用于定义产品的扩展点。产品定义了一个独立的、可分发的 Eclipse 应用程序。通过定义产品，你可以配置应用程序的名称、图标、启动特性、插件等属性。以下是扩展点中这些属性和元素定义了 Eclipse RCP 产品的一些关键特征，包括产品的标识、名称、启动应用程序、描述、图标、版本等。通过定义产品，你可以配置和分发独立的 Eclipse 应用程序。_eclipse rcp

slf4j依赖报错_unresolved dependency: 'org.slf4j:slf4j鈥恆pi:jar:1.-程序员宅基地

文章浏览阅读581次。Exception in thread “main” java.lang.IllegalArgumentException: LoggerFactory is not a Logback LoggerContext but Logback is on the classpath. Either remove Logback or the competing implementation (class org.slf4j.impl.SimpleLoggerFactory loaded from file:/D_unresolved dependency: 'org.slf4j:slf4j鈥恆pi:jar:1.7.28

git+TortoiseGit实现数据云管理_tortoisegit 使用云效-程序员宅基地

文章浏览阅读244次。经过朋友介绍最近再调试git+TortoiseGit实现代码云盘管理，调试完成后感觉还不错，做一下笔记。同时希望能保住各位码农大侠们。刚开始需要安装GIT软件+TortoiseGit：网上也有详细安装教程，但是讲的还是有些问题，有兴趣的小伙伴可以参考一下，安装教程： https://blog.csdn.net/xc_zhou/article/details/93137856第一步：安装git软件，国外官网链接下载速度太慢，提供一个国内的git国内镜像下载：https://blog.csd_tortoisegit 使用云效

Mac环境Idea使用git终端terminal_mac idea terminal git-程序员宅基地

文章浏览阅读5.3k次。Mac中 intellij Idea 使用系统终端terminal之前在 win 系统中比较喜欢使用 git 的 bash 弹窗，自己敲命令行转换到 mac 发现想自己敲命令和win不太一样，需要装插件。装完重启即可，右键项目就可以使用了..._mac idea terminal git

python 面向对象编程实例练习：建立一个产品库存管理_要求:使用python面向对象编程实现产品以及仓库的库存惯例的相关应用。关于产品pr-程序员宅基地

文章浏览阅读1.1w次，点赞8次，收藏118次。要求：产品库存管理——创建一个管理产品库存的应用。建立一个产品类:价格、id、库存数量。建立一个库存类:记录各种产品并能计算库存的总价值。理论分析：1.产品类：2.库存类：代码如下：产品类：product.py#!/usr/bin/env python3# -*- coding: utf-8 -*-class product: def __init..._要求:使用python面向对象编程实现产品以及仓库的库存惯例的相关应用。关于产品pr

Qt 蓝牙通讯_qbluetoothdeviceinfo serviceuuids-程序员宅基地

文章浏览阅读9.2k次，点赞7次，收藏81次。pro文件加上QT += bluetooth头文件:#ifndef BLUETOOTHPROXY_H#define BLUETOOTHPROXY_H#include <QObject>#include <QtBluetooth/qbluetoothlocaldevice.h>#include <qbluetoothaddress.h>#include <qbluetoothdevicediscoveryagent.h>#include_qbluetoothdeviceinfo serviceuuids