Javascript学习笔记

最新推荐文章于 2024-10-07 21:15:54 发布

新云行云

最新推荐文章于 2024-10-07 21:15:54 发布

阅读量129

点赞数

分类专栏：学习笔记文章标签： javascript 大纲

学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Javascript：面向对象事件驱动式的网页脚本语言
标识符：自己取的名字

关键字：系统正在使用的一些指令
（var function new if else for break continute do while…）

保留字(保留住以后等待使用的指令)

数据类型：number string boolean undefined unll symbol object(function)
测试数据类型：typeof instanceof

真：true 非0数字非空字符串 [] Infinity（无穷大）
假：false 0 空字符串 NaN null undefined

闭包：函数嵌套函数，内部函数可以使用外部函数定义的参数和变量及内部其他函数，且其中一个内部函数在外部被调用时构成闭包

事件

事件： javascript事件与event对象的属性: https://www.cnblogs.com/HCT118/p/5607387.html
1，事件是个特殊的属性
2，事件是一个对象
3，子对象是父对象的属性
4，事件对象有兼容
5，事件对象是BOM对象
6，临时事件对象
7，在函数参数中，多出来的第一个形参代表事件对象

事件：
对象.addEventListener(“事件”,函数,false)添加事件监听

client:客户端
event.clientX 获取浏览器可视窗口的x坐标
event.clientY

元素对象.clientHeight:获取高度

screenX 获取用户界面的x坐标
screenY 获取用户界面的y坐标

event.target 事件委托
event.button 判断鼠标按钮
event.keyCode 获取键值

event.stopPropagetion() 阻止事件冒泡
event.preventDefault() 阻止执行与事件关联的默认动作

字符串方法

字符串方法(https://www.jb51.net/article/29547.htm)

字符串1.indexOf(字符串2,起点位置);2在1中的位置
indexOf 索引在什么位置
作用：查找参数的字符串，在字符串对象中的位置
返回值：找到时返回位置（索引值）；找不到返回-1
indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。默认从后面开始找
startWith(字符串,开始字母下标) ：开始的字符串
endsWith(字符串,长度)：结束的字符串
slice(begin,end)：切片返回从原数组中指定开始下标到结束下标之间的项组成的新字符串、-1代表最后一个字符
charAt()方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串。
例如：
var str = “ABC”;
str.charAt(1);
结果：B
charCodeAt(index) 返回字符串指定位置的Unicode编码
fromCharCode() 从一些Unicode字符串中返回一个字符串。
例：String.fromCharCode(65,66,112);
结果：ABp
String.fromCharCode(32599,32988,26631,26159,20667,36924);

substring(start,end)
说明：
start指明子字符串的起始位置，该索引从0开始起算。
end指明子字符串的结束位置，该索引从0开始起算。不包含该下标的字符
substring方法使用start和end两者中的较小值作为子字符串的起始点。如果start或end为NaN或者为负数，那么将其替换为0

substr(start,length)
说明：
start所需的子字符串的起始位置。字符串中的第一个字符的索引为0。
length在返回的子字符串中应包括的字符个数

split(separator,limit)
说明：
separator字符串或正则表达式对象，它标识了分隔字符串时使用的是一个还是多个字符。如果忽略该选项，返回包含整个字符串的单一元素数组。
limit该值用来限制返回数组中的元素个数。
例如：
var str = “AA BB CC DD EE FF”;
alert(str.split(" "，3));
结果：
AA,BB,CC
toUppercase()
toLowercase()
str.trim()//去空格有兼容

数组对象的方法

数组对象的方法：https://www.cnblogs.com/xiaohaowen/p/9935415.html

indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的开头（位置 0）开始向后查找(只找第一个)。不能判断是否有NaN的元素。返回值：找到时返回位置（索引值）；找不到返回-1
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的末尾开始向前查找。
push() 添加元素返回添加之后的数组长度
slice(begin,end) 切片返回从原数组中指定开始下标到结束下标之间的项组成的新数组、-1代表最后一个字符
concat(,)连接两个数组
includes() Array.includes(字符串)函数判断是否包含某一元素 true false
pop()：数组末尾移除最后一项，减少数组的lenght值，然后返回移除的项。无参
shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 无参
unshift():将参数添加到原数组开头，并返回数组的长度
sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。
在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串
var arr = [1,27,16,34,8,100];
console.log( arr.sort( (item1,item2) => item1- item2 ) ) //1 8 16 27 34 100
console.log(arr.sort(function(a,b){return a-b;}))

splice(开始的下标index,删除的length,添加的元素1,添加的元素2…)
一个参数时：splice(下标num) 删除num及之后所有的值
forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身
join("-") 数组转化为字符串（用-隔开);join()

map()方法实现数组中每个数求平方。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
}
console.log(arr2); //[1, 4, 9, 16, 25]

filter()：“过滤”功能，数组中的每一项运行给定函数，[返回满足过滤条件组成的数组]。默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身

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

var arrs = arr.filter(function(item,i,self){
    return self.indexOf(item)  === i;
})
console.log(arrs)  //[5, 3, 6, 2, 4, 8, 21, 0, 1]

存放数据

变量
数组

var arr=[];
arr["name"]="zhangsan";下标可以是个字符串
arr["sex"]="nan";
arr["age"]="18";

for(var a in arr)
{
    console.log(a+":"+arr[a]);
}
//name:zhangsan
//sex:nan
//age:18

json

json javascript对象符号 https://www.cnblogs.com/panmy/p/5925986.html
方法
JSON.stringIfy(对象({}))
JSON.parse(字符串(’{}’)) json字符串转化为JSON

不能存对象(function(){})、NaN、undefined*****************

object={
    
}

var json={'name':'zhangsan','sex':'nan','age':18}//键：值
alert(json.name)/alert(json['name']);
for(var k in json)
{
    console.log(k+":"+json[k]);
}

var json={
        'name':'zhangsan',
        'sex':'nan',
        'age':18,
        sayName:function()
        {
            alert(this,name);
        }
    }

var person=new object();
person.name="zhangsan";
person.sayName=function()
{
    alert(this.name);
}
person.sayName();

元素节点的属性和方法

innerHTML
innerText
id
className
onclick
childNodes[]
children[]

getAttribute() 获取标签中的属性
getProperty() 获取css中的属性
setProperty()  设置css中的属性
setAttribute() 设置标签中的属性
cloneNode() 克隆节点
appendChild() 追加子节点

NaN!=NaN----------true NaN 是munber类型

函数

1，函数的分类
系统内置函数自定义函数
2，什么是函数
3，函数的定义
4，函数调用
5，函数的传参
6，函数的返回值
函数是方法也是对象*****
函数的方法：
call()
apply() (call()与apply()的区别：https://www.cnblogs.com/lengyuehuahun/p/5643625.html)
改变this的指向(第一个参数)

作用域：能够进行读写操作的一个范围
是一个作用域
function(){作用域}
ES6中"{}"内便是作用域
作用域有作用域链
变量提升指的是《先会对var关键字，function关键字定义的代码及函数参数先行初始化》

math 对象
floor方法-向下取整
ceil方法-向上取整

条件表达式：表达式1?表达式2:表达式3

滚动条事件

window.οnscrοll=function()
{
var a=document.documentElement.scrollTop||
document.body.scrollTop;//兼容，获取滚动条与顶部的距离
var a=document.documentElement.scrollLeft||
document.body.scrollLeft;//获取滚动条与左边的距离
}

学习对象方法

0,知道该方法的来自哪个对象
1,掌握方法的作用
2,掌握方法的参数配置（参数的数据类型及参数个数作用）
3,掌握方法的返回值
4,该方法完成后会不会改变原有的对象

mvc:model(模型)view(视图)controller(控制器)
mvvm

this
this指的是该方法属于哪个对象，this就是这个对象
定时器里的this指向window

对象：

本地对象内置对象宿主对象自定义对象
【每个内置对象都是本地对象】
本地对象: Number String Boolean Function Object RegExp Array Date JSON XMLHttpRequest (类)
内置对象：Global Math
宿主对象: Dom(document …)
Bom(window event history location screen narigation console)

var a;//变量都是对象的属性
    function fn()
    {

    }//函数都是对象的方法

类：是实例抽象出来的概念，可以用构造函数表示
实例：由类生成的对象

String.fromCharCode() 类对象方法
str.charCodeAt() 实例对象方法

arguments：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments
也是object！

**************************************全局变量、函数都是属于Global对象
ECMAScript中的Global对象在某种意义上是作为一个终极的“兜底儿对象”定义的。
换句话说，不属于任何其他对象的属性和方法，最终都是它属性和方法。
事实上，没有全局变量和全局函数；所有在全局作用域中定义的属性和函数，都是Global对象的属性，
诸如：isNaN(),isFinite(),pareInt()以及parseFloat()。

日期对象的格式
new Date()
new Date(2018…)

undifined:未定义，不可想象
unll:可用代码处理
null==undefined//true

获取宽度：
style.width
offsetWidth(width+border + padding)
clientWidth(width+左右padding)
outerWidth innerWidth(
window.innerWidth - 返回Window的内容区域宽度，也就是viewport的宽度，不包括scrollbars,toolbars.
window.outerWidth - 返回Window的外部宽度，包括scrollbars, toolbars等等。
)****************** https://blog.csdn.net/qq_42089654/article/details/80515916

offsetLeft/Top(offsetLeft/Top = left/Top + marginLeft/Top)

ajax 异步javascript xml

XMLHttpRequest

三大对话框

alert：警示框     confirm：确认框     prompt：提示框  返回值：undefined
confirm：确认框  确定：返回true  取消：返回false
prompt：提示框   prompt("提示","输入的值")  确定：返回"输入的值"   
这三种 对话框  是window的三个方法




dispaly:flex,grid
游戲框架

Promise--对象