JavaScript入门-基础认识 javascript事件内置函数基础

程序员文章站 2022-05-09 08:15:45

...

什么是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 事件内置函数基础

上一篇： WEB服务器

下一篇： spring boot实战

JavaScript入门-基础认识 javascript事件内置函数基础

JavaScript基础知识（函数）

JavaScript, 函数是实现异步的基础

Javascript入门学习第六篇 js DOM编程_基础知识

JavaScript 学习笔记（十六） js事件_基础知识

JavaScript中的事件处理_基础知识

JavaScript与JQuery框架基础入门教程

(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享_javascript技巧

Javascript 入门基础学习_基础知识

Javascript入门学习第五篇 js函数第1/2页_基础知识

JavaScript入门之对象与JSON详解_基础知识