javascript知识点复习
一、概念
javascript
是一门类C的语言,与C、C#,Java的语法类似,所以在讲解时就不全面去介绍javascript
的语法了而是着重介绍它的不同之处。
二、javascript的使用
1. 在页面中放置javascript脚本方法
-
将javascript脚本放置在
<script> 与 </script>
标签之间,script标签可以放置在页面任何地方,但通常我们会放置在页头或页脚中。 -
外部javascript:将脚本保存为单独的javascript文件(扩展名为js),然后通过
<script src='js文件位置'></script>
来将脚本引入页面。要注意外部脚本不能包含<script>
标签,建议将脚本放置在所有页面元素之后。
2. 注意事项:
-
每句后面使用分号结束。
-
大小写敏感。
-
要调试js代码,请打开浏览器的开发者模式【F12】,并且可以使用
console.log()
来输出中间变量的值。
三、基本语法
1. 变量
1)声明
javascript变量可以不声明直接使用,但是使用前先声明,将是一个良好的习惯。
var username; //声明后未赋值的变量,其值为undefined
如果重复声明变量,该变量的值不会丢失。
2)变量作用域
全局变量:在函数外声明的变量是全局变量或在函数内没有用var
声明的变量,网页上的所有脚本和函数都能访问它。
局部变量:在函数内声明的变量(使用var
)是局部变量,只能在函数内部访问它。
3)变量的生存期
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
2. 运算符
-
+
字符串连接,如果把数字与字符串相加,结果将成为字符串。 -
==
等于,值相等即为true。
-
===
全等,值相等,类型相同才为true。
3.数据类型
javascript是弱类型语言,变量具有动态类型。
-
undefined
:表示未声明的变量或者用var声明但未初始化的变量。 -
null
:空,可以将变量的值设置为null来清空变量。 -
数字:
isNaN()
判断是否为非数值、parseInt()
、parseFloat()、number()。
-
布尔:
true
(非空字符串、非零数值、非空对象)、false
(空字符串、0、null和undefined)。 -
字符串:使用单引号或双引号包括。
判断数据类型 typeof(变量)。
四、常用对象
1.
String
对象
属性:
-
length
:字符串长度。
方法:
-
charAt(index)
:返回指定位置的字符。 -
indexOf(searchvalue,fromindex)
:返回某个指定的字符串值在字符串中首次出现的位置,未找到返回-1。 -
lastIndexOf(searchvalue,fromindex)
:反向检索。 -
replace(regexp/substr,replacement)
:在字符串中用一些字符替换另一些字符。 -
split(separator,howmany)
:把一个字符串分割成字符串数组。 -
substr(start,length)
:在字符串中抽取从 start 下标开始的指定数目的字符。 -
toLowerCase()
:把字符串转换为小写。 -
toUpperCase()
:把字符串转换为大写。
2.Date 对象:用于处理日期和时间
var mydate=new Date(); //通过new方法创建日期对象
console.log(Date()); //返回一个完整的日期时间
console.log(mydate.getDay()); //返回当前是周几
console.log(mydate.getMonth()+1); //返回当前月份
console.log(mydate.getFullYear()); //返回当前年份
console.log(mydate.getHours()); //返回当前小时
console.log(mydate.getMinutes()); //返回当前分钟
console.log(mydate.getSeconds()); //返回当前秒数
3. 数学函数
-
Math.ceil(值)
:天花板函数,向上取整。 -
Math.floor(值)
:地板函数,向下取整。 -
Math.max(值1,值2)
:取最大值。 -
Math.min(值1,值2)
:取最小值。 -
Math.round(值)
:进行四舍五入操作。 -
Math.random()
:返回0-1之间的随机数 。
4. 数组
1)创建数组
var city=new Array();
city[0]='北京';
city[1]='上海';
city[2]='广州';
var city=new Array('北京','上海','广州');
var city=['北京','上海','广州'];
2)数组的遍历
var arr=[1,"2k","4k",25,36,65];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
var arr=[1,"2k","4k",25,36,65];
for (var a in arr){
console.log(a);
}
3)增加数组元素:使用"[ ]"运算符置顶一个新下标
-
push()
:在数组末尾添加元素。 -
unshift()
:在数组头部添加元素。 -
concat()
:合并数组。
4)删除数组元素:delete 数组名[下标]
;
-
pop()
: 删除并返回数组最后一个元素。 -
shift()
:删除并返回数组第一个元素。
5)获取数组片段
-
slice(start,end)
:从数组中返回选定的元素。 -
splice()
:方法向/从数组中添加/删除项目,然后返回被删除的项目。 -
删除任意数量的项:
splice(要删除的起始下标,要删除的项数)。
-
在指定位置插入指定的项:
splice(起始下标, 0 , 要插入的项)。
-
替换任意数量的项:
splice(起始下标, 要删除的项数 , 要插入的项)。
6)其他
-
join(separator)
:把数组中的所有元素放入一个字符串。 -
reverse()
: 颠倒数组中元素的顺序。 -
sort(sortby)
: 方法用于对数组的元素进行排序。
5. 自定义对象
var stu={id:"20120101", name:"胡悦"};
五、表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有:
-
用户是否已填写表单中的必填项目?
-
用户输入的邮件地址是否合法?
-
用户是否在数据域 (numeric field) 中输入了文本?
1.验证时机
- 在表单的
onsubmit
事件中验证<form name="myform" action="abc.asp" method="post" onsubmit="return checkdata()"> <label for="username"> <input type="text" name="username" id="username" /> </label> <input type="submit" value="提交"> <input type="button" value="提交2" onclick='checkdata2()'> </form> <script> function checkdata(){ with(document.myform){ if (username.value.length==0) { alert('用户名不能为空!'); username.focus(); return false; }else{ return true; } } } </script>
- 在按钮的
click
事件中进行验证,验证通过后使用form.submit()
发送<input type="button" value="提交2" onclick='checkdata2()'> function checkdata2(){ with(document.myform){ if (username.value.length==0) { alert('用户名不能为空!'); username.focus(); return false; }else{ myform.submit(); } } }
2.常用验证
1)必填(或必选)项目:
//if(value==null||value=="")
if(value.length==0){
alert('必须输入');
}
2)长度验证:
if(value.length>50){
alert('不能超过50个字符');
}
3)是否全为数字:
function isNumber(String){
var Letters = "1234567890"; //可以自己增加可输入值
var i;
var c;
for( i = 0; i < String.length; i++){
c = String.charAt( i );
if (Letters.indexOf( c ) < 0)
return false;
}
return true;
}
4)email验证:
function isEmail(value){
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) {
return false}
else {return true}
}
六、通过javascript来操作DOM元素
1.操作方法:
- 获取操作元素:
document.getElementById(id); //通过id来获取dom元素 document.getElementsByTagName(tag); //通过html标签名称来获取dom元素集合,返回的为数组 document.getElementsByClassName(class); //通过类名来获取dom元素集合,ie9以上支持
- 改变 HTML 元素的内容 (
innerHTML
)://document.getElementById(id).innerHTML=new HTML <html> <body> <p id="intro">Hello World!</p> </body> </html> <script> x=document.getElementById("intro"); alert(x.innerHTML); </script>
- 改变 HTML 元素的属性:
document.getElementById(id).attribute=new value
- 改变 HTML 元素的样式 (CSS):
document.getElementById(id).style.property=new style //或 document.getElementById(id).className='styleclass';
- 对 HTML DOM 事件对出反应:
HTML 事件属性来绑定函数 <button onclick="displayDate()">单击这里</button> 使用 HTML DOM 来分配事件 document.getElementById("myBtn").onclick=function(){displayDate()};
2.常用事件:
-
onload
:页面加载 -
onchange
:内容改变 -
onmouseover
:鼠标进入 -
onmouseout
:鼠标移出 -
onmousedown
:鼠标按下 -
onmouseup
:鼠标释放 -
onclick
:鼠标单击 -
onfocus
:获得焦点 -
onblur
:失去焦点
以上内容转载自我老师的讲义,便以后知识点的复习。