什么是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()" >
……
此章节先暂时到这，未完待续。。。
分享到：
相关推荐
javaScipt基础入门篇-对js的基本认识
更详细的评论可以看 Realazy 在豆瓣上的评论在 豆瓣 上的评论《通往终点的过程与终点本身同样重要》 基础学习书籍：《JavaScript 权威指南》 《JavaScript DOM 编程艺术》只是入门，介绍了编程思想
Python由荷兰数学和计算机科学研究学会的吉多·范罗苏姆于1990年代初设计，Python提供了高效的高级数据结构，还能简单有效... Python教学简单易懂,零基础小白也可以学会，只要你有耐心学习从入门到精通.从小白到高手
本季课程为JavaScript基础语法篇，着重介绍了JavaScript脚本语言的基础语法部分内容包含：◆ 认识JavaScript脚本语言、发展史、编译工具◆ JavaScript中的变量、数据类型、类型转换◆ 条件选择（if--else, if--else ...
很经典的一本JavaScript电子书，内容通熟易懂，适合初学者的入门以及有基础人士对JavaScript的进一步认识.
你可能已经听说过很多种流行的编程语言，比如非常难学的C语言，非常流行的Java语言，适合初学者的Basic语言，适合网页编程的JavaScript语言等等。 那Python是一种什么语言？首先，我们普及一下编程语言的基础知识。...
React Native是当前移动端开发中的优秀解决方案。《React Native：用...如果你对开发Web端的原生移动应用感兴趣，《React Native：用JavaScript开发移动应用》就是一本不容错过的以实例代码为引导的入门书籍。
最近学习了一小段时间的React，对一些React开发组件的基础有了一点认识，跟着教学视频，自己实现了一个ToDoList组件的功能，今天把做这个组件的过程记录一下，加深学习印象，给同样的前端入门者做一个参考。...
为便于对 JavaScript 有一个直观的认识，本节会提供几个简单的实例供 JavaScript 入门学习之用。下面的代码是一个弹出提示框的例子： 代码如下: [removed] alert(“我是提示文字！”); [removed] 将上面...
第2章 Javascript基础.ppt 第3章 Node.js基础入门.ppt 第4章 异步编程与包管理.ppt 第5章 http模块.ppt 第6章 Web开发中的模板引擎.ppt 第7章 Node.js中的文件操作.ppt 第8章 认识express模块.ppt 第9章 MySQL数据库...
阅读笔记201 大家好，我叫bana，我在安曼长大，我在费城大学2018年学习计算机科学，成绩为（良好）。 工作经历：（1-12-2019至...HTML和JavaScript入门 HTML，CSS和JS基础 [HTML，CSS和JS基础]（ ） HTML列表，使用J
11.2 HTML 5的新认识 222 11.2.1 兼容性 222 11.2.2 实用性和用户优先 222 11.2.3 化繁为简 223 11.3 无插件范式 223 11.4 HTML 5的新特性 224 11.5 小结 224 第12章 HTML 5与HTML 4的区别 225 ...
技术基础 New Folder 多样式星期名字转换 [Design, C#] .NET关于string转换的一个小Bug Regular Expressions 完整的在.net后台执行javascript脚本集合 ASP.NET 中的正则表达式 常用的匹配正则表达式和实例 经典正则...
第1章 jQuery开发入门/1 1.1 jQuery概述/2 1.1.1 认识jQuery /2 1.1.2 jQuery基本功能/2 1.1.3 搭建jQuery开发环境/3 1.1.4 编写第一个简单的jQuery应用/3 1.1.5 jQuery程序的代码风格/5 1.2 jQuery的简单...
全面认识前端知识领域PPT,是一个组内分享前端入门知识的PPT,在React和Vue等全面霸屏的时代,我们是否欠缺前端最基础的一些东西呢?这篇PPT可以带你了解下,内容不深,还能让你有些小收获.
入门什么是Dyno？ Dyno是一个Yeoman生成器，为基础Web开发提供了一组不错的默认值。 它通过炫酷的技术搭建了一个准系统的webapp： （通过Babel） 用于依赖性管理运行任务的用于在开发过程事物保持同步代替了讨厌的...
搅拌机基础知识2.8 搅拌器大师 WordPress的 创建一个免费的电子商务网站Nayyar Shaikh CSS 使用Matt的CSS网格创建布局 JavaScript 事件循环 与Sumit学习 扎实的原则 设计模式 你不认识凯尔·辛普森（Kyle ...
刷完这些练习题，基本对数据结构和算法有自己的认识体会，基本大部分面试题都能写得出来，国内的 BAT、TMD 应该都不是问题 从 4 月份找工作开始，从 0 开始刷 LeetCode，中间大概花了一个半月(6 周)左右时间刷完 240...
第一篇介绍了Java EE的概念和Java语言基础以及实际开发中涉及的各种基础技术，包括SQL语言与MySQL、XML、HTML、CSS、JavaScript、Servlet、JSP等，可使读者全面认识Java EE以及各种基础技术。第二篇以Java EE企业...