JavaScript基础、语法(JS)

JavaScript在java ee开发过程中其着独特的作用，简单灵活的语法，立竿见影的效果，使其肆意运行在前台页面中。给程序员带来事半功倍的感觉，也给用户带来异常舒畅的体验。但是，也正是它简约，甚至有点“荒诞”的语法，使整天浸泡在严谨java语法中的程序员操作起来反而不太适应，就像手握大刀的武士在一片空地上跟苍蝇较劲，纵有千斤力也无济于事。其实，苍蝇也有它的活动规律。我就把我使用和收集的javaScript的点点滴滴记录下来，跟大家一起分享，有不对之处，还请大家互相指正。

1.Java Script是一种脚本语言,其程序可以嵌入到HTML/XML页面中，被浏览器解释执行,解释到哪儿执行到哪儿.

2.功能：

增强页面动态效果

实现页面与用户的实时交互

3.Java Script的嵌入

1>.通过<script></script>,如：

</script>

一个HTML页面中可以有多个<script></script>标签对，而且各标签对之间可以互相访问，可以认为是同一段代码。

2>.Java Script代码可以出现的位置

1>).<body>中

2>).<head>中：主要是定义一些函数

3>).单独的外部文件中，如：

</script>

4.Java Script中的数据类型

1>基本数据类型

整型

浮点型

字符型(包含了字符串类型)

布尔型:true(0),false(非零)

2>.对象类型

内置对象(String,Math,Date)

浏览器对象(Window,Document,History,Forms,...)

用户自定义对象

5.变量

1>.命名规则:

由字母,数字,下划线美元符($)组成,不能以数字开头。

变量名区分大小写

不允许使用JavaScript关键字做变量名

2>.变量声明时不指定类型,而具体的类型是由将来给它赋值时的赋值类型来决定

通常用var来声明变量,也可以不声明而直接使用变量,但必须先赋值,再取其值。

如：var a;//只声明，不赋值，但使用之前必须赋值

var b=3.14;

var c="你好";

var d=5,e=6;//一次声明多个

b=c+d;//结果b="你好5"

f="Hello";//不声明,直接赋值.注意:默认给声明成全局变量.

document.write(f);//不声明就使用,但是使用之前必须赋值

3>undefined 一般是使用了一个没赋值的元素

4>和java中变量不同的是,JS中变量可以重复声明;可以在使用中根据所赋值的类型来改变类型;作用域是从声明处到本代码块结束(注意JS中不是用{}划分代码块的,而是以函数为单位的)

6.JavaScript中的自定义对象类型

1>定义的两种方式:

1>).使用new Object()

如:var obj = new Object();//这是一个空对象,后面可以设置对象的属性.

obj.id=1;

obj.name="yf";

2>).直接生成

如:var teacher = {id:1, name:"yf"};

2>使用的两种方式:

1>).对象名.属性名

如:alert(obj.name);

2>).对象名["属性名"]

如:alert(obj["name"])

3>对象中的方法:用对象的属性来保存外部定义的方法.

如: obj.getName=getName;

function getName(){

return this.name;

}

7.JavaScript关键字

break delete function return typeof

case do if switch var

catch else in this void

continue false instanceof throw while

debugger finally new true with

default for null try

8.JavaScript常量

1>.整型

八进制:012,027(0开头)

十进制:3,200

十六进制:0x12,0X4a(0x或者0X开头)

这些进制的数据在显示的时候都是以十进制的形式呈现给用户

2>.浮点型:3.14,2.1e3,2e4(科学计数法的表示)

3>.布尔型:true,false

4>.字符型

1>).单个字符:'a'

字符串:“china”,但是JS也允许用'china',这个很不容易理解，不过通常还是用"china"

2>).转义字符常量:"\n"(换行符),"\t"(制表符),"\""(双引号)

5>.空值:null

9.JavaScript运算符

1>.算术运算符: 2>.位运算符

+ 加法 ~ 按位"取反"

- 减法 & 按位"与"

* 乘法 | 按位"或"

/ 除法 ^ 按位"异或"

++ 增量/单目加 << 左移

-- 减量/单目减 >> 带符号右移

% 求余 >>> 无符号右移

(JavaScript也是采用补码的形式移位的,所以负数的>>和>>>是不同的)

3>.逻辑运算符 4>.扩展运算符

! 逻辑非 += a+=b<--->a=a+b

& 逻辑与 -= a-=b<--->a=a-b

| 逻辑或 *= a*=b<--->a=a*b

^ 逻辑异或 /= a/=b<--->a=a/b

%= a%=b<--->a=a%b

5>.比较运算符 != a!=b<--->a=a!b

> 大于 &= a&=b<--->a=a&b

>= 大于等于 |= a|=b<--->a=a|b

< 小于 ^= a^=b<--->a=a^b

<= 小于等于 <<= a<<=b<--->a=a<<b

!= 不等于 >>= a>>=b<--->a=a>>b

== 等于(变量值相等就可以)>>>= a>>>=b<--->a=a>>>b

=== 全相等(表示两个变量的值相等,变量的类型也相同)

6>.赋值运算符= 7>.三目运算符?:

8>.字符串连接符+,+=

10. 表达式

var s1=3+5+"hello" //结果：8hello

var s2="hello"+3+5 //结果：hello35

11.流程控制

1>.分支语句:

1>).if-else

2>).switch

2>.循环语句

1>).for

2>).while

3>).do-while

4>).for-in，如：

document.write("<hr>for-in循环:");

document.write("<ul>");//JavaScript中用HTML的元素时,要输出这个元素才行

var a=new Array(3);

a[0]="香蕉";

a[1]="苹果";

a[2]="犁";

for(var s in a){

document.write("<li>"+a[s]+"</li>");

}

document.write("</ul>");

</script>

3>.特殊流程控制

1>).break 跳出整个循环

2>).continue 跳出本次循环

12.数组

1>.数组的声明方式

var a1=new Array();//创建一个数组，包含0个元素,长度为0

var a2=new Array(size);//创建一个数组,长度为size

a2[0]=1;

a2[1]=2;

....,

a2[size-1]=size;

var a3=new Array(v1,,,...,vn);//创建一个数组,并且静态初始化,没初始化的就按照undifined处理

var a4=[1,2,false,"aa",null];//元素类型可以不一致

2>.数组的长度会自动调整,最终长度由初始化长度决定。

3>.数组元素的访问采用数组名[下标]的形式,有效下标为0~length-1

13.函数

1>.函数定义:

1>).传统方法

function <函数名>(<参数列表>){

<函数体代码>

[<return语句>](可选)

}

说明:JavaScript函数在定义时不需要指定返回值类型和是否有返回值

参数列表也可以不指定类型

2>).构造方法方式

var f=new Function([参数列表,]方法体);//参数列表可选,最后一个是方法体.

2>.函数使用:

1>).函数名(实参列表);//所传实参个数可以和函数定义的参数个数不一样,按照就前原则使用

2>).函数名----并不表示函数调用,而是代表函数的定义,相当于java中的引用或者C++中的指针,指向函数

3>.内联函数:函数中定义函数,但此函数只能在外函数中调用.

如:function outterFun(){

alert("OutterFun!!!");

function InnerFun(){

alert("InnerFun!!!");

}

outterFun();

14.事件及事件处理机制

JavaScript中常用事件类型

onClick 组件被单击

onDbclick 组件被双击,如：

onLoad 页面装载

onUnload 页面卸载,如：

onChange 组件内容或条目选种状态发生改变

鼠标移入

鼠标移出

鼠标按下

鼠标松开

onMousemove 鼠标移动，如：

function move(x,y){

mypic.style.left=x;

mypic.style.top=y;

}

正文信息:

</div>

</body>

onFocus 成为焦点

onBlur 当对象失去焦点，如：

username: <input type="text" name="username" value="请输入您的姓名.." onFocus="clear1()" onBlur="show()"/>

onscroll 页面滚动

onsubmit 表单提交.但是它触发函数时必须用: return 函数(参数列表),只有当函数返回true时表单才能提交成功;否则,提交失败.

15.JavaScript中常用对象

1>.数学对象 Math

内置对象Math提供常规的数学运算方法和数学常量

PI,E,abs()--绝对值,sin(),cos(),round()--截断操作,sqrt()--开方,pow()--幂运算,random()--产生随机数

2>.时间对象 Date

使用前需要声明/创建时间对象: var currentTime=new Date();

getYear() setYear()-------获取/设置年信息

getMonth() setMonth()------获取/设置月信息(月份是从0~11对应1~12月)

getDate() setDate()-------获取/设置日信息

getDay()----------------------获取星期几

getHours() setHours()------获取/设置时信息

getMinutes() setMinutes()----获取/设置分信息

getSeconds() setSeconds()----获取/设置秒信息

getTime() setTime()-------获取/设置距离1970年0点0分0秒0毫秒的毫秒数

3>.字符串对象 String

length------------------------属性,字符串长度

charAt(idx)-------------------返回指定下标处的字符

indexOf(chr)------------------返回指定字符串的子串在当前字符串中第一次出现时的下标

indexOf(chr,fromIdx)----------从指定下标开始第一次出现的下标

lastIndexOf(chr)--------------子串最后一次出现的下标

substring(m,n)----------------取子串(从下标为m处字符到下标为n的字符,包含m,不包含n)

substring(m)------------------取子串(从下标为m处一直到结尾,包含m)

toLowerCase()-----------------转换成小写

toUpperCase()-----------------转换成大写

16.系统函数

系统函数不从属于任何的对象,可以在JavaScript代码中的任何位置直接使用

1>.eval(str) 计算字符串形式给出的表达式的值

2>.parseInt(str) 把字符串解析成整数,默认按照十进制,但若是0开头则按八进制，若是0x开头则按十六进制

parseInt(str,radix) 按指定进制,把字符串解析成整数,即把str当成radix进制翻译成十进制

parseFloat(str) 把字符串解析成浮点型数值

以上方法，参数可以是表达式，在解析过程中如果遇到错误(出现非法字符)，则把已解析的返回；如果

第一个就解析错了，则返回NaN(非数值型)

isNaN(v) 判断参数是否为NaN

17.浏览器对象

也是JavaScript的内置对象，可以实现浏览器与HTML页面之间的交互

1>.window对象

代表当前窗体,是浏览器其它对象共同的祖先，所以可以通过它来访问其它浏览器对象及窗口中发生的事

件信息，一般在JavaScript中可以省略Window对象.浏览器打开HTML文件时通常就会创建一个Window对象

如果浏览器划分成多个Frame时，每个Frame都有一个Window，但这些Window之间可能存在隶属关系

1>).alert()

如：window.alert("姓名不能为空！");

2>).open(URL,windowName,parameterList)---打开一个窗口,显示一个URL指定的一个页面，windowName窗口名字，parameterList窗口参数

如：window.open("ShiZhong.html","myAdvWindow","toolbar=no,left=300,top=200,menubar=no,width=250,height=200");

3>).close()-----关闭一个窗口

如：window.close()

4>).prompt(text,Defaulttext)--------------弹出一个文本输入框

如：var name=window.prompt("请输入您的姓名","");

5>).confirm(text)------------------------弹出一个确认窗口

如：var flag=window.confirm("确定要删除此记录吗？");

if(flag){

document.form1.submit();

}

6>).setInterval(func,timer)--------------指定时间间隔执行任务

如：window.setInterval("showTime()",1000);

7>).clearInterval(timer)-----------------清楚任务

2>.Document对象

表示当前的页面,是Window对象的属性

write("...")方法:在窗口中显示内容.

3>.Location对象

表示当前打开的URL

window.location="targetUrl"//这条语句一旦被执行，就转向targetUrl指向的页面，实现了个页面转向

reload()//重新加载当前页面，即刷新当前页面

4>.History对象

go(index)--------表示前进

back()-----------后退

forward()

5>.arguments对象

用在函数中,是存放调用函数时传进来的参数组成的数组.

6>.Navigator对象

当前浏览器的信息，也是Window对象的属性,它封装了当前浏览器的相关信息

appName

appVersion

language

platform

收集的javascript的一些基础知识做个归纳，并在此与大家一起分享。

1.document.write("");为输出语句
2.JS中的注释为//
3.传统的HTML文档顺序是:document->html->(head,body)
4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value)
6.一个小写转大写的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase();
7.JS中的值类型:String,Number,Boolean,Null,Object,Function
8.JS中的字符型转换成数值型:parseInt(),parseFloat()
9.JS中的数字转换成字符型:(""+变量)
10.JS中的取字符串长度是:(length)
11.JS中的字符与字符相连接使用+号.
12.JS中的比较操作符有:==等于,!=不等于,>,>=,<.<=
13.JS中声明变量使用:var来进行声明
14.JS中的判断语句结构:if(condition){}else{}
15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop}
16.循环中止的命令是:break
17.JS中的函数定义:function functionName([parameter],...){statement[s]}
18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self
20.状态栏的设置:window.status="字符";
21.弹出提示信息:window.alert("字符");
22.弹出确认框:window.confirm();
23.弹出输入提示框:window.prompt();
24.指定当前显示链接的位置:window.location.href="URL"
25.取出窗体中的所有表单的数量:document.forms.length
26.关闭文档的输出流:document.close();
27.字符串追加连接符:+=
28.创建一个文档元素:document.createElement(),document.createTextNode()
29.得到元素的方法:document.getElementById()
30.设置表单中所有文本型的成员的值为空:
var form = window.document.forms[0]
for (var i = 0; i
49.引用一个文件式的JS:<script type="text/javascript" src="aaa.js"></script>
50.指定在不支持脚本的浏览器显示的HTML:<noscript></noscript>
51.当超链和ONCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例:<a href="a.html" οnclick="location.href='b.html';return false">dfsadf</a>
52.JS的内建对象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number,Object,RangeError,ReferenceError,RegExp,String,SyntaxError,TypeError,URIError
53.JS中的换行:\n
54.窗口全屏大小:<script>function fullScreen(){this.moveTo(0,0);this.outerWidth=screen.availWidth;this.outerHeight=screen.availHeight;}window.maximize=fullScreen;</script>
55.JS中的all代表其下层的全部元素
56.JS中的焦点顺序:document.getElementByid("表单元素").tabIndex = 1
57.innerHTML的值是表单元素的值:如<p id="para">"how are <em>you</em>"<p></p>,则innerHTML的值就是:how are <em>you</em>
58.innerTEXT的值和上面的一样,只不过不会把<em>这种标记显示出来.
59.contentEditable可设置元素是否可被修改,isContentEditable返回是否可修改的状态.
60.isDisabled判断是否为禁止状态.disabled设置禁止状态
61.length取得长度,返回整型数值
62.addBehavior()是一种JS调用的外部函数文件其扩展名为.htc
63.window.focus()使当前的窗口在所有窗口之前.
64.blur()指失去焦点.与FOCUS()相反.
65.select()指元素为选中状态.
66.防止用户对文本框中输入文本:οnfοcus="this.blur()"
67.取出该元素在页面中出现的数量:document.all.tags("div(或其它HTML标记符)").length
68.JS中分为两种窗体输出:模态和非模态.window.showModaldialog(),window.showModeless()
69.状态栏文字的设置:window.status='文字',默认的状态栏文字设置:window.defaultStatus = '文字.';
70.添加到收藏夹:external.AddFavorite("http://www.google.com","Google");
71.JS中遇到脚本错误时不做任何操作:window.onerror = doNothing; 指定错误句柄的语法为:window.onerror = handleError;
72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener...的多重继续.
73.JS中的self指的是当前的窗口
74.JS中状态栏显示内容:window.status="内容"
75.JS中的top指的是框架集中最顶层的框架
76.JS中关闭当前的窗口:window.close();
77.JS中提出是否确认的框:if(confirm("Are you sure?")){alert("ok");}else{alert("Not Ok");}
78.JS中的窗口重定向:window.navigate("http://www.google.com");
79.JS中的打印:window.print()
80.JS中的提示输入框:window.prompt("message","defaultReply");
81.JS中的窗口滚动条:window.scroll(x,y)
82.JS中的窗口滚动到位置:window.scrollby
83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout
84.JS中的模态显示在IE4+行,在NN中不行:showModalDialog("URL"[,arguments][,features]);
85.JS中的退出之前使用的句柄:function verifyClose(){event.returnValue="we really like you and hope you will stay longer.";}} window.οnbefοreunlοad=verifyClose;
86.当窗体第一次调用时使用的文件句柄:onload()
87.当窗体关闭时调用的文件句柄:onunload()
88.window.location的属性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),pathname("/a/a.html"),hash("#giantGizmo",指跳转到相应的锚记),href(全部的信息)
89.window.location.reload()刷新当前页面.
89-1.parent.location.reload()刷新父亲对象（用于框架）
89-2.opener.location.reload()刷新父窗口对象（用于单开窗口）
89-3.top.location.reload()刷新最顶端对象（用于多开窗口）
90.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回第几页,也可以使用访问过的URL)
91.document.write()不换行的输出,document.writeln()换行输出
92.document.body.noWrap=true;防止链接文字折行.
93.变量名.charAt(第几位),取该变量的第几位的字符.
94."abc".charCodeAt(第几个),返回第几个字符的ASCii码值.
95.字符串连接:string.concat(string2),或用+=进行连接
96.变量.indexOf("字符",起始位置),返回第一个出现的位置(从0开始计算)
97.string.lastIndexOf(searchString[,startIndex])最后一次出现的位置.
98.string.match(regExpression),判断字符是否匹配.
99.string.replace(regExpression,replaceString)替换现有字符串.
100.string.split(分隔符)返回一个数组存储值.
101.string.substr(start[,length])取从第几位到指定长度的字符串.
102.string.toLowerCase()使字符串全部变为小写.
103.string.toUpperCase()使全部字符变为大写.
104.parseInt(string[,radix(代表进制)])强制转换成整型.
105.parseFloat(string[,radix])强制转换成浮点型.
106.isNaN(变量):测试是否为数值型.
107.定义常量的关键字:const,定义变量的关键字:var</em>

JavaScript基础、语法(JS)

继续阅读

nodejs微信开发---授权登录+获取用户信息微信网页授权

403 Forbidden，You don't have permission to access / on this server.Forbidden

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

无组件上传图片到数据库中，最完整解决方案

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

GridView终极用法(一)

layui多任务上传添加进度条