前端开发之基础篇（六）JavaScript动态脚本语言：函数+参数+作用域+返回值+递归+视频教程...
2020-07-13 05:19
453 查看
JavaScript 初识函数
方法的定义
函数就是包裹在花括号中的代码块，使用了关键词 function：关键词 function 必须是小写的
function functionname(){
执行代码
}
方法的使用
通过方法名+括号来使用方法
如：
functionname();
上面这句代码就是使用方法名为functionname的方法，必须加上“（）”，“（）”是方法的标志，不可不写。
方法最简单的功能就是将一部分代码放到一起，组成一个代码快，在需要的时候直接执行。因此，方法在写好后是不会自动执行的，除非使用方法，方法里面的代码才会被执行
可以在HTML元素的点击事件中使用方法，HTML的点击事件就是onclick属性。
如：
实例;demo02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--在onclick属性中使用方法-->
<button onclick="sum()">点击可计算10+20的结果</button>
</body>
<script type="text/javascript">
//通过关键字function来定义方法，方法名后面必须跟（）
function sum(){
var a = 10;
var b = 20;
var c = a + b;
alert(c)
}
</script>
</html>
JavaScript 函数（高级）
函数参数
函数名后面的括号里面写的就是参数。参数的作用就是用于函数内部和函数外部数据的传递。也就是说：可以通过参数把函数外面的数据传入函数内部，并在内部使用，而且不会改变外部数据的值。
参数其实也就是变量。
语法：
functionName(parameter1, parameter2, parameter3) { // 要执行的代码…… }
参数的个数不限
function getNumber1($number){
alert($number);
}
function getNumber2($n1,$n2){
alert($n1 + $n2);
}
参数只能在函数内部使用，不可以在函数外使用函数内的参数和变量
如：
function getNumber3($number){
$inner = $number;
}
document.write($inner);
会出现如下错误提示
表示未定义的变量
function getNumber3($number){
$inner = $number;
}
document.write($number);
会出现如下错误提示
变量的作用域
变量的位置不同，分为全局变量和局部变量
- 全局变量的作用范围是所有代码块，也就是说在任何一个位置都可以直接访问全局变量
- 局部变量的作用范围是某一个代码块内部，也就是说只能在当前代码块内部使用。
实例：demo12 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<table>
<tr>
<th colspan="4"><input type="text" id="show" /></th>
</tr>
<tr>
<td><button onclick="getNumber(7)">7</button></td>
<td><button onclick="getNumber(8)">8</button></td>
<td><button onclick="getNumber(9)">9</button></td>
<td><button onclick="getChar('*')">*</button></td>
</tr>
<tr>
<td><button onclick="getNumber(4)">4</button></td>
<td><button onclick="getNumber(5)">5</button></td>
<td><button onclick="getNumber(6)">6</button></td>
<td><button onclick="getChar('/')">/</button></td>
</tr>
<tr>
<td><button onclick="getNumber(1)">1</button></td>
<td><button onclick="getNumber(2)">2</button></td>
<td><button onclick="getNumber(3)">3</button></td>
<td><button onclick="getChar('+')">+</button></td>
</tr>
<tr>
<td><button onclick="del()">c</button></td>
<td><button onclick="getNumber(0)">0</button></td>
<td><button onclick="compute('=')">=</button></td>
<td><button onclick="getChar('-')">-</button></td>
</tr>
</table>
</body>
<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
</html>
实例：demo12 CSS
table{
border-collapse: collapse;
margin: auto;
}
th,td{
border: 6px solid gray;
text-align: center;
width: 60px;
height: 60px;
}
th input{
height: 35px;
width: 90%;
font-size: 20px;
text-align: center;
}
td button{
font-size: 20px;
width: 60px;
height: 60px;
margin: 0;
padding: 15px;
}
td:nth-child(4n) button{
background-color: blueviolet;
color: white;
}
实例：demo12 JS
$number = ''; //保存每次点击的数字（全局变量）
$up = ''; //保存上次点击的数字 （全局变量）
$char = '' //保存点击的运算符号（全局变量）
/**
* 获取计算机按钮按下的数字
*/
function getNumber($n) {
$number += '' + $n;
document.getElementById('show').value += $n;
console.log('数字：'+$number+'----上一个数字：'+$up);
}
/**
* 获取计算机按钮按下的符号
*/
function getChar($c) {
$char = $c;//把按下的符号键保存到char变量里面
$up = $number;//把上一个数字保存到up变量里面
$number = ''//把number变量重新变为空字符串，便于记录下一个数字
console.log('符号：'+$char+'----上一个数字：'+$up);
document.getElementById('show').value += $c;
}
/**
* 计算结果
*/
function compute() {
$up = parseInt($up);
$number = parseInt($number);
switch($char) {
case '*':
document.getElementById('show').value = ($up*$number);
break;
case '/':
document.getElementById('show').value = ($up/$number);
break;
case '+':
document.getElementById('show').value = ($up+$number);
break;
case '-':
document.getElementById('show').value = ($up-$number);
break;
default:
break;
}
}
/**
* 删除
*/
function del(){
$up = '';
$number = '';
document.getElementById('show').value = '';
}
效果图
函数参数数组Arguments
实例：demo13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() {
var sum = 0;
for(var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
document.write(x)
</script>
</html>
结果：871
函数返回值
有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。
<script type="text/javascript">
//定义函数
function myFunction() {
var x = 5;
return x;//在这里返回一个值，并且结束函数
console.log(x);//这条语句不会执行
}
//使用函数
var ret = myFunction()//使用函数的时候会获得函数的返回值，并保存在ret变量里
</script>
数组排序
冒泡排序
冒泡排序的基本思想是，对相邻的元素进行两两比较，顺序相反则进行交换，这样，每一趟会将最小或最大的元素“浮”到顶端，最终达到完全有序
实例：demo14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];
/**
* 交换排序（冒泡排序）
* 求：
* 把数组从小到大排序
* 思路：
* 把数组中每一个数跟这个数后面的所有数进行比较
* 如果后面的某一个数比这个数小
* 就交换两个数的位置
*/
for ($i = 0; $i < $nums.length - 1; $i++) {
for ($j = 0; $j < $nums.length-$i-1; $j++) {
if ($nums[$j] > $nums[$j+1]) {
temp = $nums[$j];
$nums[$j] = $nums[$j+1];
$nums[$j+1] = temp;
}
}
}
document.write($nums);
</script>
</html>
选择排序
简单选择排序是最简单直观的一种算法，基本思想为每一趟从待排序的数据元素中选择最小（或最大）的一个元素作为首元素，直到所有元素排完为止，简单选择排序是不稳定排序。
实例：demo15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
$min = 7
var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];
/**
* 交换排序（选择排序）
* 求：
* 把数组从小到大排序
* 思路：
* 把数组中每一个数跟这个数后面的所有数进行比较
* 判断后面所有数中最小的数
* 就交换两个数的位置
*/
for ($i = 0;$i < $nums.length;$i++) {
$min = $i;
for ($j = $i+1;$j < $nums.length;$j++) {
if($nums[$min] > $nums[$j]){
$min = $j;
}
}
if($min != $i){
$temp = $nums[$i];
$nums[$i] = $nums[$min];
$nums[$min] = $temp;
}
}
console.log($nums);
</script>
</html>
直接插入排序
直接插入排序基本思想是每一步将一个待排序的记录，插入到前面已经排好序的有序序列中去，直到插完所有元素为止。
实例：demo16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
$min = 7
var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];
/**
* 直接插入排序（插入排序）
* 求：
* 把数组从小到大排序
* 思路：
* 从第二个数开始，把当前这个数和前面的所有数进行比较
* 如果比前面的某个数小
* 和交换前面那个数交换顺序
*/
for ($i=0; $i<$nums.length;$i++) {
for ($j=$i; $j>0;$j--) {
if ($nums[$j] < $nums[$j-1]) {
$temp = $nums[$j];
$nums[$j] = $nums[$j-1];
$nums[$j-1] = $temp;
}
}
}
console.log($nums);
</script>
</html>
视频课程
配套教学视频： HTML5+CSS3+JS教程精细化前端WEB开发实战视频教学2019课件源码
全套前端企业开发教学视频： WEB大前端教程视频教学小程序+VUE+AJAX+HTML5+canvas+node.js+Angular系列完整视频教学
转载于:https://my.oschina.net/u/3586285/blog/3073130
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端开发之基础篇（七）JavaScript动态脚本语言：对象Math+String+Array+Date+视频教程...
- 视频教程-Web前端开发第4季：JavaScript基础入门-JavaScript
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
- Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
- HTML+CSS前端基础开发视频教程-冯楠娜-专题视频课程
- 学习笔记(29):HTML+CSS前端基础开发视频教程-内外墙法
- 【备忘】python从0基础到前端到后端的开发视频教程下载
- 学习笔记(10):HTML+CSS前端基础开发视频教程-css的继承性和层叠性
- 学习笔记(30):HTML+CSS前端基础开发视频教程-大布局
- 视频教程-2019全新Javascript零基础多实战例子教程前端js教程-JavaScript
- 学习笔记(01):HTML+CSS前端基础开发视频教程-无序列表
- 学习笔记(07):HTML+CSS前端基础开发视频教程-基础选择器
- 学习笔记(19):HTML+CSS前端基础开发视频教程-浮动的概念
- 学习笔记(22):HTML+CSS前端基础开发视频教程-浮动的元素没有margin
- 学习笔记(05):C++语言基础视频教程-4.4 三种运算符重载函数
- 视频教程-JavaScript基础入门到精通（网站开发就业技能）-JavaScript
- javascript基础：函数传递参数的方式、参数数组、变量范围（变量作用域）
- Web前端开发精品课HTML CSS JavaScript基础教程第十三章课后编程题答案
- Web前端开发精品课HTML CSS JavaScript基础教程第五章课后编程题答案
- Web前端开发精品课HTML CSS JavaScript基础教程第二十三章课后编程题答案