javaScript

作者: 开心的小哈 | 来源:发表于2022-03-29 20:48 被阅读0次

JavaScript-01
锋利的 jQuery | 第1章_认识 jQuery
javascript学习思维导图
javaScript 基础知识
JavaScript 基础
JS——Hoisting(提升)
2018-06-22
JavaScript基础
JavaScript 学习脑图
JavaScript学习指南

javaScript概念：运行在客户端浏览器中的。每一个浏览器都有javaScript的解析引擎
脚本语言：不需要编译，直接可以被浏览器解析执行了；
功能：
可以来增强用户和HTML页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验；
发展史：

1992年，nombase公司，开发出一门客户端脚本语言，专门用户表单的校验，命名为：C--，后台更名为：ScriptEase
1995年，netscape（网景）公司，开发了一门客户端脚本语言：LiveScript。后来请来了sun公司的专家，修改LiveScript，命名为：javaScript
1996年，微软抄袭javaScript开发出Jscript语言
1997年，ECMA（欧洲计算机制造商协会）ECMASScript，所有客户端脚本语言的标准。

JavaScript=ECMASScript+javaScript自己特有的东西（BOM+DOM）
javaScript有以下特点：
简单性：js是简化的编程语言，变量类型简单，不声明也能使用。
基于对象：js不完全面向对象，不支持类的集成，是基于对象而不是面向对象的语言。
可移植性性：js可在浏览器不经修改直接运行。
动态性：可用来设计客户端交互动态页面。
安全性：js是一种安全性语言，对本地资源的访问和操作优先，只能通过浏览器实现信息浏览器或动态交互。

JavaScript的自定义对象
js语言是基于对象的语言，并非面对象的语言，js中没有类，只有对象，我们不能像在传统的语言里那样用class来定义类，但我们可利用js的闭包封装机制来实现js中的类。
js自定义对象有两种方式

把函数function当成对象；
用proptotype对象类实现js的自定义对象；

function Person(name  ,gender){
    this.name=name;
    this.gender=gender;

    this.wboaryyou=function(){
        var str="name"+name+"age"+gender;
        return str;
    }
}
var p = new Person('adsf','sadf');
alert(p.wboaryyou);

Person.prototype.age=20;
Person.prototype.getAge=function (){
    return this.age;
}

编写复杂的应用系统代码时，需要采用JS自定义对象，甚至通过闭包封装机制等实现js的面向对象特性：封装、抽象与集成。

ECMASScript

基本语法
1. 与HTML结合方式
  1. 内部js<script>alter("hello word")</script>,标签内容就是js
  2. 外部js<script src="jsee/a.js"></script>通过src引入外部的js文件
  - 注意<script/>可以定义html页面任何地方，但定义的位置会影响执行的顺序；
  - <script/>可以定义多个
2. 注释
  1. 单行注释//注释内容
  2. 多行注释/注释内容/
3. 数据类型
  1. 原始数据类型（基本数据类型）:
    1. number：数字。整数/小数/NaN（）一个不是数字的数字类型
    2. string：字符串。字符/字符串”abc“ ‘abc’ ‘c’
    3. boolean：true和false
    4. null：一个对象为空的占位符
    5. undefined：未定义，如果一个变量没有给初始值，则会被默认赋值为undefined
  2. 引用数据类型：对象
  3. typeof(变量)可以打印该变量的数据类型；
4. 变量
  1. 变量：一小块存储数据的内存空间；
  2. java语言是强类型的语言，javaScript是弱类型的语言，强类型在开辟变量存储空间时，定义了空间将来存储的数据类型，只能存储固定类型的数据
  3. 弱类型，在开辟变量存储空间时，不定义空间将来的存储类型，可以存放任意类型的数据。
  4. 语法 var 变量名=值；
5. 运算符
  1. 一元运算符，只有一个运算符的运算符：++ -- +（正好）
  2. 算数运算符：+ - ** / % % 。。
  3. 赋值运算符：= += -=
  4. 比较运算符：> < >= <= == ===(全等于)
  5. 逻辑运算符：&& || !
  6. 三元运算符：? :
    注意：在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动地将运算数转换其他类型转换
  - 其他类型转number
  - String转number 按照字面转换。如果字面值不是数字，则转为NaN（不是数字的数字）
  - boolean转number：true转1，false转0
6. 流程控制语句
  其他类型转boolean
number：0或NaN为假，其他为真
string：除了空字符串其他都是true
null&undefined：都是false
对象：所有对象都为true
if(obj!=null){//防止空指针异常
}
if(obj){
}
js特殊语法
1.语句以；号结尾
2.变量的定义使用var关键字，也可以不使用，用：定义的变量是局部变量，不用:定义的变量是全局变量（不建议）；
流程控制语句
1.if。。else。。。
switch
在java中switch语句可以接受的数据类型：int byte shor char 枚举，String
在js中switch什么类型的语句都可以接受；
whie
do。。while
for
99乘法表

<html>
<title>123</title>
<style>
td{
border: 1px solid;

}
</style>
<body>
<script>
document.write("<table >");
for(var i=1;i<9;i++){
document.write("<tr>");
for(var j=1;j<=i;j++){
document.write("<td>");
document.write(i+"*"+j+"="+i*j);
document.write("</td>");
}
document.write("<br>");
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>

js中预定义函数
Eval()使用：可以将字符串的数字进行运算例如输入1+2；执行结果返回3；
escape(string)返回字符的编码
parseFloat(floatstring)字符数字变成实数
parseInt(numbestring,radix)字符数字按进制变成整数

基本对象：
string对象
anchor()锚点
var anem=anchor("strart"); 等同于<a name='start'>开始</a>
link()创建一个超链接
var str="石头人";
var hname=str.link("http://www.baidu.com")
document.write(hname)//输出<a href="http://www.baidu.com">石头人</a>
substring(start,end)该字符串包含从start知道end（不包含end）的字符串

indexOf(str)查找srt所在的位置抵押给
还可以使用new String("石头人")来创建对象
charCodeAt()字符转换ASCII码
fromCharCode(Asciicode)ASCII码转换字符

Function:函数对象，
1.创建 var fun=new Function(形式参数，方法体);
2.function 方法名（方法参数）{
方法体
}
特点：方法定义时var可以不用写形参和返回值都可以不用写，方法是一个对象如果存在两个同名方法则会进行覆盖；在js中方法调用的值与方法有关，和参数是列表无关；
在方法生命中有一个内置的隐藏对象，arguments封装了所有参数；
3.var 方法名=function(){};
属性
lenth,代表形参的个数；

array数组对象

var arr=new Array(1,2,3,4)
var arr=new Array(22);
var arr =[1,2,3];
var arr=new Array(); arr[1],arr['2'];

特点：数组的长度是可变的，类型也是可变的
属性：lenth数组的长度；
方法：join（）将数组的元素拼接为字符串；
push（）将数组的尾部添加元素；

Data对象
1.创建
var data=new Date（）
方法：toLocaleString（）返回data对象对于的时间本地字符串格式；
getTime：获取毫秒值。返回当前如期对象描述的时间到1970年前面
var str=d.getFullYear()+"年"+d.getMonth()+"月"+d.getDay()+"天";

Math对象
1.创建：
特点：该对象不用创建可以直接使用Math.方法名
方法：
PI
rendom（）返回0-1之间的随机数（含0不含1）
cell对数进行上舍入
floor对数进行下舍入
round把数四舍五入

RegExp正则表达式对象
单个字符[]如[a],[a-z],
特殊符号代表特殊含义
\d单个数字字符
\w单个单词字符
量词符号:*0此或多次？表示0或1次 +1此或多次；
{m,n}数量m<= >=12，m如果不写则表示最多n此，如果n不写则表示最少m次；
1.创建
1.var reg =new RegExp("正则表达式“)
var reg=/正则表达式/;
开始结束符号：以^ 开始 &结束
2.方法
test(‘dafasdf’):验证字符串是否符合规则，如果符合return true；

Global对象
1.创建：
2.特点:全局对象，这个Global中方法的不需要调用对象可以直接使用，方法名（）
3.方法：encodeURL(),URL编码 decodeURL解码，encodeURLComPonent()编码编码的字符更多，decodeURIcomponent 解码
paresInt()将字符串转换数字
注意判断每一个字符是否是否数字，指导判断不是数字位置，将钱买你的数字转为number
isNaN（）判断是否是nan六亲不认，nan参数的==比较全部为false，需要使用改方法进行判断；
eval()解析成代码判断；

BOM

功能：控制html文档的内容的；
代码：获取页面的标签（元素）对象element
document.getElementById(di值):通过元素的id获取元素对象；
获取对象Element对象

设置属性值：1. 名曲获取的对象是那个？，2.查看API文档，找到那些属性可以设置；
修改标签内容：1. 属性innerHtml设置标签体内容，innerText设置标签里面的文本

事件

gg概念：某些组件被执行了某些操作后，触发某些代码的执行。
如何绑定事件
1. 直接在HTML标签上，指定事件的属性（操作），属性值就是js代码
2. 事件onclick--点击事件
3. <img id=light src="img/off.gif" onclick="fun()">
4. 通过js获取元素对象，指定事件属性，设置一个函数

var openBtn=doucument.getElementById("openbtn")
openBtn.onclick=function(){
open("htts://www,baidu.com")
}

window:窗口对象

创建
方法
1. 与弹出框有关的方法
  alert() 显示带有一段消息和确认按钮的警告框
  confirm（）显示带有一段消息以及确认和取消按钮的对话框，如果用户点击确认按钮则返回true，如果点击取消则返回false
  prompt（）显示可提示用户输入的对话框
  showModaIDialog可以创建模态对话框；允许操作父窗口及自己；
2. 与打开关闭的方法
  1. open()打开一个新窗口，有可能会被拦截哦，返回一个新的window对象
  2. close()谁调用我，我就关闭谁，默认是自己；
3. 与定时器有关的方法
  1. setTimeout（）参数1.js代码或者方法，参数2是毫秒值；只会执行一次；，返回一个id
  2. clearTimeout（）参数1.传入id即可清除；
  3. setInterval（）参数1.js代码或者方法，参数2是毫秒值；循环定时器；，返回一个id
  4. clearInterval（）参数1.传入id即可清除；

navigate("http://www.qq.com")导航到另一个页面，经常使用的功能。

属性
1. 获取其他BOM对象：
  浏览器的属性 navigator.appName获取浏览器名称等；
2. history历史记录对象：
  1. 创建（获取）window.history
  2. 方法：
    1. back（）：加载history列表的前一个url
    2. forward（）加载history列表的后一个url
    3. go（参数）加载history列表中的某一个页面，正数前进访问第几个历史记录，负数后退访问第几个历史记录；
  3. 属性：length 当前窗口历史列表中的url数量
3. location地址栏对象：
  1. 创建（获取）：location，window.location
  2. 方法：reload（）重新加载当前文档
  3. 属性：href设置或返回完整的url
  4. location.search;获取传入的参数?x=5;y=6;
4. Navigator
5. Screen
6. 获取Dom对象document
特点
1. window对象不需要创建可以直接使用window使用。window.方法名（）；
2. window引用可以省略。方法名()

DOM：

HTML Dom 是一个可以让脚本程序动态访问和更新HTML文档内容、结构和样式的技术。他是跨平台、可适应不同程序语言的文件对象模型，采用直观一致的方式，将HTML文档进行模型化处理，是一种提供存取和更新文档内容、结构和样式的编程接口。
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作；
DOM定义了访问HTML和XML文档的标准
W3C DOM 标准被分为3个不同的部分

h核心DOM 针对任何结构化文档的标准
- Document文档对象
- Element元素对象
- Attribute 属性对象
- Text文本对象
- Comment：注释对象
- Node 节点对象，其他5个的父对象
XML DOM 针对XML文档标准模型
HTML DOM 针对HTML文档的标准模型

Document对象

创建（获取）：在HTML dom模型中可以使用window对象来获取
方法：
1. 获取Element对象：
  1. getElementById（）根据id属性值获取元素对象。di属性值一般唯一
  2. getElementsTabName（）根据元素名称获取元素对象们。返回值是一个数组
  3. getElementsClassName（）根据Class属性值获取元素对象们。返回值以一个数组
  4. getElementsByName:根据name属性值获取元素对象们。返回值以一个数组
2. 创建其他的DOM对象
  1. createAttribute(name)
  2. createElement()
  3. createTextNode()
属性:
1. Element元素对象
  1. 创建：通过document来获取和创建
  2. 方法
    1. setAttribute设置属性
    2. removeAttrbute删除属性
      3.Node节点对象，其他5个的父对象
- 特特：所属有dom都可以认为是一个节点
- 方法：
  - appendChild:向节点的子节点列表的结尾添加新的子节点
  - rremoveChild：删除并返回当前节点的指定子节点
  - rreplaceChild：用新系欸但那替换一个子节点
- 属性：
  - parentNode;

attributes节点属性的对象集合
chileNodes子节点的对象集合
DOM树形结构节点有只读属性和读写属性两类。
通过只读属性可以浏览节点，并可获得节点的类型及名称等信息
通过读写属性可以访问文字节点的内容

超链接功能
1.可以被点击：样式
被点击后跳转href指定的url地址
需求保留1功能，去掉2功能
实现 href="javascript:void(0)"

HTML DOM

标签体的设置和获取：innerHTML
使用HTML元素对象的属性
控制元素样式
1. div1.sytle.border="1px solid red";
2. font-Size,则写成fontSize
  也可以使用类选择进行调整样式
  提前定义好来选择器，通过元素的className属性来设置其class样式

常见的事件
event.keyCode获取点击键盘的编码；

onclick：单击事件
ondbclick：双击事件
焦点事件
onblur失去焦点
onfocus元素获取焦点
加载事件
onload一张页面或一幅图像完成加载。
鼠标事件：
onmousedown鼠标按钮被按下
onmouseup鼠标按钮被松开
onmousemove鼠标被移动
onmouseover鼠标移动到某个元素之上
onmouseout鼠标从某个元素一开
键盘事件
onkeydown 某个键盘按钮被按下。
onkeyup 某个键盘按钮被松开
onkeypress某个键盘那妞被按下并松开

ActiveX变成技术
可以通过页面程序自动控制word、excel来帮我们自动完成很多工作！其实，这种变成有一个捷径，就是将要自定完成的工作利用word或exce的录制宏共嗯那个生成VBA代码，在复制粘贴到页面代码中，修改即可。

文档对象的属性
document.URL 获取当前浏览器页面的url地址
document.URLUnencoded;url解码
document.lastModified：显示此网页最后修订日期；
document.bgColor;设置或获取页面颜色
document.cokie
getCookie('name')
document.onselectstart=false;//无法选中
document.oncontextmeun=false;/

JavaScript-01
A 什么是JavaScript JavaScript 定义JavaScript JavaScript基础语法常用...
锋利的 jQuery | 第1章_认识 jQuery
一、JavaScript和JavaScript库 JavaScript简介 JavaScript是Netscape...
javascript学习思维导图
JavaScript 数据类型 JavaScript 变量 Javascript 运算符 JavaScript 流...
javaScript 基础知识
javaScript 基础知识一 JavaScript概述 JavaScript概述 JavaScript是客户...
JavaScript 基础
JavaScript基础 JavaScript简介JavaScript对象 JavaScript简介为什么使用j...
JS——Hoisting(提升)
Javascript Hoisting的概念 Javascript Hoisting：In javascript,...
2018-06-22
javascript之路 01-认识JavaScript 初始JavaScript JavaScript是一种直译...
JavaScript基础
JavaScript简介JavaScript变量JavaScript对象、函数JavaScript数字，字符串Ja...
JavaScript 学习脑图
javascript数据类型 javascript变量 javascript运算符 javascript数组 ja...
JavaScript学习指南
1.1 JavaScript基础概念： JavaScript (ECMAScript) ：JavaScript 是...