JavaScript基础概览-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43089596/article/details/83275364

JavaScript基础

JavaScript 基础
javaScript 基于对象与驱事件动的具有安全性的脚本语言
基于对象
可以使用JS提供的对象的属性方法，也可以自己创建对象。
面向对象：封装继承多态
基于对象：封装
事件驱动：
事件：针对浏览器页面的所有操作统称为事件如：点击，页面加载，鼠上移标
事件驱动：对应每个事件执行的应用程序称之为事件驱动
脚本语言：弱类型语言
它采用小程序段的方式实现编程。它作为一种解释性语言，不需要进行编译，而是在程序运行过程中逐行地被解释。
与Java的区别：
1.基于对象和面向对象
面向对象：封装继承多态
基于对象封装
可以使用JS提供的对象的属性方法，也可以自己创建对象。
2.解释和编译
Java 需要先编译再执行 JS 不需要编译通过浏览器直接执行
3.强变量和弱变量
Java 变量使用前必须先声明规定他的数据类型
JS 使用前不需要规定数据类型，再代码运行中JS会判断他的数据类型
4.应用方面
JS 多应用与客户端 Java多应用于服务器
服务器 & 客户端？
B/S 与 C/S
Browser(浏览器) / Server（服务器）
淘宝京东贴吧等
Client (客户端) / Server(服务器)
LOL CF 360 各种APP
Js作用：
嵌入动态文本于HTML页面
对浏览器事件做出响应
读写HTML元素
在数据被提交到服务器之前验证数据表单验证
游戏等
特点：
脚本语言
JavaScript是一种脚本语言，它采用小程序段的方式实现编程。它作为一种解释性语言，不需要
进行编译，而是在程序运行过程中逐行地被解释。
基于对象
JavaScript是一种基于对象的语言，这意味着它能运用自己已经创建的对象。
简单性
JavaScript的简单性首先主要体现在它基于Java的基本语句和控制流程，是一种简单而紧凑的语言；其次，它的变量类型是采用“弱类型”，
并未使用严格的数据类型。
动态性
JavaScript是动态的，它可以直接对用户或客户输入做出响应而无需经过服务程序。它对用户的响应是采用以事件驱动的
安全性方式进行的。
JavaScript是一种安全性语言，它不允许访问本地的硬盘，而且不能将数据存入到服务器上；
不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据
的丢失。
跨平台
JavaScript仅依赖于浏览器本身，与操作系统无关，只要是能运行浏览器的计算机，并支持 JavaScript的浏览器就可以正确执行。从而实
现“编写一下，走遍天下” 的梦想。
Js使用方法

页面写入 js文件中不需要写

特殊运算符：
. 用于属性和方法的调用
[] 用于数组下标
, 多个变量或参数的间隔
new 创建新的对象
? ：条件运算符
typeof 用于返回数据类型
算数运算符
+，-，*，/,%,++,–
比较运算符：

=,<=,>,<,==,!=

4.逻辑运算符：
！，&&，||
赋值运算符
=，+=，-=，*=，/=,%=,
字符串运算符

控制语句

if else
switch case
for
while
do while
for( in ) 针对于数组的一个遍历
break 跳出循环
continue 跳出本次循环执行下一次循环
变量
1、命名规则
以字母开头可以由数字_组成不能使用汉字空格 + # 等符号
不能是JS关键字
首字母小写多个单词链接开头字母大写驼峰规则
区分大小写
2、声明变量的关键字 var
3、变量名必须保持唯一，不能重复
全局变量：定义在函数外使用VAR 定义在函数内必须不使用VAR
局部变量：使用Var定义在函数内只能在函数内使用。
函数：
使用 function 函数名(【参数列表】){函数体} 【】可有可无
参数可以为任意个，调用函数传参数可以传任意个，
如果函数有返回值直接使用return
onclick 鼠标点击事件 onblur 失去焦点事件
document.getElementById(“id”) 根据HTML id属性获取元素对象使用.可以调用对象的所有属性
1、计算1加到100的和
2、使用while语句计算1加到100的和
3、打印100以内的偶数序列：02468。。。
4、循环1-100，单数次输出“好好学习！”，偶数次输出“天天向上！”
5、在死循环中用if和break实现连续打印20个*就结束循环。
6、将a,b,c三个整数按它们数值的大小，从小到大的顺序打印显示。
（练习if else语句）

数组

数组对象类型 Array
数组可以存放很多的数据。有数组名代表所有这些数据，而用
数组名[下标]表示其中某个元素（下标从0开始）。

数组的定义方式
<1> 使用new操作符，创建数组的同时赋初值
var 数组名 = new Array（””,””）
<2>先创建指定长度的数组，内容后面再赋值
var 数组名 = new Array(数组的长度)；
<3> 使用方括号，创建数组的同时赋初值
var 数组名 = [元素1，元素2，，，，];
注意：如果()中写的是一个正整数的情况下，那么代表的是数组的长度
数组的遍历：
<1>普通for循环，
<2> for in的使用
for (var 一个下标变量 in 数组名){
alert(数组名[下标变量])；
}
数组的属性：
js只有length属性没有length()
java 数组有length属性和 Strign length();
数组的常用方法：
concat([数组1]) 拼接数组，将一个数组和一个或多个数组拼接返回新的数组
join() 将数组转化为字符串并使用参数的字符分隔，没有参数默认是逗号
pop() 移除数组的最后一个元素并返回该元素
push() 向数组中添加新元素，并返回数组的最新长度
reverse() 返回一个数组元素被反转的数组
toString() 返回一个字符串
sort() 返回一个排序后的数组
二维数组
var 数组名 = new Array(arr1,arr2,·····);
var 数组名 = new Array(数组长度);
var 数组名 = [[值1，值2···],[值1，值2··],[],[]]
二维数组横坐标越界报错纵坐标越界返回undefined 一维数组下标越界返回undefined

常用事件

内建函数
isNaN(is not a number) 判断参数是不是不是数字 ,参数是数字返回false，不是数字返回true ，
数值类型字符串
parseInt()
剖析字符串从左往右，返回数值类型字符，如果找到非数值类型，停止剖析，立刻返回剖析结果，如果一开
始就是非数值类型，返回NaN not a number,不识别小数点
parseFloat() 可以识别小数点
number() 将数值类型字符串转化为number类型非数值类型字符串返回NaN 空字符串，空格返回0
eval() 把字符串当做表达式 JS代码执行
如果字符串不是合法的表达式JS代码将报错
eval()可以使用变量，函数，前提是变量函数上下文是可用的
常用事件
1 鼠标事件
onclick 鼠标单击事件
ondblclick 鼠标双击事件
onmouseover 鼠标上移事件
onmouseout 鼠标移开事件
onmousemove 鼠标移动事件
onmouseup 鼠标抬起事件
onmousedown 鼠标按下事件
2 键盘事件
onkeydown 键按下事件
onkeyup 键抬起事件
onkeypress 键按下并抬起事件
3 一般事件
onFocus() 获得焦点事件
onBlur() 失去焦点事件
onChange() 内容改变事件(仅用于下拉列表框)
4 表单事件
onsubmit 写在标签里面通过提交按钮调用函数必须有返回值 onsubmit=”return 函数名()” 如果
函数返回false 不进行提交。
onreset写在标签里面通过重置按钮调用函数
5 页面事件
onLoad() 页面加载事件作用于标签
onUnload() 页面关闭事件作用于标签

正则表达式

正则表达式
作用提供一个模板对搜索输入的字符串进行匹配或者验证 (多用于表单验证)
定义使用方式
var reg = /表达式/ ;
reg.test(字符串);
1 预定义字符

. 匹配除了换行以外所有字符
\w 匹配字母数字下划线相当于 [0-9a-zA-Z_]
\s 匹配任意的空白符空格 tab
\d 匹配数字 [0-9]
^ 表示字符串开始
$ 表示字符串的结束
2 反义字符
1 \W 匹配除了字母数字下划线以外的任意字符
2 \S 匹配任意非空白符
3 \D 匹配任意非数字的字符
5 ^ 取反用法[^abc] 用来匹配除了abc之外任意字符
3 限定字符（重复）
1 * 重复0 次或者多次相当于{0,}
2 + 重复1次到多次相当于{1,}
3 ? 重复0次或者1次相当于{0,1}
4 {n} 重复N次
5 {n,} 至少重复n次
6 {n,m} 至少重复N次最多M次
4 转义字符
\ . \ \w
5 匹配汉字
[\u4e00-\u9fa5] [0-9a-zA-Z\u4e00-\u9fa5]
6拓展
g 全局匹配
I 大小写全部匹配
replace(/正则/g,”替换字符”)替换全部
优先级
相同优先级的从左到右进行运算，不同优先级的运算先高后低。各种操作符的优先级从高到低如下：
操作符描述
\ 转义符
(), (??, (?=), [] 圆括号和方括号
*, +,?, {n}, {n,}, {n,m} 限定符
^, $, \元字符,任意元字符位置和顺序
| “或”操作

Window对象

Window对象
代表浏览器开启的视窗他是js的默认对象使用它的属性方法可以省略window前缀
在这里插入图片描述
1常用属性

status 浏览器状态栏信息
document window中的文档属性，每个载入浏览器的HTML文档都会成为document对象，它使我们在
脚本中可以对页面的所有元素进行访问
location window中的location对象
history window中的history对象
2 window常用方法
alert() 提示警告信息用法：alert(“信息”)
confirm() 提示确认信息用法：confirm(“信息”)，
根据返回值来判断点击的是确定还是取消，确定返回true，取消返回false
3 prompt() 显示可提示用户进行输入的对话框用法：prompt(“信息”,[输入框默认值])，当点击确定时返回的是输入的值，点击
取消时。返回的是null
4 open() 打开一个新的浏览器窗口用法：视窗对象名称 =open (‘url‘ , ‘新视窗名’ , ‘规格‘ )
被open的打开的浏览视窗中通过opener调用父窗口的功能和信息也可以调用父窗口的函数
close() 关闭已开启的浏览视窗用法：视窗对象名称.close( )
setInterval() 按照指定的周期(毫秒)来调用函数或者计算表达式用法：temp = setInterval( “函数( )”,毫秒)
clearInterval( ) 取消某setInterval ( )的设置用法：clearInterval(temp )
setTimeout( ) 在指定的毫秒数后调用函数或计算表达式(记住,次数是一次) 用法：timer =setTimeout( “函数( )”,毫秒)
clearTimeout( ) 取消某setTimeout ( )的设置用法：clearTimeout(timer)
3窗口对话框类型
1 模态窗口 showModalDialog
如果不关闭当前窗口，就无法操作其他窗口
showModalDialog([, vArsURL gs],[vArgs] [,sFeatures])
参数说明：
sURL用来指定对话框要显示的文档的URL(；路径必须是相对路径)
vArgs用来向对话框传递参数。
sFeatures用来描述对话框的外观等信息。
使用window.dialogArguments;//获得父级传的参数
2非模态窗口 showModelessDialog
即使不关闭当前页面，也可以操作其他窗口
3模态对话框规格参数
dialogHeight 对话框高度
dialogWidth 对话框宽度
dialogLeft 设定视窗左边界
dialogTop 设定视窗上边界
center 窗口是否居中，默认yes。
help 是否显示帮助按钮，默认yes
resizable 是否可被改变大小，默认no
status 是否显示状态栏。默认为yes
scroll 是否显示滚动条。默认为yes
JS中打开新页面的方法
location.href =
open()
showModalDialog()
showModelessDialog()
location.relace();
JS刷新页面方法：
location.reload()
location.href = location
history.go(0)
4 浏览器对象
location对象
Location 对象包含有关当前 URL 的信息
常用属性：href location.href=”Url”; 在同一窗口跳转到新的页面
能返回上级页面
常用方法：
location.reload() 重新location.href=location加载当前文档(刷新)；
等同于 localtion.href = location
location.replace(“新页面”) 以新的文档取代之前文档
无法返回上级页面与 location.href 效果相同
history对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
常用方法：
history.back() 加载 history 列表中的前一个 URL 。相当于浏览器后退按钮
history.forward()加载 history 列表中的下一个 URL。等同于按浏览器的前进按钮
作用：阻止本页面的前进和后退
history.go(索引)
history.go(1) 等同于history.forward() 前进
history.go(-1) 等同于history.back() 后退
history.go(0)
等同于location.reload()，location.href=location;刷新