JavaScript基础学习

最新推荐文章于 2024-05-24 13:39:19 发布

77ac

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量138

点赞数

文章标签： javascript 学习前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_61508006/article/details/128538113

版权

1、什么是JavaScript

JavaScript是一门世界上最流行的脚本语言

ECMScript他可以理解为JavaScript的一个标准，

最新版本已到es6版本，但大部分浏览器还只停留在es5上

2、快速入门

2.1引入JavaScript

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

</body>

</html>

alert('hello world');

外部引入

内部标签

2.2基本语法入门

只有var一个变量类型

注释后要加空格

JavaScript严格区分大小写

在浏览器调试

<!DOCTYPE html>

<head>

<title>Title</title>

// 1.定义变量变量类型变量名 = 变量值；

var num = 70;

var name = "ccc";

'hellowworld';

alert(num);

// 2.条件控制

if(num > 60 && num <= 70){

alert("60-70");

}else if(num > 70 && num <= 80){

alert("70-80");

}else{

abert("other");

}

//console.log(num);在浏览器控制台打印变量

</script>

</head>

<body>

</body>

</html>

2.3数据类型

数值，文本，音频，视频，，，

变量

var a = 1;

不要以数字开头

number，js不区分整数和小数

整数，浮点数，科学计数法，负数，NaN(not a number)，Infinity(表示无限大)

字符串

'abc' "abc"...正常字符串使用单引号或双引号包裹

注意转义字符 \

\’

\u4e2d

\x41

多行字符串编写(波浪)

var msg = `hello world

nihao

hello`

模板字符串

let name = "ccc";

let age = 3;

let msg = `你好，${name}`

字符串长度

var student = "student";

console.log(student.length)

字符串的可变性---不可变

大小写转换

//注意这里是方法不是属性

student.toLowerCase()

student.toUpperCase()

获取字符串

student.indexOf('t')

截取字符串

student.substring(1,3)//[..)

student.substring(1)//第一个到最后一个

布尔值

true,false

逻辑运算

&& || ！

比较运算符

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

坚持不要使用==比较

NaN===NaN结果为false，NaN只能通过isNaN(NaN)来判断这个数是否是NaN

1/3 === 1-2/3结果false,尽量避免使用浮点数进行运算

unll和undefined

unll空

undefined未定义

数组

Array可以包含任意数据类型

var arr = [1, 2, 5, 'hello', null, true];

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

长度

arr.length

注意：给arr.length赋值，数组长度会发生变化，

如果赋值过小，会造成元素丢失

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

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

slice() 截取Array的一部分，返回一个新的数组，类似于String里的substring()

push,pop---添加(压入尾部)，删除（弹出尾部）

unshift,shift---添加删除（头部）

sort()排序

reverse()元素反转

concat()拼接

注意：并没有修改数组，只是会返回一个新的数组

join()连接符打印拼接数组使用特定字符串

多维数组

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

arr[1][1] = 4;

fill()填充

数组：存储数据（如何存，如何取，方法都可以自己实现）

对象

若干个键值对

JavaScript中的所有键都是字符串，值是任意对象

var person = {

name:"ccc",

age:3,

tags:['js','java','web','...']

}

取对象的值：person.name

对象赋值

person.name = "ccc"

使用一个不存在的对象属性，不会报错！undefined

动态的删减属性

delete person.name

动态的添加,直接给新的属性添加值即可

person.haha = "haha"

判断属性值是否在这个对象中

'age' in person

//继承

'toString' in person

判断一个属性是否是这个对象自身拥有的hasOwnPerperty()

person.hasOwnPerperty('name')

3、严格检查模式strict

前提：idea设置支持es6语法

'use strict'; //预防JavaScript的随意性所产生的问题，

必须写在JavaScript的第一行

es6中局部变量用let定义

4、流程控制

if判断

var age = 3;

if(age > 3){

alert("haha");

}else if(age < 5){

alert("kuwa")

}else{

alert("oo")

}

循环

while循环，避免死循环

while（true）{}

while(age < 100){

age = age + 1;

console.log(age)

}

do{

age = age + 1;

console.log(age)

}while(age < 100)

for循环

for (let i = 0; i < 100; i++) {

console.log(i)

}

forEach循环

var age = [12, 3, 2, 11, 8];

//函数

age.forEach(function (value){

console.log(value)

})

for...in

for (var num in age) {

if(age.hasOwnProperty(num)){

console.log("存在")

console.log(age[num])

}

5、Map和Set

ES6中的

Map:

//学生的成绩，学生的名字

var map = new Map([['tom', 100],['jack', 90],['hh', 99]]);

var name = map.get('tom');

map.set('admin', 123);//新增或修改

map.delete("tom");//删除

console.log(name);

Set：无序不重合的集合

var set = new Set([3, 1, 1, 1]);//去重

set.add(2);

set.delete(1);

console.log(set.has(3));//是否包含某个元素

6、iterator迭代

打印值，ES6新特性

//遍历数组

var arr = [3, 4, 5];

for(var x of arr){

console.log(x);

}

//遍历Map

var map = new Map([["tom", 100],["jack", 90],["hh", 99]]);

for(let x of map){

console.log(x);

}

//遍历Set

var set = new Set([5, 6, 7]);

for(let x of set){

console.log(x);

}

for...of------值 for...in------下标

7、函数

定义函数

绝对值函数

//定义方法一：

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可以传任意个参数，也可以不传

参数进来是否存在的问题？

假设不存在参数如何规避？

if(typeof x != 'number'){

throw 'Not a Number';

}//手动抛出异常来判断

arguments是一个js免费赠送的关键字

代表传递进来的所有参数是一个数组

let abs = function(x){

console.log("x=>" + x);

for(let i = 0; i < arguments.length; i ++){

console.log(arguments[i]);

}

if(x >= 0){

return x;

}else{

return -x;

}

问题：arguments会包含所有函数，我们有时候想使用多余参数来进行附加操作，需要排除已有参数~

rest

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

function aaa(a, b, ...rest){

console.log("a=>"+a);

console.log("b=>"+b);

console.log(rest);

}

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

变量作用域

在JavaScript中，var定义变量实际是有作用域的

假设在函数体中声明，则在函数体外不可以使用~（闭包）

function aa(){

var x = 1;

x = x + 1;

}

//x = x + 2; ReferenceError: x is not defined

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

function aa(){

var x = 1;

x = x + 1;

}

function aa1(){

var x = 'A';

x = x + 1;

}

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

function aa(){

var x = 1;

function aa1(){

var y = x + 1; //2

}

var z = y + 1; //Uncaught ReferenceError: z is not defined

}

假设内部函数变量与外部函数变量重名

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

function aa(){

var x = 1;

function aa1(){

var x = 'A';

console.log('inner'+x);

}

console.log('outer'+x);

aa1()

}

aa()

提升变量作用域

function qq(){

var x = "x" + y;

console.log(x);

var y = 'y';

}

结果：xundefined

说明：js执行引擎，自动提升了y的声明，但是不会提升y的复制

等价于

function qq(){

var y;

var x = "x" + y;

console.log(x);

y = 'y';

}

故，js习惯于把所有变量声明在最前面

全局函数

var x = 1;

function f(){

console.log(x);

}

f();

console.log(x);

全局对象 window

var x = 'xxx';

alert(x);

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

alert()这个函数本身也是一个window的变量

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

规范：

由于所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，冲突->如何能减少冲突？

//唯一全局变量

var QiqiApp = {};

//定义全局变量

QiqiApp.name = 'ccc';

QiqiApp.add = function (a, b){

return a + b;

}

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

jQuery 等价于$()

局部作用域let

function aaa(){

for (var i = 0; i < 100; i++) {

console.log(i);

}

console.log(i + 1);//i出了作用域还能用?

}

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

function aaa(){

for (let i = 0; i < 100; i++) {

console.log(i);

}

console.log(i + 1);//ReferenceError: i is not defined

}

建议使用let去定义局部作用域的变量

常量const

const PI = '3.14';//只读变量

方法

方法就是把函数放在对象内部，对象只有两个东西：属性和方法

var ccc = {

name:'cc',

birth:2002,

age:function (){//方法

//今年-出生的年

var now = new Date().getFullYear();

return now-this.birth;

}

属性：ccc.name

方法：ccc.name()-------方法一点要带括号

this.代表什么？------拆开上面代码

function getAge(){//方法

//今年-出生的年

var now = new Date().getFullYear();

return now-this.birth;

}

var ccc = {

name:'cc',

birth:2002,

age:getAge

}

// ccc.age()

// 21

// getAge()

// NaN ------window

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

apply

在js中可以控制this指向

function getAge(){//方法

//今年-出生的年

var now = new Date().getFullYear();

return now-this.birth;

}

var ccc = {

name:'cc',

birth:2002,

age:getAge

}

getAge.apply(ccc,[])//this指向了ccc，参数为空

// getAge.apply(ccc,[])

// 21

// ccc.age()

// 21

// getAge()

内部对象

标准对象

typeof123

'number'

typeof'123'

'string'

typeoftrue

'boolean'

typeofNaN

'number'

typeof []

'object'

typeof {}

'object'

typeofMath.abs

'function'

typeofundefined

'undefined'

Date

基本使用

varnow=newDate();//Mon Jan 02 2023 14:09:29 GMT+0800 (中国标准时间)

now.getFullYear();//年

now.getMonth();//月---0-11代表1-12月

now.getDate();//日

now.getDay();//星期几

now.getHours();

now.getMinutes();

now.getSeconds();

now.getTime();//时间戳，全世界统一，1970.1.1 0:00:00到当前的毫秒数

console.log(newDate(1672640201002))//时间戳转回时间

转换

now=newDate(1672640201002)

MonJan02202314:16:41GMT+0800 (中国标准时间)

now.toLocaleString//注意调用是一个方法，不是属性

ƒtoLocaleString() { [nativecode] }

now.toLocaleString()

'2023/1/2 14:16:41'

now.toGMTString()

'Mon, 02 Jan 2023 06:16:41 GMT'

JSON

早期，所有数据传输习惯使用XML文件

JSON是一种轻量级的数据交换格式

简洁和清晰的层次结构使得JSON成为理想的数据交换语言

易于人阅读和编写，同时也易于机器解析和生成，并有效的提升网络传输效率

在JavaScript中一切皆为对象，任何js支持的类型都可以用JSON来表示

对象都用{ }

数组都用[ ]

所有的键对都用key:value

JSON字符串和js对象的转化

varuser= {

name:"ccc",

age:3,

sex:'男'

}

//对象转换为JSON字符串{"name":"ccc","age":3,"sex":"男"}

varjsonUser=JSON.stringify(user)

//json字符串转化为对象参数为json字符串

varobj=JSON.parse('{"name":"ccc","age":3,"sex":"男"}')

JSON和js对象的区别

varobj= {a:'hh',b:'hello'};

varjson='{"a":"hh","b":"hello"}'

Ajax

原生的js写法xhr异步请求

jQuey封装好的方法$("#name").ajax("")

axios 请求

8、面向对象编程

定义一个类

classStudent{

constructor(name) {

this.name=name;

}

hello(){

alert('hello')

}

varqiqi=newStudent("qiqi");

qiqi.hello()

继承

classStudent{

constructor(name) {

this.name=name;

}

hello(){

alert('hello')

}

classXiaoStudentextendsStudent{

constructor(name,grade) {

super(name);

this.grade=grade;

}

myGrade(){

alert("我是一个小学生")

}

varqiqi=newXiaoStudent("qiqi",1);

本质：查看对象类型

拓展：原型链

9、操作BOM对象

浏览器介绍

JavaScript和浏览器的关系：

JavaScript的诞生就是为了能够在浏览器中运行

B：浏览器对象模型

（内核）

IE 6~12

Chrome

Safari

FireFox （Linux）

第三方网站

QQ浏览器

360浏览器

window(重要)

window代表浏览器窗口

window.alert(1)......

Navigator

Navigator封装了浏览器的信息

navigator.appVersion......

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

screen

screen.width

location(重要)

location代表当前页面的URL信息

//主机

host: "lenovo.ilive.cn"

//当前指向位置

href: "https://lenovo.ilive.cn/?f=stee"

//重写加载（方法）---刷新网页

reload: ƒreload()

//设置新的地址

location.assign('...')

//协议

protocol: "https:"

document

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

document.title

"联想酷生活"

document.title='柒天'

"柒天"

获取具体的文档树节点

<dlid=""app">

<dd>javaEE</dd>

<dd>javaSE</dd>

</dl>

vardl=document.getElementById('app');

</script>

document.cookie获取客户端的一些本地信息

document.cookie

"unique_id=81c102b7-35d8-462d-ae68-ce9d16f9a95a;...

劫持cookie原理

<scriptsrc="aa.js"></script>

服务器端可以设置cookie：httpOnly

history代表浏览器的使用记录

不建议使用

history.back()

history.forward()

10、操作DOM对象

DOM：文档对象模型

核心

浏览器网页就是一个Dom树形结构

更新：更新Dom节点

遍历：得到Dom节点(get)

删除：删除一个Dom节点

添加：添加一个新的节点

要操作一个Dom节点，就必须先获得一个Dom节点

<divid="father">

<pid="p1">p1</p>

<pclass=""p2>p2</p>

</div>

varh1=document.getElementsByTagName('h1');

varp1=document.getElementById('p1');

varp2=document.getElementsByClassName('p2');

varfather=document.getElementById('father');

varchildrens=father.children;//获取父节点下的所有子节点

// father.firstChild

// father.lastChild

</script>

这是原生代码，之后尽量使用Query();

更新节点

<divid="id1">

</div>

letid1=document.getElementById('id1');

id1.innerText='abc';

</script>

//修改文本的值

id1.innerText='456'

//解析HTML的文本标签

id1.innerHTML='<strong>123</strong>'

//操作js

id1.style.color='red'

id1.style.fontSize='20px'

id1.style.padding='2em'

删除节点

步骤：先获取父节点，再通过父节点删除自己

<divid="father">

<pid="p1">p1</p>

<pclass=""p2>p2</p>

</div>

varself=document.getElementById('p1');

varfather=p1.parentElement;

father.removeChild(self)

father.removeChild(father.children[0])

</script>

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

插入节点

我们获得了某个Dom节点，假设这个Dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，我们就不能在那样了，需要追加

<pid="js">javascript</p>

<divid="list">

<pid="se">javase</p>

<pid="ee">javaee</p>

<pid="me">javame</p>

</div>

//追加已存在的节点

let

js=document.getElementById('js');

list=document.getElementById('list');

//通过JS创建一个新的节点

let newP=document.createElement('p');

newP.id='newP';

newP.innerText='Hello world';

//创建一个标签节点(通过这个属性，可以设置任意的值)

letmyScript=document.createElement('script');

myscript.setAttribute('type','text/javascript');

letmyStyle=document.createElement('style');//创建一个空style标签

myStyle.setAttribute('type','text/css');

myStyle.innerHTML='body{background-color:pink;}';//设置标签内容

document.getElementsByTagName('head')[0].appendChild(myStyle);

</script>

list.appendChild(js)；

list.appendChild(newP);

list.appendChild(myscript);

insert

<pid="js">javascript</p>

<divid="list">

<pid="se">javase</p>

<pid="ee">javaee</p>

<pid="me">javame</p>

</div>

letee=document.getElementById('ee');

js=document.getElementById('js');

list=document.getElementById('list');

//要包含的节点.insertBefore(newNode,targetNode)

list.insertBefore(js,ee);

</script>

11、操作表单（验证）

表单是什么：from Dom树

文本框 text

下拉框 <select>

单选框 radio

多选框 checkbox

隐藏域 hidden

密码框 password

......

表单的目的：获得信息

获得要提交的信息

<formaction="#"method="post">

<p>

</p>

//多选框的值已经确定

<p>

<inputtype="radio"name="sex"value="man">男

<inputtype="radio"name="sex"value="women">女

</p>

</form>

letinput_text=document.getElementById('username');

</script>

//得到输入框的值：input_text.value;

//修改输入框的值：input_text.value = '2'

//多选框通过input下标获取

//对于单选框，多选框等固定的值，boy_radio.value只能获取当前的值

//boy_radio.checked查看返回的结果是否为true

//想要某值被选中boy_radio.checked=true

提交表单

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Title</title>

<scriptsrc="" target="_blank">https://cdn.bootcss.com/blueimp-md5.min.js"></script>

</head>

<body>

<formaction="#"method="post">

<p>

</p>

<p>

</p>

<buttontype="submit"οnclick="aaa()">提交</button>

</form>

functionaaa(){

letuname=document.getElementById('username');

letpwd=document.getElementById('password');

console.log(uname.value);

console.log(pwd.value);

//MD5算法

pwd.value=md5(pwd.value);

console.log(pwd.value);

// pwd.value = '123321';

}

</script>

</body>

</html>

<formaction="#"method="post">

<p>

</p>

<p>

</p>

<inputtype="hidden"id="md5-password"name="password">

<buttontype="submit"οnclick="aaa()">提交</button>

</form>

functionaaa(){

letuname=document.getElementById('username');

letpwd=document.getElementById('input-password');

letmd5pwd=document.getElementById('md5-password');

md5pwd.value=md5(pwd.value);

returnfalse;

}

</script>

表单绑定提交事件

οnsubmit=绑定一个提交检测的函数true,false

将这个结果返回给表单，使用onsubmit接收

<formaction="#"method="post"οnsubmit="return aaa()">

12、jQuery

JavaScript和jQuery库

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

获取

https://www.jquery123.com/

https://jquery.com/download/

https://www.jq22.com/cdn/

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Title</title>

<scriptsrc="" target="_blank">http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

</head>

<body>

</body>

</html>//在线cdn引入

公式：$(selector).action()

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Title</title>

<scriptsrc="lib/jquery-3.4.1.js"></script>

</head>

<body>

<ahref=""id="test-jquery">點我</a>

document.getElementById('id');

$('#test-jquery').cick(function (){

alert('hello jquery');

})

</script>

</body>

</html>

js原生选择器

标签： document.getElementsByTagName()

id：document.getElementById()

类：document.getElementsByClassName()

jQuery

标签：$('p').click()

id：$('#id1').click()

类：$('.class').click()

文档工具站：http://jquery.cuishifeng.cn/

事件

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

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Title</title>

<scriptsrc="lib/jquery-3.4.1.js"></script>

<style>

#divMove{

width: 500px;

height: 500px;

border: 1pxsolidred;

}

</style>

</head>

<body>

mouse:<spanid="mouseMove"></span>

<divid="divMove">

在這裡移動鼠標試試

</div>

$(function (){

$('#divMove').mousemove(function (e){

$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);

})

</script>

</body>

</html>

操作Dom

节点文本操作

$('#test-ul li[name=java]').text();

$('#test-ul li[name=java]').text('shezhi');

$('#test-ul').html();

$('#test-ul').html('<strong>123</strong>');

css的操作

$('#test-ul li[name=java]').css("color","red");

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

$('#test-ul li[name=java]').show()

$('#test-ul li[name=java]').hide()

77ac

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础学习

JavaScript基础学习
复制链接

扫一扫

JavaScript基础学习

1、什么是JavaScript

2、快速入门

2.1引入JavaScript

2.2基本语法入门

2.3数据类型

字符串

数组

对象

3、严格检查模式strict

4、流程控制

if判断

循环

5、Map和Set

6、iterator迭代

7、函数

定义函数

调用函数

变量作用域

方法

内部对象

Date

JSON

Ajax

8、面向对象编程

定义一个类

继承

9、操作BOM对象

浏览器介绍

10、操作DOM对象

更新节点

删除节点

插入节点

11、操作表单（验证）

12、jQuery

“相关推荐”对你有帮助么？