初识Javascript

最新推荐文章于 2018-08-04 16:34:41 发布

zzu_wlan

最新推荐文章于 2018-08-04 16:34:41 发布

阅读量209

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zzu_wlan/article/details/81286368

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

来不及解释了，快跟我去幼儿园

前天刚刚走下了html和css的小船。今天我们开始登上javascript的小车。这次绝对不是塑料玩具遥控车，大家坐稳了。

首先我们先来认识一下JavaScript是什么。

JavaScript是一种轻量级的编程语言，主要用于动态网页的编程，他从服务端被下载到客户端，由客户端浏览器解释，执行。js是基于对象的脚本语言。而通常浏览器打开一个网页的速度主要取决于解析执行js的速度。

JavaScript作用1、表单验证（最主要目的）；2、页面特效；3、动态调整页面内容；

而我们要学习一个新的编程语言我们就要从这几个方面下手：关键字，标识符，常量和变量，运算符，注释，函数，数组等。

首先我们来看js脚本定义的位置。与css类似，我们同样可以将JavaScript脚本定义在外部js文件或定义在HTML文档的script标签中

若定义在外部，则需要通过< script scr=" js文件路径 "> <script> 引入到HTML文档中。

若定义在内部则格式为 <script type=" text/javascript" > JavaScript代码 </script>

接下来我们来看js的注释。他的注释格式与c语言相同使用 // 可以在之后添加单行注释也可以/* 开头直到 */ 结尾。

变量的定义。 在JavaScript中我们使用 var 关键字声明变量，不必考虑声明变量的数据类型，声明变量时可以同时为变量赋值。如果变量没有赋值，则其值为undefined.

JavaScript的数据类型一共有七类：字符串、数字、布尔、数组、对象、null、undefined

JavaScript的运算符与c语言的运算符大致相同，这里就不一一记录。

不过JavaScript中有一个关系运算符 === 其表示为数据类型和数据的值都相同时返回true

JavaScript的分支与循环语句与c语言也是类似的，不过JavaScript中有一种for...in 语句用于对数组或者对象进行循环操作

语法： for( 变量名 in 对象或数组 )

{ 执行体； }

js中函数的定义，主要可分为两种方式

function name( [参数列表] )

{ 函数体； }

或者 var name = function( [参数列表] )

{ 函数体； }

第一种定义称为定义式，第二种称为变量式。在实际应用中二者没有区别，但在调用中顺序上差异:有名函数可以在调用之后再定义，而匿名函数则不可以。

JavaScript函数根据函数体中return返回值语句来判断返回值类型；若不存在return返回值语句，则函数无返回值。

下面我们先看一个实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		function showInput(){
			var stuNameInput = document.getElementById("stuName");
//根据id为stuName向stuNameInput返回一个组件
			var stuName =  stuNameInput.value;
//将组件的value赋值给stuName
			var passwdInput = document.getElementsByName("passed");
//根据name为password向passwdInput返回多个组件
			var passwd = passwdInput[0].value;
//将第一个组件的value赋值给passwd
			alert("你输入的学生姓名是："+stuName+"密码是"+passwd);
			
		}
	</script>
	<body>
    <form>
    	<input type="text"  id="stuName" value="hello" />
    	
    	<input type="password" name="passed" id="passed" value="" />
    	<button onclick="showInput()">显示输入内容</button>
    	
    </form>
	</body>
</html>

我们在代码的script标签里定义了一个showinput函数。其中使用了一些JavaScript语句。

document.x 当前表示文档对象，getElementById 可以从名字上看出通过id值得到组件。getElementsByName根据组件的name属性获取多个组件 name属性值是可以相同的,所以是elements。

alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

onclick事件元素，点击所在按钮触发onclick的事件元素。

在浏览器运行：