javascript基础(javascript基本框架)

javascript基础

1概述：
JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
诞生于1995年，当时的主要目的是验证表单的数据是否合法。
JavaScript本来应该叫Livescript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript。（也就是说js跟java没有关系，当时只是想借助java的名气）。
javaScript被用来改进设计、验证表单、检测浏览器、创建cookies，等等。JavaScript是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比如：InternetExplorer、Maxthon、Mozilla、Firefox、Netscape、Chrome和Opera等。
常用1修改html及css代码（2）验证表单
嵌入方法
1.1.内嵌式
理论上js可以写在任何第一个地方但是一般写在head标签里或者body下
1.2.外链式
首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。
1.3.行内式
直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。onclick单击事件
点我呀!
语句
1.在编程语言中，这些编程指令被称为语句。
JavaScript程序就是一系列的编程语句。
注释：在HTML中，JavaScript程序由web浏览器执行。
2.JavaScript语句由以下构成：
值、运算符、表达式、关键词和注释。
3.用分号（;）分隔JavaScript语句。
注释
单行注释：//注释语句快捷键ctrl+/
多行注释：/*注释语句*/快捷键ctrl+shift+/
注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！
变量
变量是用于存储信息的”容器”
javascript单双引号没区别
vara=’moonsec’;
JavaScript保留关键字
Javascript的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为Javascript以后扩展使用。
JavaScript作用域
6.1.Javascrpt局部变量
局部作用域变量在函数内声明，变量为局部作用域。
functionmyFunction(){
varcarName=“Volvo”;
//函数内可调用carName变量
}
6.2.JavaScript全局变量
变量在函数外定义，即为全局变量。
全局变量有全局作用域:网页中所有脚本和函数均可使用。
varcarName=”Volvo”;
//此处可调用carName变量
functionmyFunction(){
//函数内可调用carName变量
}
数据类型
数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包裹起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（特殊取值null）
未定义型：undefined
对象类型数组字典
7.1.判断类型
vara=“iamstring.”;
varb=222;
varc=[1,2,3];
vard=newDate();
vare=function(){alert(111);};
varf=function(){this.name=“22”;};
alert(typeofa)————>string
alert(typeofb)————>number
alert(typeofc)————>object
alert(typeofd)————>object
alert(typeofe)————>function
alert(typeoff)————>function
7.2.数字类型（Number）
只有一种数字类型，数字可以是小数，也可以的整数
以0开头默认使用8进制来表示我的这个数字
以0x开头默认使用16进制来表述我的这个数字
如果以-开头默认以负数
如果我带有e：以科学计数法来解析我的这个数字
parseInt(…)将某值转换成数字，不成功则NaN
parseFloat(…)将某值转换成浮点数，不成功则NaN
特殊值：
NaN，非数字。可使用isNaN(num)来判断。
Infinity，无穷大。可使用isFinite(num)来判断。
7.3.字符串型（string）
字符串是存储字符的变量，用来表示文本的数据类型，程序中的字符串是包含单引号/双引号的，由单引号来界定我双引号中包含的字符串
obj.length长度
obj.trim()移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)返回字符串中的第n个字符
obj.concat(value,…)拼接
obj.indexOf(substring,start)子序列位置
obj.lastIndexOf(substring,start)子序列位置
obj.substring(from,to)根据索引获取子序列
obj.slice(
,end)切片
obj.toLowerCase()大写
obj.toUpperCase()小写
obj.split(delimiter,limit)分割
obj.search(regexp)从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp)全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp,replacement)替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$’：位于匹配子串右侧的文本
$：直接量：直接量：直接量符号
7.4.布尔类型（boolean）
一般是用在流程控制语句中，字符串和数字类型都是无穷多个，然而我们的布尔数据类型只有两个：true和false
这两个个值一般用于说明某个事物是真或者假
js一般用布尔类型来比较所得到的结果
布尔类型仅包含真假，
==比较值相等
!=不等于
===比较值和类型相等
!===不等于
||或
&&且
7.5.null（空）
null
关键字null是一个特殊的值，它表示变量为空值，用来定义空的或者是不存在的引用。
如果试图去引用一个没有定义的值，就会返回一个null。
这里注意一点：null并不等于””或者0
7.6.undefined（未定义）
这个值表示变量不含有值，没有定义的值，或者被定义了一个不存在的属性值
！null和undefined区别：
null它表示一个变量被赋予一个空值，而undefined是表示变量还没有被赋值
7.7.数组
1、数组内可以存放任意数据类型的数据（本质上它也是对象）
2、数组元素不赋值的情况下值为undefined
3、如果数组打印的时候，元素不赋值””
4、访问数组范围之外的元素，不会出现越界的问题，undefined
5、定义数组大小，照样可以添加更多元素
7.7.1.定义数组的方法：
1、vararr=[]//定义一个空数组
2、vararr=[10,20,{“name”:“tomy”,“age”:19},0.1,“string”,true,[“aaa”,“bbb”]]//定义的同时赋值
3、vararr=newArray();//定义一个空数组
4、vararr=newArray(10,20,{“name”:“tomy”,“age”:19},0.1,“string”,true,[“aaa”,“bbb”])//定义的同时赋值
5、vararr=newArray(10)//定义一个长度为10的数组
7.7.2.数组的操作
obj.length数组的大小
obj.push(ele)尾部追加元素
obj.pop()尾部获取一个元素
obj.unshift(ele)头部插入元素
obj.shift()头部移除元素
obj.splice(start,deleteCount,value,…)插入、删除或替换数组的元素
obj.splice(n,0,val)指定位置插入元素
obj.splice(n,1,val)指定位置替换元素
obj.splice(n,1)指定位置删除元素
obj.slice()切片
obj.reverse()反转
obj.join(sep)将数组元素连接起来以构建一个字符串
obj.concat(val,…)连接数组
obj.sort()对数组元素进行排序
8.函数
JavaScript函数语法
JavaScript函数通过function关键词进行定义，其后是函数名和括号()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：
varx=myFunction(7,8);//调用函数，返回值被赋值给x
functionmyFunction(a,b){
returna*b;//函数返回a和b的乘积
}
普通函数：
functionfunc(arg){
returnarg+1;
}
varresult=func(1);
console.log(result);varresult=func(1);
console.log(result);
匿名函数（没有名字的函数称为匿名函数）
setInterval(function(){
console.log(123);
},500)
自执行函数（创建函数并且自动执行）
(function(arg){
console.log(arg);
})(1);
字典
字典是一种以键-值对形式存储数据的数据结构
vardict={‘k1’:“moonsec”,‘k2’:‘moon’,‘age’:18};
输出字典元素
for(varitemindict){
console.log(dict[item]);
}
获取指定元素
dict[‘age’]获取key为age的元素
赋值
dict[‘age’]=10
删除元素
deletedict[‘one’];
deletedict.age;
js的序列化和反序列化
Json与字符串的转换
把对象转为字符串
JSON.stringify()
把字符串转为数组
newli=JSON.parse()
序列化即js中的Object转化为字符串
使用toJSONString
varlast=obj.toJSONString();//将JSON对象转化为JSON字符
使用stringify
varlast=JSON.stringify(obj);//将JSON对象转化为JSON字符
反序列化即js中JSON字符串转化为Object
转义
?decodeURI()URl中未转义的字符
?decodeURIComponent()URI组件中的未转义字符
?encodeURI()URI中的转义字符
?encodeURIComponent()转义URI组件中的字符
?escape()对字符串转义
?unescape()给转义字符串解码
?URIError由URl的编码和解码方法抛出
eval
eval()函数可计算某个字符串，并执行其中的的JavaScript代码。
时间
Date对象
varmyDate=newDate();
myDate.getYear();//获取当前年份(2位)
myDate.getFullYear();//获取完整的年份(4位,1970-???)
myDate.getMonth();//获取当前月份(0-11,0代表1月)所以获取当前月份是myDate.getMonth()+1;
myDate.getDate();//获取当前日(1-31)
myDate.getDay();//获取当前星期X(0-6,0代表星期天)
myDate.getTime();//获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();//获取当前小时数(0-23)
myDate.getMinutes();//获取当前分钟数(0-59)
myDate.getSeconds();//获取当前秒数(0-59)
myDate.getMilliseconds();//获取当前毫秒数(0-999)
myDate.toLocaleDateString();//获取当前日期
varmytime=myDate.toLocaleTimeString();//获取当前时间
myDate.toLocaleString();//获取日期与时间
加一天
vardateTime=newDate();
dateTime=dateTime.setDate(dateTime.getDate()+1);
dateTime=newDate(dateTime);
dateTime=dateTime.setDate(dateTime.getDate()+1);
面向对象
JavaScript是一种基于原型的语言，它没类的声明语句，比如C++或Java中用的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反，JavaScript可用方法作类。定义一个类跟定义一个函数一样简单。在下面的例子中，我们定义了一个新类Person。
第一种方法
functionPerson(name){
//构造函数里面的方法和属性
this._name=name;
this.getName=function(){
console.log(this._name);
};
this.setName=function(name){
this._name=name;
};
}
varp=newPerson(“张三”);
p.getName();//张三
p.setName(“李四”);
p.getName();//李四
对于上述代码需要注意：
Person充当的构造函数
this代指对象
创建对象时需要使用new
第二方法
//定义类classPerson{
//类的构造函数，实例化的时候执行，new的时候执行
constructor(name){
this._name=name;
}
getName(){
console.log(this._name);
}
setName(name){
this._name=name
}
}
letp=newPreson(‘张三’)
p.getName();//张三
p.setName(‘李四’);
p.getName();//李四
原型
我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
这个属性对应着一个对象，这个对象就是我们所谓的原型对象
如果函数作为普通函数调用时prototype没有任何作用
当函数以构造函数调用时，它所创建的对象中都会有一个隐含的的属性
指向该构造函数的原型我们可以通过__proto__来访问该属性
我们可以将对象中公有的内容，统一设置到原型对象中
functionPersion(username,age){
}
//console.log(Persion.prototype);
varp=newPersion();
console.log(p.proto==Persion.prototype);
定义原型变量和原型变量
functionPersion(username,age){
}
//console.log(Persion.prototype);
Persion.prototype.a=‘女’;
Persion.prototype.Sayname=function(){
returnPersion.name;
}
varp1=newPersion(‘moonsec’);
varp2=newPersion();
alert(p1.Sayname());
运算符
用于执行程序代码运算，会针对一个以上操作数来进行
16.1.算术运算符
/%++–
字符串拼接使用“+”
16.2.比较运算符
<
==
！=
<=
=
===全等于：将数值以及数据类型一并比较
！==不全等于：将数值以及数据类型一并比较
16.3.赋值运算符
+=
-=
=
/=
%=
a=a+2;>a+=2
a=a-2;>a-=2
a=a2;>a*=2
a=a/2;>a/=2
a=a%2;==>a%=2
16.4.逻辑运算符
&&全真为真
||一个为真就是真
！取反
16.5.三元运算符（三目运算符）
表达式1?表达式2:表达式3
当我的表达式1成立时执行表达式2否则执行表达式3
varmax=2>1?‘>’:‘<’;
console.log(max);
流程控制语句
17.1.if语句
if(条件){
函数体
}
17.2.ifelse语句
if(条件){
函数体1
}else{
函数体2
}
17.3.if…elseif…else语句
if(条件1){
}elseif(条件2){
}elseif(条件n){
}else{
}
17.4.switch语句:多分支语句
switch(表达式){
casen:
代码块
break;
casen:
代码块
break;
default:
默认代码块
}
switch(newDate().getDay()){
case6:
text=“今天是周六”;
break;
case0:
text=“今天是周日”;
break;
default:
text=“期待周末~”;
}
17.5.循环结构：
1、while循环：先判断条件当条件成立再执行
while(循环成立条件){
…
}
17.6.do…while循环
do…while循环:不论条件成不成立先执行一遍再判断
do{
…
}while(循环成立条件)
17.7.for循环
17.8.forin循环
continue：
跳过当前循环，直接进入循环的下一个步骤
break:
结束循环
JS操作DOM
18.1.什么是DOM？
DOM（documentobjectmodel）文档对象模型，是针对HTML和XML的一个API（应用程序接口）。DOM给我们描述了一个具有层次化特点的节点树，允许开发人员增删改查页面的某些部分。
在这里插入图片描述
?JavaScript能够改变页面中的所有HTML元素
?JavaScript能够改变页面中的所有HTML属性
?JavaScript能够改变页面中的所有CSS样式
?JavaScript能够对页面中的所有事件做出反应
18.2.DOM查找元素
document获取节点的基本方法
document.getElementById(‘id’);//通过id来获取元素,返回指定的唯一元素。
document.getElementsByName(“name”);//通过name来获取元素，返回name=’name’的集合。
.document.getElementsByClassName(“classname”)//用classname来获取元素，返回的是一个class=”classname”的集合(不兼容IE8及以下)。
document.getElementsByTagName(‘div’);//用元素的标签获取元素，返回所有标签=“div”的集合。
18.2.1.查找
直接查找
varobj=document.getElementById(‘id’);
间接查找
文件内容操作
innerText仅文本
innerHTML全内容
value
inputvalue获取当前的值
select获取选中的value的值document.getElementById(‘s1’).selectedIndex=1
Textarea获取value的值
18.2.2.操作
样式操作
className列出样式字符串
classList列出样式返回数组
classList.add增加样式
classList.remove删除样式
obj.style.fontSize=’16px’;
属性操作
获取属性
getAttribute()
增加设置一个属性
添加属性
setAttribute(‘xxx’,‘alexe’)
删除属性
removeAttribute(value)
创建标签并添加到html中
第一种方式字符串方式
insertAdjacentHTML()
<inputtype=”button”value=”+”onclick=”add();”/><divid=”div1″><p><inputtype=”text”/></p></div><script>functionadd(){vartag=”<p><inputtype=’text’></p>”document.getElementById(‘div1’).insertAdjacentHTML(‘beforeEnd’,tag);}</script>
</body>
有四种值可用：
?beforeBegin:插入到标签开始前
?afterBegin:插入到标签开始标记之后
?beforeEnd:插入到标签结束标记前
?afterEnd:插入到标签结束标记后
第二种方式对象的方式
document.createElement
<inputtype=”button”value=”+”onclick=”add2();”/><divid=”div1″><p><inputtype=”text”/></p></div><script>functionadd(){vartag=”<p><inputtype=’text’></p>”document.getElementById(‘div1’).insertAdjacentHTML(‘beforeEnd’,tag);}functionadd2(){vartag=document.createElement(‘input’);tag.setAttribute(‘type’,’text’);tag.style.color=’red’;varp=document.createElement(‘p’);p.appendChild(tag)document.getElementById(‘div1’).appendChild(p);}</script>appendChild在节点后面增加一个子节点
提交表单
任何标签都可以通过dom提交
getElementById(‘id’).submit()<formid=’f1’action=”https://www.moonsec.com/”><inputtype=”submit”value=”提交”/><inputtype=”button”value=”botton”onclick=”Sub();”/><aonclick=”Sub();”>提交</a></form><script>functionSub(){document.getElementById(‘f1’).submit();}</script>
其他
console.log终端输出
alert弹出框
confirm确认框标题truefalse
url和刷新
location.href获取url
location.href=‘url’重定向
location.reload()重新加载
定时器
setInterval()
clearInterval()
<inputid=”i1″type=”text”/><inputtype=”button”value=”停止”onclick=”stop();”><script>functionsetTime(){vartag=newDate();document.getElementById(‘i1’).value=tag;}varobj=setInterval(‘setTime()’,’500′);functionstop(){clearInterval(obj);}
只执行一次
setTimeout()
clearTimeout()
事件绑定事件两种方式a.直接标签绑定直接标签绑定οnclick=”先获取dom对象，然后进行绑定document.getElementById(‘xxx’).onclick()

javascript基本框架

JavaScript是最盛行的编程言语
StackOverflow最新的开发者查询结果表明，JavaScript是最盛行的编程言语。超越65%的专业开发者表明他们广泛运用JavaScript进行开发，它也是GitHub上运用最多的言语之一。
与HTML和CSS相同，JavaScript是网上运用的核心技术之一。它还用于其他开发环境，比如与Node.js一同用于后端开发、与ReactNative和Ionic结构一同用于移动开发以及与Phaser等JavaScript引擎一同用于游戏开发。
此外，JavaScript还与Electron等结构一同用于桌面开发。越来越多的人采用它归因于它易于学习、施行以及得到开发者社区的大力支撑。
最盛行的JavaScript结构
下面是2023年五种最盛行的JavaScript结构。
1.Node.js
Node.js是最盛行的JavaScript结构。42%的受访者运用它，专业开发者和学习编程的人运用它的份额适当。
其事情驱动、非堵塞I/O模型答应高性能并发操作，因而成为构建实时应用程序、流服务和数据密集型系统的理想选择。这些功能促进它广受欢迎。
运用Node.js的一些公司包含Netflix、LinkedIn、优步和Trello。
2.React.js
React是第二盛行的JavaScript结构，40.58%的StackOverflow查询受访者表明他们广泛运用React。在专业开发者当中，React的盛行程度排名榜首，超越Node.js。据BuiltWith统计数据显现，截至2023年6月，近1200万个网站是用React构建的。
React是一个由Facebook开发的开源JavaScript库，用于构建高响应性的用户界面（UI）。它是声明式的和基于组件的，这意味着您能够在短时间内重用组件以创立复杂的UI。
关于新开发者来说，React比Angular等其他结构更简略学习和运用，而Angular自成一体。它有很多的文档、指南和不断壮大的社区，帮助开发者赶快上手。
React在不断发展，开发周期很短。因而开发者很难跟上脚步，由于他们只好不断地从头学习新特性，有时文档更新得不够快。
运用React构建的大型网站包含爱彼迎、Dropbox、Asana和BBC。
3.jQuery
jQuery是第三流行的Web结构。它是一个开源JavaScript库，您能够运用它来简化与DOM（文档对象模型）的交互。它能够帮助您轻松地导航DOM树。值得注意的是，查询显现，大多数jQuery用户期望下一年运用React或Node.js。
jQuery易于学习，自2006年以来就面世，因而它有一个庞大的开发者社区。但是，jQuery无法与供给高级功能的现代Web结构相媲美。它关于开发简略的应用程序很有用，但如果用于开发大型应用程序，可能导致难以保护的庞大代码库。
4.Express
Express是继jQuery之后第四盛行的JavaScript结构。它是用于后端开发的精约快速的JavaScript结构。您能够将它与Node.js（JavaScript运行时环境）一同运用，以创立高效的Web应用程序。
Express供给了一种简略的方法来管理路由、设置中间件包以及在服务器端代码中集成插件。有了Express，您能够创立可充分利用REST的API与其他应用程序集成，并动态地为Web供给静态HTML文件。
在代码库中运用Express的公司有Twitter、Intuit和埃森哲。
5.Angular
Angular是第五盛行的JavaScript结构。它是谷歌于2016年推出的开源结构。您能够在前端或后端运用它来创立页面加载速度更快的动态单页应用程序（SPA）和渐进式Web应用程序（PWA）。
Angular供给了双向数据绑定等特性，支撑模型和视图之间的实时同步，拥有内置依靠项注入，并支撑TypeScript。但是关于初学者来说，学习Angular比React更具挑战性，由于其学习曲线更峻峭。正由于如此，只要13%的StackOverflow查询受访者期望运用Angular。
运用Angular创立网站的比如有Freelancer、IBM和PayPal。