JavaScript快速入门

/ 3评 / 0赞

iOS开发者为什么学JavaScript?

JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分。后面JavaScript统一使用js来代替（简称）。

目前基本所有浏览器都支持js，不管是iOS开发中需要JS交互还是使用当下最火的React Native框架来做移动端跨平台开发，我们都需要掌握js，当然，他的作用远远不止于此。并且，JavaScript非常容易学习，学习环境无处不在，只要有文本编辑器，就能编写js程序，在Mac下个人推荐使用Sublime Text编辑器来学习。

JavaScript与Java的关系：就像雷锋和雷峰塔一样，就像印度和印度尼西亚一样，就像张三和张三丰一样，就像周杰和周杰伦一样，就像黑客和博客一样，就像北大和北大青鸟一样，就像卡巴斯基和巴基斯坦一样。他们有何关系？

JavaScript编写方式

提醒：学习js之前，你必须要熟悉最基本的HTML、CSS标签和语法，推荐学习网站：http://www.divcss5.com。

我们来看看如何写入JS代码？

你只需一步操作，使用<script>标签在HTML网页中插入JavaScript代码。注意，<script>标签要成对出现，并把js代码写在<script><script/>之中。

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>插入js代码</title>
		<!-- 这里是js代码 -->
		<script type="text/javascript">
    		document.write("开启JS之旅!");
		</script>
	</head>
	<body>
	</body>
</html>

<script type="text/javascript">表示在<script><script/>之间的是文本类型(text)，而javascript是为了告诉浏览器里面的文本是属于js语言。将上面代码保存为.html后缀的文件，并用浏览器打开，就能看到下图效果。

Snip20151205_1

上面是直接在HTML文件中写入js程序，我们也可以新建一个.js后缀的js源文件，将HTML文件和js代码分开，然后再将js文件引入HTML文件中，注意这里引入时是指定的js文件的路径而不是给一个文件名会自动去搜索。

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>引入js文件</title>
		<!-- 引入js文件 -->
		<script type="text/javascript" src="javascript.js">
		</script>
	</head>
	<body>
	</body>
</html>

javascript.js

// 这是js代码
document.write("开启JS之旅!");

他们的关系如下图所示：

Snip20151205_3

打浏览器打开index.html后的效果：

Snip20151205_4

既然我们有两种方式来编写js程序，那么我们应该如何选择呢？

JavaScript编写的位置

上面一个例子我是将js代码卸载head部分的，其实我们可以将js代码放在HTML文件中的任何位置，但是我们一般放在head或者body部分。

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>js代码的位置</title>
		<script type="text/javascript">
			// 这是js代码
			document.write("开启JS之旅!");
		</script>
	</head>
	<body>
		<script type="text/javascript">
			// 这是js代码
			document.write("开启JS之旅!");
		</script>
	</body>
</html>

放在<head>部分

最常用的方式是在页面中head部分放置js代码或引入js文件，因为浏览器HTML文件是从上到下依次解析的，所以会先解析head部分的js代码，然后才解析其余后面的部分。所以进行页面初始化的js必须放在head里面，因为初始化都要求提前进行（比如给页面body设置css等）。如果是通过事件调用执行的function那么对位置没什么要求，可以放到HTML文件末尾。

放在<body>部分

js代码在网页读取到该语句的时候就会执行。

JavaScript中的语句和符号

js语句是发给浏览器的命令，这些命令的作用是告诉浏览器要做的事情。每一句js代码都以英文状态的分号 ; 结尾，来表示语句的结束。

<script type="text/javascript">
	alert("hello!");
</script>

上面例子中的 alert("hello!"); 就是一个js语句。再来看看下面的例子，有三条语句，每句后面都有 ; ，按顺序执行语句。

<script type="text/javascript">
	alert("I");
	alert("Love");
	alert("JavaScript");
</script>

注意： ; 要在英文状态下输入，同样js中的代码和符号都要在英文状态下输入。虽然分号 ; 也可以不写，但我们要养成编程的好习惯，记得在语句末尾写上分号。

JavaScript中的注释

注释的作用这里就不提了，都知道。js代码的注释也分两种，多行注释和单行注释，并且注释和我们Objective-C、Swift中的注释写法是一样的，不过js注释不支持多行注释中嵌套多行注释。

<script type="text/javascript">
	// 这是单行注释，我们要养成良好的注释习惯
	
	/*
	alert("I");
	alert("Love");
	alert("JavaScript");
	这是多行注释，我们要养成良好的装逼方式
	*/
</script>

JavaScript中的变量

变量就是可以变化的量，从编程角度讲，变量是用于存储某种/某些数值的存储器，每个变量都有变量名。这些就不扯了，大家都是有多年开发经验的程序员。。。

js中定义变量使用的关键字和Swift中定义变量的关键字相同，都是var，语法如下：

var 变量名
<script type="text/javascript">
	var myNum = 8;
</script>

变量名命名规范如果你不知道，这个也都知道了，那我就再重复下吧。

JavaScript中的判断语句

if...else语句基本每个语言都有，作用是在指定条件城里时执行代码，在条件不成立时执行else后的代码。

<script type="text/javascript">

	var myage = 18;

	// myage>=18是判断条件
	if(myage>=18) { 
		document.write("你是成年人。");
	} else { 
		// 否则年龄小于18
		document.write("未满18岁，你不是成年人。");
	}
</script>

上面出现的document.write()，相当于我们Objective-C中的NSLog()、Swift中的print()作用类似，就是输出字符串。

JavaScript中的函数

函数是完成某个特定功能的一组语句，这里我们只需要注意js中函数的语法和调用方法就行了。其他是啥函数相信能看到这篇文章的人都会的。

在js中定义函数使用的关键字是function，是不是感觉和php定义函数语法是一样的？没错，就是一模一样的。

function 函数名(参数) {
     函数代码;
}

下面来编写一个简单的js函数和调用js函数的方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>js函数定义和调用</title>
	</head>
	<body>
		<form>
			<input type="button" onclick="helloJs()" value="点我调用函数" />
		</form>
	</body>
	<script type="text/javascript">
		function helloJs() {
			// 这是js代码
			document.write("你好js!");
		}
	</script>
</html>

JavaScript输出内容

在上面例子已经用到的 document.write() 可以用于直接向HTML输出流写内容，简单的说就算直接在网页中输出内容。

用法一：输出内容用 "" 括起来，直接输出 "" 号内的内容。

<script type="text/javascript">
	document.write("这是字符串！"); 
</script>

用法二：通过变量，输出内容。

<script type="text/javascript">
	var str = "这是字符串！"
	document.write(str); 
</script>

用法三：输出多项内容，内容之间用 + 号拼接。

<script type="text/javascript">
	var str = "这是字符串！"
	document.write(str+"拼接的字符串"); 
</script>

用法四：输出HTML标签，标签使用 "" 括起来。

<script type="text/javascript">
	var str = "这是字符串！"
	document.write(str+"<br />"+"拼接的字符串"); 
</script>

JavaScript中的alert提示框

这个类似与我们iOS中的UIAlertView控件，只不过这是在网页中弹出，如果你不点确定就不能进行任何操作。

语法：

alert(字符串或者变量);

下面来看看这段代码，在浏览器弹出提示框，显示一段文字。

<script type="text/javascript">
	var str = "这是字符串！"
	alert(str); 
</script>

运行后效果如下图，如果我们不点 好 ，就不能进行任何操作。这里显示什么文字是跟浏览器有关的，我使用的是Safari按钮是 好 ，使用Firefox就变成 确定 了。

Snip20151205_6

JavaScript中的confirm消息对话框

confirm其实和iOS中的UIAlertView也是差不多的，UIAlertView可以设置各种属性，添加多个按钮并监听按钮的点击，可以这样理解confirm。不同的是confirm有Boolean类型的返回值，可以用来判断用户的点击了“确定”(true)还是“取消”(false)。

语法：

confirm(字符串或者变量)

来看看下面这段代码，判断用户点击了确定还是取消。

<script type="text/javascript">
	var message = confirm("你喜欢我吗？");
	if (message == true) {
		document.write("谢谢你的喜欢");
	} else{
		document.write("你为什么不喜欢我");
	};
</script>

在浏览器运行代码，效果如下：

Snip20151205_8

JavaScript中的prompt消息对话框

prompt其实还是和iOS中的UIAlertView设置某些属性后的效果一样，prompt比起上面将的confirm多了文本输入。

参数：prompt有两个参数，一个是弹出来的消息对话框显示的提示文字。一个是文本框中的内容，这个是可修改的。

返回值：点击了确认按钮，文本框中的内容将作为函数的返回值。点击了取消按钮，则返回null。

语法：

prompt(第一个参数,第二个参数);

注意：这里并不是一定要写两个参数，如果只写一个参数则文本框中内容为空。

下面来看一段简单的示例代码，点击了确认则提示文本框中的内容，否则提示点击了取消。

<script type="text/javascript">
	var message = prompt("请输入任意内容");
	if (message != null) {
		alert("文本框内容："+message);
	} else{
		alert("点击了取消");
	};
</script>

运行后效果如下：

 

Snip20151205_10

JavaScript中打开新窗口

js中open()函数可以查找一个已经存在或者新疆的浏览器窗口。

语法：

window.open([url],[窗口名称],[参数字符串])

参数说明：

这里[]表示可选参数，这三个参数都是可选参数。

url：在窗口中要显示网页的网址或路径，如果省略这个参数或者值是空字符串，那么窗口就不显示任何文档。

窗口名称：被打开窗口的名称，如果加“_top”、“_blank”、“_selft”会有特殊意义，这个和HTML里<a>标签参数作用一样。

参数字符串：可以设置窗口的各种参数，每个参数用逗号隔开，比如窗口的尺寸、菜单栏、工具栏等。

下面来看一段简单的示例代码，在新窗口中打开我的博客。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>打开新窗口</title>
	</head>
	<body>
		<script type="text/javascript">
			function openMyBlog() {
				window.open("https://blog.6ag.cn", "_blank","width=600,height=400,top=200,left=200,menubar=no,toolbar=no,scrollbars=no,status=no");
			}
		</script>
		
		<form>
			<input type="button" onclick="openMyBlog()" value="新窗口打开我的博客">
		</form>

	</body>

</html>

运行并点击按钮后效果如下：

Snip20151205_12

JavaScript关闭窗口

使用close()可以关闭窗口，以上一个例子再继续讲解这个函数的作用，window.open()是有返回值的，返回新打开的窗口对象，我们可以把这个窗口对象调用一次close()方法，就能关闭窗口。

语法：

// 关闭本窗口
window.close();

或

// 关闭指定的窗口
窗口对象.close();

我们就来关闭我们刚打开的新窗口吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>打开新窗口</title>
	</head>
	<body>
		<script type="text/javascript">
			// 用于保存打开的窗口对象
			var newWindow;
			// 打开新窗口
			function openMyBlog() {
				newWindow = window.open("https://blog.6ag.cn", "_blank","width=600,height=400,top=200,left=200,menubar=no,toolbar=no,scrollbars=no,status=no");
			}

			// 关闭指定窗口
			function closeMyBlog() {
				newWindow.close();
			}

		</script>

		<form>
			<input type="button" onclick="openMyBlog()" value="新窗口打开我的博客"><br />
			<input type="button" onclick="closeMyBlog()" value="关闭新窗口">
		</form>

	</body>

</html>

运行后效果如下：

1

  1. dearbaba说道：
    2016年1月17日 11:55

    推荐个搜索博客问答的IT搜索引擎 http://www.itdaan.com 。

    回复
  2. 爱问客说道：
    2015年12月26日 09:46

    [强] 太喜欢了

    回复
  3. gv15mt说道：
    2015年12月14日 10:47

    我来看看，欢迎不欢迎？

    回复

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注