文档章节

JavaScript快速入门

曾劲松
 曾劲松
发布于 2016/11/07 22:34
字数 1169
阅读 7
收藏 1

函数有return,但是没有返回值声明。

function myFunction()  //函数名前面没有声明返回值类型
{
var x=5;
return x;
}

var myVar=myFunction();

局部 JavaScript 变量,只能在函数内部访问它,只要函数运行完毕,本地变量就会被删除。

全局 JavaScript 变量,在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它,在页面关闭后被删除。。

向未声明的 JavaScript 变量来分配值,如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

如需把两个或多个字符串变量连接起来,请使用 + 运算符。如果把数字与字符串相加,结果将成为字符串。

a="What a very";
b="nice day";
c=txt1+txt2;

if语句

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<10)
  {
  x="Good morning";
  }
else if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
document.getElementById("demo").innerHTML=x;
}
</script>

JavaScript 错误 - Throw、Try 和 Catch

//
try{
  adddlert("Welcome guest!");
}
catch(err){
  txt=err.message;
  alert(txt);
}

//throw自定义错误,可以是 JavaScript 字符串、数字、逻辑值或对象。

try
  {
  var x=document.getElementById("demo").value;
  if(x=="")    throw "empty";
  if(isNaN(x)) throw "not a number";
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
  }
catch(err)
  {
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + ".";
  }

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有:

  • 用户是否已填写表单中的必填项目?
  • 用户输入的邮件地址是否合法?
  • 用户是否已输入合法的日期?
  • 用户是否在数据域 (numeric field) 中输入了文本?

 有时候,我在一个程序代码中,多次需要使用某对象的属性或方法,照以前的写法,都是通过:对象.属性或者对象.方法这样的方式来分别获得该对象的属性和方法,着实有点麻烦,学习了with语句后,可以通过类似如下的方式来实现:  
with(object)  
{  
       var str = 属性1;  
} 去除了多次写对象名的麻烦。 

 下面验证Email表哥是否为空:

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>

<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

DOM - 改变 HTML

//改变 HTML 输出流
document.write(Date());
//改变 HTML 内容
document.getElementById("p1").innerHTML="New text!";
//改变 HTML 属性
<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>
//

 DOM - 改变 CSS

//改变 HTML 样式
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById('p2').style.visibility='visible'
</script>

DOM Style 对象的所有属性:

http://www.w3school.com.cn/jsref/dom_obj_style.asp#text

JavaScript HTML DOM 对事件做出反应

html的元素可以拥有事件,下面的两个例子都拥有onclick事件:

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
<button onclick="displayDate()">点击这里</button>

使用 JavaScript 来向 HTML 元素分配事件:

document.getElementById("myBtn").onclick=function(){displayDate()};

onload onunload 事件会在用户进入或离开页面时被触发。onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。

onchange 事件常结合对输入字段的验证来使用。下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。

<input type="text" id="fname" onchange="myFunction()">

function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}

onmouseoveronmouseout 事件,可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

更多DOM 事件对象查询:http://www.w3school.com.cn/jsref/dom_obj_event.asp

添加和删除新的 HTML 元素

如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。一定要按照顺序来添加。而删除已有的 HTML 元素,您必须首先获得该元素的父元素下面是例子:

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);

 

© 著作权归作者所有

上一篇: JavaScript 对象
下一篇: CSS基础
曾劲松
粉丝 5
博文 200
码字总数 141434
作品 0
武汉
私信 提问
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
2018/06/14
0
0
当javaScript从入门到提高前需要注意的细节:变量部分

到了HTML5的时代,对javaScript的要求不是降低了,而是更提高了。javaScript语言的入门非常简单,如果你有java、C#等C风格的结构化语言的基础,那javaScript你最多半天就可以写点什么了。但是...

彭博
2012/03/09
47
0
PHP学习路线图 最全PHP自学指南

对于广大零基础的PHP自学者,往往不知道如何系统的学习PHP,导致平白浪费了很多时间。本文将为大家带来最详细的php学习路线图,同时还会附上相应的权威教程,让广大PHP自学者少走许多弯路。 ...

W3Cschool小编
2018/04/24
0
0
一个合格的前端工程师必看的书籍

以我的经验,大部分技术,熟读下列四类书籍即可。 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列 全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解...

财富江湖
2014/12/23
1K
1
前端开发,从菜鸟到大牛的取经之路

以我的经验,大部分技术,熟读下列四类书籍即可。 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列 全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解...

modernizr
2014/05/05
2.4K
14

没有更多内容

加载失败,请刷新页面

加载更多

VMware Workstation 15基本介绍

VMware Workstation 15中文版是PC上最强大的虚拟机软件,也是功能强大的桌面虚拟计算机软件,中文名“威睿工作站”,提供用户可在单一的桌面上同时运行不同的操作系统,和进行开发、测试 、部...

linjin200
9分钟前
0
0
开源抢票软件,助你回家过端午

不知道有多少小伙伴跟我一样,是个在外漂泊的程序猿。逢年过节最头疼的就是购买一张回家的车票。所以我今天来分享一款最新的开源12306抢票软件,当然,也是在GitHub上开源分享的精品软件。 ...

编程资源库
18分钟前
1
0
feign 请求超时,请求没有到服务端

加了个请求头后请求有时候会超时,最开始把所有的头都加进来了,后来只加了个sessionid就没有问题了 @Slf4jpublic class FeignBasicAuthRequestInterceptor implements RequestIntercepto...

xiaomin0322
22分钟前
1
0
centos6经验

由于配置文件中没有include项,故添加了此项的配置文件中的任务均识别不出来,故只能放在软件自带的配置文件中方能正常识别。

dragon_tech
23分钟前
1
0
我的Linux系统开始学习的过程

Linux系统,不知大家是否了解。接触计算机不多或对计算机不感冒的人可能对其比较陌生,曾经的我也是。上大学前的我的确对Linux一无所知,那时候接触面窄,都没有听说过此名字,上了大学后,身...

linux-tao
28分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部