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说道:

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

  2. 爱问客说道:

    [强] 太喜欢了

  3. gv15mt说道:

    我来看看,欢迎不欢迎?

发表回复

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