当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

JavaScript入门-基础认识

发表于: 2014-08-31   作者:beijishiqidu   来源:转载   浏览次数:
摘要: 什么是JavaScript? JavaScript是一种脚本语言,所以它的代码也称为JS脚本,它是运行在客户端的。 1.从功能上来说: 对用户输入的数据进行验证。 网页特效。 动态更改内容 JavaScript是客户端语言,那么他写在哪里呢?有两种方式: 1.使用 <script> 标签将语句嵌入文档 2.将 JavaScript 源文件链接到 HTML 文档
什么是JavaScript?

JavaScript是一种脚本语言,所以它的代码也称为JS脚本,它是运行在客户端的。
1.从功能上来说:
对用户输入的数据进行验证。
网页特效。
动态更改内容

JavaScript是客户端语言,那么他写在哪里呢?有两种方式:
1.使用 <script> 标签将语句嵌入文档
2.将 JavaScript 源文件链接到 HTML 文档中


例如:
<html>
   <head>
      <script Language ="JavaScript">
           // JavaScript Appears here.
           alert("这是第一个JavaScript例子!");
           alert("欢迎你进入JavaScript世界!"); 
           alert("今后我们将共同学习JavaScript知识!");
      </script> 
   </Head>
</Html>

<script language="JavaScript"  src= "test.js">
</script> 

以上test.js中的内容如下:
document.write("喂!你好吗? ");

简单语法:
JavaScript语法和C语言类似,只是语法关键字等细节不同。
变量的命名,只要你会一种一种,例如C,或者Java,C++,那么它的命名基本就掌握了。

变量:

变量的使用和C语言是一样的,分为先声明,给变量赋值。
//声明变量
var a;
//赋值
a=12;
//同时声明和初始化变量
var a= 10;
//声明多个变量
var x, y, z = 10;

变量的作用域,可以简单的记住,一个变量,如果声明带有var的,那么这个变量即为局部变量,如果没有带var,则这个变量为全局变量。

把下面的例子跑一下就什么都明白了
<script language="javascript">
var quanju ="1";
function getStr(){
 var quanju = 5;
 alert(quanju);
}
function getInt(){
 quanju = 3;
 alert(quanju);
}
function getBool(){
 alert(quanju);
}
</script>


注释:可以使用//进行行注释,也可以使用/**/进行块注释。

运算符:跟C语言是非常类似的,在这里就不废话了。

函数:

举个例子:

<SCRIPT language = "JavaScript">
function calcu(  ){
//获取form表单calc中元素的name为num1的值。
var numb1= document.calc.num1.value;
//获取form表单calc中元素的name为num2的值。
var numb2= document.calc.num2.value;
//由于上述获得的都是String类型的,因此需要调用JS的内置函数进行转换parseFloat转换为Float类型,然后进行相乘。
var total=parseFloat(numb1)*parseFloat(numb2);
document.calc.result.value=total; 
}
</SCRIPT>

....

//onClick="calcu( )"给的元素的单击触发事件绑定为calcu函数。
<INPUT name="getAnswer"  TYPE="button" onClick="calcu( )" value="计算看看/>



函数的定义形式如下:

function 函数名( 参数1,参数2,… ){
    语句;
}

例如:
function  sum ( one, two)
{
var result = one + two;
return  result;
}

函数的调用形式如下:

函数调用一般和表单元素的事件一起使用,调用格式为: 事件名="函数名"

<INPUT name="add" type="button"  value="加法"
       onClick="sum(2,5)">

下面看一个完整的例子:
<HEAD>
<SCRIPT language="JavaScript" >
  function compute(op)
  {
     var num1,num2;
     num1=parseFloat(document.myform.num1.value);
     num2=parseFloat(document.myform.num2.value);
     if (op=="+")     {
	document.myform.result.value=num1+num2  ;     
     }
     if (op=="-")
     {
	document.myform.result.value=num1-num2  ;
      }
     if (op=="*")
     {
	document.myform.result.value=num1*num2  ;
      }
     if (op=="/"  &&  num2!=0)
     {
	document.myform.result.value=num1/num2  ;
      }
  }
</SCRIPT>
</HEAD>

<FORM action="" method="post" name="myform" >
  <P>第一个数<INPUT name="num1" type="text">
  <BR>第二个数<INPUT name="num2" type="text"> 
  </P>
  <P>
<INPUT name="addButton" type="button" value="+" 
  onClick="compute('+')">
<INPUT name="subButton" type="button" value="-" 
onClick="compute('-')">
<INPUT name="mulButton" type="button" value="×" 
onClick="compute('*')">
<INPUT name="divButton" type="button" value="÷" 
onClick="compute('/ ')">
  </P>
  <P>计算结果 <INPUT name="result" type="text"> 
   </P>
</FORM>


JS对数组的支持:
//例如,数组的声明有三种方式。
arrayObj = new Array();
arrayObj = new Array([size])
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
//arrayObj :      必选项。要赋值为 Array 对象的变量名。
//Size     :      可选项。数组的大小。由于数组的下标是从零开始,
//         创建的元素的下标将从零到 size -1。
//element0,...,elementN :  可选项。要放到数组中的元素。这将创建     
//       具有n + 1 个元素的长度为 n + 1 的数组。使用该语法时
//        必须有一个以上元素。

声明数组
  var 数组名 = new Array(数组大小);
  例: var emp = new Array(3)

添加元素
    emp[0] = "AA";
    emp[1] = "BB";
    emp[2] = "CC";

也可以声明数组并赋初值:
     例: var emp = new Array("AA","BB","CC");


常用的属性:
length

常用的方法:
join     将数组中的元素组合成字符串
reverse  颠倒数组元素的顺序,使第一个元素成为最后一个,而最后一个元素成为第一个
sort     对数组元素进行排序(按照String类型进行)


小例子:
//打印金字塔型的直线

<HTML>
<HEAD>
<TITLE>For 循环演示</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
document.write("<H2 align=center>打印金字塔直线</H2>");
for (var i= 0; i<100; i=i+5){
   document.write("<HR align=center width=" + i+"%>");
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>


通过上述的小例子说明了for的用法,其他的do while ,while,if等条件循环判断语句,还是一句话,只要你会任何一门语言,那么我想这个对你们来说,简直是小菜一碟啊,因为你们都是大神。。。

JS两个最常见的内置函数:

eval 函数: 用于计算字符串表达式的值
isNaN 函数:用于验证参数是否为 NaN(非数字)
<SCRIPT LANGUAGE = "JavaScript">
   <SCRIPT LANGUAGE = "JavaScript">
   var str1=prompt("输入一个表达式,我给您计算,如:1+1", "");
   var result=eval(str1);
   document.write(str1+"="+result);
   var x = prompt("输入一些数据,我来告诉您是不是数字","0");
   if (isNaN(x)){ 
        alert (x + " 不是一个数字");
   }
   else{
        alert (x + " 是一个数字");
   }
</SCRIPT>



JS事件:
onClick     鼠标单击

onChange    文本内容或下拉菜单中的选项发生改变

onFocus     获得焦点,表示文本框等获得鼠标光标。

onBlur      失去焦点,表示文本框等失去鼠标光标。

onMouseOver 鼠标悬停,即鼠标停留在图片等的上方

onMouseOut  鼠标悬停,即鼠标停留在图片等的上方

onMouseMove 鼠标移动,表示在<DIV>层等上方移动

onLoad      网页文档加载事件

onSubmit    表单提交事件

onMouseDown 鼠标按下

onMouseUp   鼠标弹起


下面挑选几个举例:

onChange
<script language="javascript">
function changeBg()
{
	if(document.form1.bgColorList.value!="")
	{
		document.body.style.backgroundColor= 
                              document.form1.bgColorList.value;
	}
}
</script>

<select name="bgColorList" onChange="changeBg()">
      <option value="">---------</option>
      <option value="#FFCCFF">粉红浪漫</option>
      <option value="#6699FF">蓝色忧郁</option>
      <option value="#9966FF">紫色诱惑</option>
      <option value="#009966">绿色环保</option>
    </select>


onFocus和onBlur
<HEAD>
<SCRIPT language="JavaScript"  >
function myfun1( )
{
   if (document.myform.card.value=="请注意格式:10xxxxxx")
       document.myform.card.value="" ;
}
function myfun2( )
{
  var a=document.myform.card.value;
  if (a.substr(0,2)!="10" || isNaN(a))
  {
    alert("格式错误,请重新输入") ;
    document.myform.card.focus(); 
  }
}
</SCRIPT>
<STYLE type="text/css">
	Input { background-color: #55FFFF; font-size: 20px;
  		border: 1px solid;}
</STYLE>
<BODY>
   <FORM name="myform">
卡号:<INPUT name="card" type ="text"
		value="请注意格式:10xxxxxx"
		onFocus="myfun1( )" 
		onBlur="myfun2( )" /> 
       <BR/>
  密码: <INPUT name ="pass" type ="text" />
</FORM> 
</BODY>

onMouseOver和 onMouseDown事件
<HTML>
	<HEAD>
		<TITLE>图片切换</TITLE>
	</HEAD>
	<BODY>
		<A  href="http://www.mycom.cn">
 			<IMG src="dog1.jpg" name="picture"  
				width="400" height="155"
			onMouseOver=" src=‘dog2.jpg’ "  
       		onMouseOut=" src=‘dog1.jpg’ "/>
			低价转让哈士奇弟弟
		 </A>
		<H1> 移过来看看俺啊</H1>
	</BODY>
</HTML>



onLoad事件
<script language="javascript">

alert("页面没有显示完");

function over()
{
	alert("页面已经全部显示");
}
</script>
<body  onLoad="over()" >
……




此章节先暂时到这,未完待续。。。

JavaScript入门-基础认识

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
目录 1、JavaScript概述 2、HTML世界 3、JavaScript基本语法 4、JavaScript语句 5、JavaScript内置
目录 1、JavaScript概述 2、HTML世界 3、JavaScript基本语法 4、JavaScript语句 5、JavaScript内置
目录 1、JavaScript概述 2、HTML世界 3、JavaScript基本语法 4、JavaScript语句 <span la
目录 1、JavaScript概述 2、HTML世界 3、JavaScript基本语法 4、JavaScript语句 <span la
1.什么是壳 在一些计算机软件里也有一段专门负责保护软件不被非法修改或反编译的程序。它们一般都是
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML
一、什么是NOSQL NoSQL概念。 随着web2.0的快速发展,非关系型、分布式数据存储得到了快速的发展,它
Docker认识基础 作者:chszs,版权所有,未经同意,不得转载。博主主页: http://blog.csdn.net/chs
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现
《Javascript从入门到精通》第2章——HTML基础 2.1 HTML语言概述 HTML 和网络是紧密连接的,它应网
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号