月薪过万的软件测试攻略（十）：JavaScript超简入门
2018-05-18 本文已影响107人
DayBreakL
JavaScript （以下简称JS）是 Web 的编程语言，HTML 定义了网页的内容，CSS 描述了网页的布局，JavaScript 网页的行为，JS是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。学习这部分时，需要你已掌握了HTML语言以及CSS。
一、JavaScript 用法
- JavaScript 是可插入 HTML 页面的编程代码。 插入 HTML 页面后，可由所有的现代浏览器执行。
- HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
- 脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
- 通常的做法是把函数放入 <head> 部分中，或者放在页面底部。
二、变量与方法
学习任何一门编程语言，最重要的是掌握变量与方法。
- 变量
- 声明
格式：
var a;
用var声明a是一个变量；
- 初始化
a=1;
对变量的第一次赋值，叫做初始化，编程语言中，一个等号代表赋值，等于需要用两个等号。
- 使用
用变量名就可以使用；
例：
var a; //声明变量a
a="hello world!"; //给a赋值，把hello world赋给a
alert(a); // 用变量名使用变量，alter表示弹框
- 变量的特点
一次声明，可以反复赋值。
- 方法
- 声明
无参方法：
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，返回方法的结果,其它函数调用时，会调用这个结果。
