什么是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入门教程知识点解析 #### 一、JavaScript简介及重要性 - **JavaScript定义**：JavaScript是一种脚本语言，由Netscape公司在1995年首次推出，随后成为网页开发中最广泛使用的语言之一。它...
### JavaScript入门知识点详解 #### 一、JavaScript简介与基本概念 根据给定文件中的描述，我们可以看到“JavaScript”被重复提及多次，这表明本篇文章主要介绍JavaScript的基础知识。JavaScript是一种广泛用于...
### JavaScript入门教程知识点详解 #### 一、JavaScript简介与重要性 **JavaScript**是一种轻量级的编程语言，主要用于Web应用程序开发。它以其强大的功能、简单的语法和广泛的浏览器支持而闻名，成为前端开发中不...
### JavaScript从入门到精通基础易学重点教程 ...以上内容为《JavaScript从入门到精通基础易学重点教程》的部分概述，旨在帮助读者建立起对JavaScript的基本认识，并为后续的学习打下坚实的基础。
根据提供的文件信息，我们可以整理出一系列关于JavaScript的基础知识点，这些知识点特别适合初学者入门学习。 ### JavaScript基础概念 **JavaScript**是一种广泛使用的编程语言，它主要用于网页开发，为静态的HTML...
通过这个全面的教程，零基础的学习者可以逐步建立起对JavaScript语言的全面认识，为今后的Web开发之路打下坚实基础。每章的内容都紧密联系，逐步深入，确保初学者能够逐步掌握JavaScript的核心概念和技术。
【标题】"django入门-电商网站项目"是一个适合初学者的教程，主要目的是引导学习者了解和掌握如何使用Django框架构建一个简单的电子商务网站。在这个项目中，你将学习到如何利用Django的强大功能来搭建功能完备的...
这份压缩包中包含了四本经典的JavaScript相关书籍，它们将引导你从入门到精通，掌握JavaScript的核心概念和实际应用。 首先，《JavaScript.DOM编程艺术（第2版）》是一本深入浅出介绍JavaScript与DOM交互的书籍。...
JavaScript是一种广泛应用于网页和网络应用的编程语言，尤其在客户端脚本方面...通过不断实践和理解这些基础知识，你可以逐步建立起对JavaScript的深入认识，为进一步学习更复杂的JavaScript概念和技术打下坚实基础。
本教程旨在为初学者提供一个快速入门JavaScript的途径，通过学习基础语法和常用技巧，帮助大家建立起对JavaScript的基本认识。 #### 二、JavaScript基础语法 ##### 2.1 变量与数据类型 - **变量声明**：在...
javaScipt基础入门篇-对js的基本认识
本入门教程旨在帮助初学者理解JavaScript的基础知识，并逐步掌握其核心概念和实际应用。 1. **JavaScript语言概述** (第1章) JavaScript最初由Brendan Eich在1995年为Netscape Navigator浏览器设计，现在已经成为...
- 强调了尽管JavaScript易于入门，但要精通它却非常具有挑战性。 - **1.1.6 令人迷惑的选择--锦上添花还是雪中送炭** - 探讨了何时以及如何在项目中恰当地使用JavaScript。 - **1.1.7 回到问题上来** - 强调了...
更详细的评论可以看 Realazy 在豆瓣上的评论在 豆瓣 上的评论《通往终点的过程与终点本身同样重要》 基础学习书籍：《JavaScript 权威指南》 《JavaScript DOM 编程艺术》只是入门，介绍了编程思想
**Ajax基础入门简介** Ajax（Asynchronous JavaScript and XML）是一种用于创建快速、动态网页的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这一技术的出现极大地提升...
总的来说，“认识JavaScript共1页.pdf”可能是一个简明扼要的JavaScript入门教程，尽管内容有限，但对于初学者来说，掌握这些基础知识是理解和进一步学习JavaScript的起点。深入学习JavaScript，还需要实践更多实际...
总的来说，这篇JavaScript基础教程提供了一个循序渐进的学习路径，让学生从零开始逐步掌握JavaScript的基本语法和常用技巧，为创建交互式网页打下坚实的基础。随着学习的深入，学生将能够运用JavaScript实现更为复杂...
### JavaScript知识点总结《一》 ...以上是关于JavaScript的基础知识点总结，涵盖了初步认识JavaScript以及JavaScript的基本语法等内容。这些知识点对于初学者来说非常重要，有助于快速入门并进一步深入学习。
【Java程序设计任务驱动式教程-任务十五-认识Java Applet (Applet入门)】 Java Applet是Java技术的一部分，它允许开发人员创建可以在Web浏览器中运行的小型应用程序，为网页提供动态交互功能。在Java早期，Applet是...