JavaScript快速入门

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

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

JavaScript快速入门

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

index.html

javascript.js

他们的关系如下图所示:

JavaScript快速入门

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

JavaScript快速入门

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

JavaScript编写的位置

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

index.html

放在<head>部分

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

放在<body>部分

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

JavaScript中的语句和符号

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

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

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

JavaScript中的注释

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

JavaScript中的变量

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

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

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

  • 只能使用字母、数字、下划线(_)、美元符号($)来命名。
  • 并且不能以数字开头。不能跟这个语言的关键字和保留字同名。
  • 变量名严格区分大小写,也就是myChar和mychar是不一样的。
  • 遵守驼峰命名法。

JavaScript中的判断语句

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

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

JavaScript中的函数

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

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

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

JavaScript输出内容

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

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

用法二:通过变量,输出内容。

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

用法四:输出HTML标签,标签使用 "" 括起来。

JavaScript中的alert提示框

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

语法:

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

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

JavaScript快速入门

JavaScript中的confirm消息对话框

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

语法:

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

在浏览器运行代码,效果如下:

JavaScript快速入门

JavaScript中的prompt消息对话框

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

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

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

语法:

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

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

运行后效果如下:

 

JavaScript快速入门

JavaScript中打开新窗口

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

语法:

参数说明:

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

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

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

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

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

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

JavaScript快速入门

JavaScript关闭窗口

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

语法:

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

运行后效果如下:

JavaScript快速入门

  • 3
  • 2,164 views
    A+
发布日期:2015年12月05日  所属分类:iOS
标签:
六阿哥

目前评论:3   其中:访客  3   博主  0

  1. avatar dearbaba 0
  2. avatar 爱问客 1
  3. avatar gv15mt 0
评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: