简单上手JS

本文不期待你看过就会用JS,作为新手如果阅读本文后知道JS能做什么,明白基础概念就可以,更深入的学习一定是要下功夫的。

首先分别编辑两个文件,一个是网页文件index.html,另一个是script.js,script.js文件首先需要新建一个记事本,敲上全部代码后另存为时类型选择所有文件,命名为script.js即可,要注意两个文件存储在同一目录下。

index.html

001.

002.

003.简单上手JS

004.

005.

006.

007.

015.简单上手JS

017.

加法计算:

018.

019.+

020.

021.

022.

023.

024.

xx

025.

026.

029.

030.

script.js

001.function run(){

002.var num1 = document.getElementsByName("num1")[0].value;

003.var num2 = document.getElementsByName("num2")[0].value;

005.if(str.indexOf(num1) == -1){

006.alert("num1不是数字!");

007.return false;

008.}

009.if(str.indexOf(num2) == -1){

010.alert("num2不是数字!");

011.return false;

012.}

013.var n1 = Number(num1);

014.var n2 = Number(num2);

015.var result = n1 + n2;

016.document.getElementById("result").value = result;

017.}

浏览index.html结果如下:

JS即JavaScript,是互联网最流行的脚本语言。JS可以动态改变HTML、验证用户输入数据、设计出各种炫酷的网页交互效果。

一、引入方式

JS常用的两种方式,一种是引入文件的方式,见004行,我们引入了script.js脚本文件,这样该文件的JS程序会在当前网页中运行;

另一种是直接在HTML嵌入,见026行~028行,我们在HTML中直接写JS代码。

两种方式都使用了标签,第一种直接使用src属性来指定路径,第二种直接在标签内写JS代码。

二、JS基础知识

1.变量

这里要介绍一下变量的概念,变量是一个随时改变的量,我们可以按照规矩定义字符来作为变量使用:变量名必须是以字母或下划线“_”开头,由字母、数字和下划线“_”组成,不能含有特殊字符和关键字。键字是指编程语言中固定使用的、具有特殊含义的字符串。

JS用关键字var来声明(声明的意思是,说明这是什么^_^)变量,在script.js中的第002~004行,第013~015行分别声明了六个变量:num1、num2、str、n1、n2、result;它们分别具有某种含义,便于发挥作用。

变量是有类型的,它是数字?还是字符?数字是可以相加的,字母是可以拼接的。

2.操作HTML

我们示例中有三种方式来找到HTML标签:

document.getElementById

document.getElementsByClassName

document.getElementsByName

试试从两个示例文件中找出来,尝试理解一下。

document.getElementById通过ID的方式找到HTML标签,在script.js的016行,通过这行代码指定了id为result的文本框的值为result变量

document.getElementsByClassName则是通过class名的方式查找,在index.html的027行,设定了class为help的第一个标签

的内容是“请在前两个文本框各填入一个数字,点击等号进行计算”,如何设定的?是因为后面使用了.innerHTML;为什么是第一个标签?因为你可以给很多HTML指定class="help",尽管示例中仅有一个help;为什么指定第一个后面用的是“[0]”?没错,0代表的就是第一个,多数编程语言中,计数都是从0开始的!作为人类的我们数数是1,2,3,4……这样,而程序语言中往往是0,1,2,3,4……

document.getElementsByName是表单专用,通过name值的方式来查找具体表单项,在script.js的002、003行中,分别用该语句获得了文本框num1和文本框num2的值,怎么获取的,通过使用.value;因为name值可以有重复,所以同class获取的方式一样,也会有“[0]”!

3.alert弹框

使用方法:alert('这里是你想要显示的消息文字');

你可以用于弹出一个警告框,输出一个变量值等等。参考script.js中的006行和010行,分别用于提示输入不是数字的情形:

4.事件

事件可以简单理解页面上发生了什么,你移动了鼠标,你点击了鼠标,你按了键盘等等…… 这些就是事件,你可以先记住这一个,index.html的第021行:

onclick="run();"

onclick代表鼠标点击事件,这行代码使得你点击这个按钮时,将执行run()函数。

5.函数

函数可以理解为一段可以重复使用的代码,JS中的定义如下:

function 函数名(){

...

}

函数的命名与变量命名是相同的。可以看下script.js文件,整个文件只有一个run函数,关于函数你必须知道的是必须调用才能执行,调用方法:

函数名();

我们可以在自己需要的时候调用,不调用不执行。观察第021行,结合事件来看,onclick="run();"的含义就是点击执行run函数!

页面打开的时候,我们发现index.html中的内嵌JS已经执行了,所以我们看到了在加法计算下方青色的说明文字。但script中的加法运算函数run却没有执行;我们接下来看看run函数做了哪些工作;

三、个位加法示例

run函数执行起来先通过name属性获得文本框num1和文本框num2的值,分别存储到变量num1和num2中;

我们知道变量是有类型的,只有数字才能相加,这里将要对获取的值是不是数字进行判断,那么定义了一个变量为字符串"0123456789";

注意document.getElementsByName获取的是字符,尽管你敲入的是数字!所以我们的逻辑是只要判断敲入的字符是不是在字符串"0123456789"中,我们就可以确认是否是数字了。这里用到了indexOf(),比如005中的str.indexOf(num1)的含义是num1中存储的字符是否在str中,如果存在则得出位置,如果不存在则返回-1;

if(条件){

...

}

这是条件判断语句,如果满足了条件,就执行{}内的代码,否则就不执行;这样结合起来看,第005~012行代码的作用就是判断num1、num2是否是数字字符,不是就弹窗警告,return false;是指函数返回false;这里可以理解为程序终止;

接下来013、014行利用了Number()函数将数字字符真正转换为数字,并进行加法计算,将结果给到result变量,最后找到result这个id的文本框,将结果填进去,实现了页面上的回显。

由上述过程可知,run是发生了点击事件onclick才执行的,并没有在页面一打开就运行。

最后,大家能留意到我在封面放了一张jQuery的图片,作为最优秀的JavaScript库,它极大地简化了JavaScript编程,它将是你必定要学习的内容。

小练习:

1.尝试将JS的run方法改成减法运算

2.百度百科搜索并浏览“javascript”内容

3.百度百科搜索并浏览“jQuery”内容

接下来的文章,我会介绍用搜索引擎来学习和解决问题。欢迎关注互联网设计兵团!

也欢迎你加入群一起学习交流!

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180308G1JVGY00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券