美文网首页软件测试
月薪过万的软件测试攻略(十):JavaScript超简入门

月薪过万的软件测试攻略(十):JavaScript超简入门

作者: DayBreakL | 来源:发表于2018-05-18 17:12 被阅读107次

JavaScript (以下简称JS)是 Web 的编程语言,HTML 定义了网页的内容,CSS 描述了网页的布局,JavaScript 网页的行为,JS是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。学习这部分时,需要你已掌握了HTML语言以及CSS。

一、JavaScript 用法

  • JavaScript 是可插入 HTML 页面的编程代码。 插入 HTML 页面后,可由所有的现代浏览器执行。
  • HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
  • 脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。
  • 通常的做法是把函数放入 <head> 部分中,或者放在页面底部。

二、变量与方法

学习任何一门编程语言,最重要的是掌握变量与方法。

  1. 变量
  • 声明
    格式:
var a;

用var声明a是一个变量;

  • 初始化
a=1;

对变量的第一次赋值,叫做初始化,编程语言中,一个等号代表赋值,等于需要用两个等号。

  • 使用
    用变量名就可以使用;

例:

var a;    //声明变量a
a="hello world!"; //给a赋值,把hello world赋给a
alert(a); // 用变量名使用变量,alter表示弹框
  • 变量的特点
    一次声明,可以反复赋值。
  1. 方法
  • 声明

无参方法:

function 方法名()  {
}

有参方法:

function 方法名(a,b)  {
}
  • 使用
方法名();
  • 内置函数
    弹框,
    alert:带有一条指定消息和一个 OK 按钮的警告框
    comfirm:带有指定消息和 OK 及取消按钮的对话框

三、实战

  • 例一
<script>
    var a,b,c; //声明变量
    a=10; //给a赋值
    b=15; //给b赋值
    c=a+b; //给c赋值
    alert("a+b="+c); //内置函数,弹框,展示信息为a+b=c
</script>

展示结果为:


image.png

【tips1】加号,+,当+两边任意一边是字符串时,则是拼接符;当+两边都是数字时,+是运算符;

【tips2】程序运行的步骤:
从上自下读取命令行,读完就丢掉;


程序运行的步骤.png

1,命令行执行var a=1; ,变量池中储存变量a,并赋值a=1,var a=1;丢掉。
2,命令行继续执行var b=2; ,变量池中储存变量b,并赋值b=2,var b=2;丢掉。
3,命令行执行var c=a+b,变量池中储存变量c,并从变量池取出a,b的值,之和赋给c,把值存储到变量池中;
4,命令行执行alert(c);

  • 例二
    若程序需重复执行例一的代码该如何写?将例一的代码封装,需要是调用即可。
<script>
    var a,b,c;
    function add(){
    a=10;
    b=15; 
    c=a+b;
    alert("a+b="+c);
    }
    add();
</script>

把上述代码封装成方法,function声明,add为方法名,add()调用方法;

程序执行的顺序为


image.png

【tips】命令行不执行function,调用方法时才执行。

  • 例三
<script>
    var money;
    var food;
    dish(); 
    function dish(){  
        food=shopping("10"); 
        alert("1,开火");
        alert("2,锅里放入油");
        alert("3,放入"+food);
        alert("4,炒熟,装盘");
     } 
        
    function shopping(money){ 
        confirm("去超市购买鸡蛋和番茄");
        confirm("结账给了"+money+"元");
        return "鸡蛋和番茄"; 
     }  
</script>

程序运行的顺序为:


image.png

【tips】return,返回方法的结果,其它函数调用时,会调用这个结果。

课后练习:1、用Xmindx写出例三的程序运行过程。 2、对例三进行注释。

相关文章

网友评论

本文标题:月薪过万的软件测试攻略(十):JavaScript超简入门

本文链接:https://www.haomeiwen.com/subject/sfjgdftx.html