您的位置: 首页 > IT文章 > javascript 入门基础 javascript基础学习-语法学习(二) javascript基础学习-语法学习(三) javascript基础学习-表单验证(五) avascript基础学习-简单框架(六)

javascript 入门基础 javascript基础学习-语法学习(二) javascript基础学习-语法学习(三) javascript基础学习-表单验证(五) avascript基础学习-简单框架(六)

分类: IT文章 • 2022-08-12 15:38:22

分类： javascript2014-04-13 00:57 55人阅读评论(0) 收藏举报

javascript 基础语法

上篇关于javascript的博客简单介绍了一下javascript的变量和运算符,下面简单介绍一下javascript中的基本语句.
1.条件语句if.

[html] view plain copy

<html>
lt;head>
<title>VarTest</title>
<script language="javascript">
var varTest=1;
if(varTest=1) {
alert("true");
}else{
alert("false");
}
</script>
lt;/head>
</html>

结果弹出窗口true.
2.三元运算符?:.

[html] view plain copy

<html>
<head>
<title>VarTest2</title>
<script language="javascript">
var varTest2=2;
alert(varTest2==1?"1":"2");
</script>
</head>
</html>

结果弹出窗口2.
3.条件语句switch.

[html] view plain copy

<html>
lt;head>
<title>VarTest3</title>
<script language="javascript">
var varTest3=2;
switch(varTest3){
case 1:
alert("1");
break;
case 2:
alert("2");
break;
default:
alert("other");
break;
}
</script>
lt;/head>
</html>

结果弹出窗口2.
4.循环语句for.

[html] view plain copy

<html>
<head>
<title>VarTest4</title>
<script language="javascript">
var sum=0;
for(var i=0; i<=100; i++){
sum+=i;
}
alert(sum);
</script>
</head>
</html>

结果弹出窗口5050.
5.循环语句while.

[html] view plain copy

<html>
<head>
<title>VarTest5</title>
<script language="javascript">
var sum=0;
var i=0;
while(i<=100){
sum+=i;
i++;
}
alert(sum);
</script>
</head>
</html>

结果弹出窗口5050.
6.循环语句do while.

[html] view plain copy

<html>
<head>
<title>VarTest6</title>
<script language="javascript">
var i=10000;
do{
i++;
}while(i<=100);
alert(i);
</script>
</head>
</html>

结果弹出窗口10001.注意与while循环的区别是do while循环无论如何都会执行一次.
7.跳出循环语句break.

[html] view plain copy

<html>
lt;head>
<title>VarTest7</title>
<script language="javascript">
for(var i=0; i<=100; i++){
if(i==50){
break;
}
}
alert(i);
</script>
lt;/head>
</html>

结果弹出窗口50.
8.跳出循环语句continue.

[html] view plain copy

<html>
lt;head>
<title>VarTest8</title>
<script language="javascript">
var sum=0;
for(var i=0; i<=100; i++){
if(i==50){
continue;
}
sum+=i;
}
alert(sum);
</script>
lt;/head>
</html>

结果输出窗口时5000.
break和continue都是跳出循环,区别是break是跳出整个循环,continue是跳出本次循环.
9.++i和i++的区别.

[html] view plain copy

<html>
<head>
<title>VarTest9</title>
<script language="javascript">
var i=0;
var j=0;
alert("i++="+(i++)+",i="+i+":++j="+(++j)+",j="+j);
</script>
</head>
</html>

结果弹出窗口i++=0,i=1:++j=1,j=1.
x++和x++都会是x本身加1,两者的区别是前者是先赋值后加1,而后者的区别是先加1,后赋值.
javasctipt的基本语法就讲到这里,请继续关注我的博客与我一起学习javascript.

javascript基础学习-语法学习(三)

分类： javascript2014-04-13 23:39 43人阅读评论(0) 收藏举报

javascript 基础语法事件 onSubmit

[html] view plain copy

<html>
<head>
<title>ArrayTest</title>
<script language="javascript">
var array=new Array(3);
array[0]=1;
array[1]=2;
array[2]=3;
array[3]=4;
document.write(array[0]);
document.write(array[1]);
document.write(array[2]);
document.write(array[3]);
</script>
</head>
</html>

结果是页面显示1234,在javascript中不存在数组越界的错误.
2.javascript中关于操作字符串的charAt方法.

[html] view plain copy

<html>
<head>
<title>StringTest</title>
<script language="javascript">
var str="StringTest";
document.write(str.charAt(2));
</script>
</head>
</html>

结果是页面显示r.
3.javascript中function函数的使用.

[html] view plain copy

<html>
<head>
<title>FunctionTest</title>
<script language="javascript">
function test() {
alert("FunctionTest!");
}
test();
</script>
</head>
</html>

结果是弹出窗口FunctionTest.
5.javascript中事件的使用.
a.onLoad和onUnload事件.

[html] view plain copy

<html>
<head>
<title>EventTest1</title>
</head>
<body onload="javascropt:alert('onLoad')" onUnload="javascript:alert('onUnload')">
</body>
</html>

结果是弹出窗口onLoad,当刷新此页面时,即此页面被替换了,页面会依次弹出onUnload和onLoad.
b.onSubmit事件.

[html] view plain copy

<html>
<head>
<title>EventTest2</title>
</head>
<body>
<form name="EventTest2" action="EventTest1.html" onSubmit="return true">
<input type="submit" value="ok">
</form>
</body>
</html>

结果是显示一个button按钮,按ok按钮弹出onLoad窗口,其中onSubmit事件是提交表单之前触发的事件.
如果将return true改为return false,那么ok按钮无论怎么按都不会跳到action指向的html页面.

onSubmit事件的用途主要是表单的验证,看如下小程序.

[html] view plain copy

<html>
<head>
<title>EventTest3</title>
<script language="javascript">
function check(){
if(document.form.username.value==""){
alert("用户名不允许为空!");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form" action="EventTest1.html" onSubmit="return check()">
<input type="text" name="username">
<input type="submit" value="ok">
</form>
</body>
</html>

结果显示一个文本框和一个button,如果文本框里什么内容都没有,点击button按钮,页面会做相应的提示.
c.onClick事件.

[html] view plain copy

<html>
<head>
<title>EventTest4</title>
</head>
<body>
<image src="EventTest4.jpg" onClick="alert('onClick')">
</body>
</html>

d.onMouseOnver和onMouseOut事件.

[html] view plain copy

<html>
<head>
<title>EventTest5</title>
</head>
<body>
<image src="EventTest4.jpg" onMouseOver="alert('over')" onMouseOut="alert('out')">
</body>
</html>

事件是javascript中很重要的一部分内容,这里先简单介绍这些,以后会结合实际需求来深入学习javascript事件.

javascript语法由三部分组成:ECMAScript,DOM(文档对象模型)和BOM(浏览器对象模型).

本篇博客简单介绍一下javascript中的内置对象.
1.js弹出框.
a.alert提示框.

[html] view plain copy

<html>
<head>
<title>AlertTest</title>
<script language="javascript">
alert("AlertTest");
</script>
</head>
</html>

结果弹出窗口AlertTest.
b.prompt输入框.

[html] view plain copy

<html>
lt;head>
<title>PromptTest</title>
<script language="javascript">
var userName=prompt("请输入姓名");
document.write("你好:"+userName);
</script>
lt;/head>
</html>

结果弹出输入框,填入值后,在页面取到并做显示.
c.Confirm确认框.

[html] view plain copy

<html>
<head>
<title>ConfirmTest</title>
<script language="javascript">
function confirmTest() {
if(confirm("确定要删除吗?"){
document.form.submit();
}
</script>
</head>
<body>
<form name="form" action="deleteSuccess.html" method="post">
<input type="button" value="删除" onclick="javascript:confirmTest()">
</form>
</body>
</html>

结果弹出是否删除确认窗口.
2.this.

[html] view plain copy

<html>
<head>
<title>ThisTest</title>
<script language="javascript">
function thisTest(obj) {
if(obj.value==""){
alert("空值!");
}else{
alert(obj.value);
}
}
</script>
</head>
<body>
<image src="ThisTest.jpg" onclick="javascript:alert(this.src)">
<form name="form">
<input type="text" name="uername" value="ThisTest" onclick="javascript:thisTest(this)">
</form>
</body>
</html>

结果略.
3.for in遍历对象.

[html] view plain copy

<html>
<head>
<title>ForInTest</title>
<script language="javascript">
var array=new Array("a","b","c");
for(i in array){
document.write(i+":"+array[i] +"<br>");
}
</script>
</head>
</html>

结果页面显示0:a 1:b 2:c.
4.with建立一个默认的对象.

[html] view plain copy

<html>
lt;head>
<title>WithTest</title>
<script language="javascript">
with(document){
write("WithTest1");
write("WithTest2");
write("WithTest3");
write("WithTest4");
}
</script>
lt;/head>
</html>

结果页面显示WithTest1WithTest2WithTest3WithTest4.
5.new.

[html] view plain copy

<html>
<head>
<title>NewTest</title>
<script language="javascript">
var date=new Date();
alert(date.getDate());
</script>
</head>
</html>

结果页面显示当前日期的日子的号码(1-31).
6.window当前浏览器窗口.
a.状态窗口.

[html] view plain copy

<html>
<head>
<title>WindowTest1</title>
<script language="javascript">
windows.status="WindowsTest";
</script>
</head>
<body>
<form name="form">
<input type="button" value="window" onMouseOver="javascript:windows.status='change'">
</form>
</body>
</html>

结果页面的状态窗口显示WindowTest,当鼠标挪到鼠标时,状态窗口显示change.
b.window.open弹出新窗口.

[html] view plain copy

<html>
<head>
<title>WindowTest2</title>
<script language="javascript">
window.open("Window.html","windowname","toolbar=no,left=200,top=200,menubar=no,width=100;height=100,resizable=no");
</script>
</head>
</html>

结果弹出一个子窗口,各种属性如上.
c.window.close窗口的深入使用.

[html] view plain copy

<html>
<head>
<title>WindowTest3</title>
<script language="javascript">
var win=window.open("Window.html","windowname","toolbar=no,left=200,top=200,menubar=no,width=100;height=100,resizable=no");
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="javascript:win.close();" value="关闭窗口">
</form>
</body>
</html>

结果页面弹出一个窗口,并且主页面有一个关闭按钮,点击关闭按钮,子页面被关闭.
7. winodw.loaction地址栏内容.

[html] view plain copy

<html>
<head>
<title>WindowLoactionTest</title>
<script language="javascript">
alert(window.location);
</script>
</head>
</html>

结果页面显示当前页面的url.
8.转向指定页面.

[html] view plain copy

<html>
<head>
<title>WindowLoactionTest2</title>
<script language="javascript">
function go(){
window.location="WindowLoactionTest2.html";
}
</script>
</head>
<body>
<form name="form">
<input type="button" value="转向" onclick="javascript:go()">
</form>
</body>
</html>

9.页面返回.

[html] view plain copy

<html>
<head>
<title>WindowLoactionTest3</title>
<script language="javascript">
function goBack(){
history.back();
}
</script>
</head>
<body>
转向成功！
<form name="form">
<input type="button" value="转向" onclick="javascript:goBack()">
</form>
</body>
</html>

注意:如果想要IE支持调试js bug,需要对IE做一下特殊配置:IE:工具-Internet选项-高级-打开禁用脚本调试.

javascript基础学习-表单验证(五)

分类： javascript2014-04-17 23:35 45人阅读评论(0) 收藏举报

java javascript 基础表单验证

[html] view plain copy

<html>
<head>
<title>FormTest1</title>
<script language="javascript">
function validateData(){
if(document.form.username.value==""){
alert("请输入用户名");
return false;
}else if(document.form.username.value.length<6||document.form.username.value.length>12){
alert("请输入用户名:6-12位字符");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form" action="RegisterSuccess.html" onSubmit="return validateData()">
<input type="text" name="username" value="请输入用户名:6-12位字符" size="30">
<input type="submit" name="register" value="注册">
</form>
</body>
</html>

针对上面的表单验证是通过弹出窗口提示,用户体验不是很好,如何优化呢？看下面的表单验证的改进版.

[html] view plain copy

<html>
<head>
<title>FormTest2</title>
<script language="javascript">
function validateData(){
if(document.form.username.value==""){
document.getElementById("usernameerror").innerHTML="请输入用户名";
return false;
}else if(document.form.username.value.length<6||document.form.username.value.length>12){
document.getElementById("usernameerror").innerHTML="请输入用户名:6-12位字符";
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form" action="RegisterSuccess.html" onSubmit="return validateData()">
<input type="text" name="username" value="请输入用户名:6-12位字符" size="30">
<span id="usernameerror"></span>
<input type="submit" name="register" value="注册">
</form>
</body>
</html>

注意针对上面的<span ></div>,他们的区别是
div会另起一行显示,而span因为是行内快所以会和文本框在同一行显示.

avascript基础学习-简单框架(六)

分类： javascript2014-04-17 23:40 17人阅读评论(0) 收藏举报

java javascript 框架 html iframe

[html] view plain copy

<html>
<head>
<title>FrameTest1</title>
</head>
<body>
我是主页面.
<table width="100%" align="center" border="1">
<tr>
<td>
<iframe name="child" width="100%" height="20%" src="Child.html"></iframe>
</td>
</tr>
</table>
</body>
</html>

Child.html代码如下:

[html] view plain copy

<html>
<head>
<title>Child</title>
</head>
<body>
我是内帧.
</body>
</html>

显示结果略.
2.通过上面的小例子我们知道了如何通过ifame标签将一个html页面嵌入到另一个html页面中,通过这点我们可以搭建自己的html框架.
注意frameset标签不能放在body标签中.

[html] view plain copy

<html>
<head>
<title>FrameTest2</title>
<script language="javascript">
leftState=0;
</script>
</head>
<frameset rows="20%,*" cols="*" border="1">
<frame name="top" scrolling="no" src="Top.html" noresize>
<frameset name="bottom" cols="20%,*" rows="*" border="1">
<frame name="left" scrolling="yes" src="Left.html">
<frame name="right" scrolling="yes" src="Right.html">
</frameset>
</frameset>
</html>

Top.html代码如下:

[html] view plain copy

<html>
<head>
<title>Child</title>
<script language="javascript">
function operate(){
if(parent.leftState==0){
parent.leftState=1;
parent.bottom.cols="*,100%";
}else{
parent.leftState=0;
parent.bottom.cols="20%,*";
}
parent.bottom.location.reload();
}
</script>
</head>
<body>
<input type="button" name="operate" value="change" onClick="operate()">
</body>
</html>

Left.html代码如下:

[html] view plain copy

<html>
<head>
<title>Child</title>
</head>
<body>
我是Left.
</body>
</html>

Right.html代码如下:

[html] view plain copy

<html>
<head>
<title>Child</title>
</head>
<body>
我是Right.
</body>
</html>

通过上面的四个html文件我们的html框架就搭建好了,注意parent的意思是指父页面.
访问FrameTest2.html文件,在top上面有一个change按钮,点击按钮,可以实现隐藏左边页面的功能,或者说是放大右边页面的功能.
总之通过上面的小例子我们可以借助frame搭建一个很实用的html框架.抓紧时间试试吧!

javascript 入门基础 javascript基础学习-语法学习(二) javascript基础学习-语法学习(三) javascript基础学习-表单验证(五) avascript基础学习-简单框架(六)

javascript基础学习-语法学习(三)

javascript基础学习-表单验证(五)

avascript基础学习-简单框架(六)

相关推荐