第一次js课

来源：互联网发布：怎样修改mac地址编辑：程序博客网时间：2024/06/01 14:43

(1)JS,HTML,CSS关系

第一次学习完js后自己就想具体了解一下html和css与js三者之间的关系，参考了下前辈们的总结，有了一些自己的理解。

首先，最准确的网页设计思路是把网页分成三个层次，即：结构层(HTML)、表示层(CSS)、行为层(Javascript)。html是一种超文本标记语言，它是用来描述网页的一种语言，css英文叫 Cascading Style Sheets它的意思是层叠样式表，是定义如何显示html元素，而JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

其次，一个前辈很形象的吧html比作人的器官和骨骼，css是人的皮肤，而js则是人的神经，可以说有了前俩者也就构成了一个植物人了，加上javascript这个植物人就可以对外界刺激做出反应，可以思考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人。对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript去设置。

最后，前面学习了html和css后自己也感觉到了网页设计中很多自己想要的效果都是要拿js来实现，在 Web 开发中，后端有很多编程语言可以选择，但前端只有 JavaScript，JavaScript是所有浏览器唯一都支持的编程语言，学习好js和重要。

（2）用js实现冒泡排序

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单排序，冒泡排序</title>
</head>
<body>
<script type="text/javascript">
//1.简单的排序
function compare(value1, value2) {
//定义比较方法
return value1 > value2 ? 1 : -1;
}
var arr = ['34', '45', '23', '56', '88', '21', '16', '55'];
alert(arr.sort(compare).toString());
//输出结果：16,21,23,34,45,55,56,88
//2.冒泡排序:思路：依次比较相邻的两个数，将小数放在前面，大数放在后面。即在第一趟：首先比较第1个和第2个数，将小数放前，大数放后。然后比较第2个数和第3个数，将小数放前，大数放后，如此继续，直至比较最后两个数，将小数放前，大数放后。至此第一趟结束，将最大的数放到了最后。在第二趟：仍从第一对数开始比较（因为可能由于第2个数和第3个数的交换，使得第1个数不再小于第2个数），将小数放前，大数放后，一直比较到倒数第二个数（倒数第一的位置上已经是最大的），第二趟结束，在倒数第二的位置上得到一个新的最大数（其实在整个数列中是第二大的数）。如此下去，重复以上过程，直至最终完成排序。
var arr = [12, 5, 3, 8, 0, 15, 6, 5, 9, 4, 27];
var len = arr.length;
function bubbleSort(arr) {
var tmp = 0;
for(var i = 0; i < len; i++) {
for(var j = 0; j < len - i; j++) {
if(arr[j] > arr[j + 1]) {
tmp = arr[j];
arr[j] = arr[j + 1];//交换
arr[j + 1] = tmp;
}
}
}
return arr;
}
alert(bubbleSort(arr));
</script>
</body>
</html>

总结：用js实现冒泡排序的思路和c语言实现冒泡排序的思路没什么区别，用js来写，就是相当于js来把它表现出来。

（3）用js求最大最小

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
document.write("---------------------6,求数组中的最大值和最小值----------------------------<br/>");
var arr1 = [-5, 4, 15, 20, 21];
function max(arr) { //运用假设法来找到最大或者最小值
var maxNum = arr[0]; //假设第一项是最大的数子
for(var i = 1; i < arr.length; i++) {
if(maxNum > arr[i]) {
maxNum = arr[i]; //交换数子
};
};
return maxNum;
};
document.write(max(arr1));
</script>
</body>
</html>

总结：基础的c程序，用js实现，思路一样，实现方式不同。

（4）三元表达式：a>b?alert("大于"):alert("小于");当关系成立执行前者，不成立则执行后者。

第一次学习js，老师讲了基本的js和一些js的使用方法，让我们了解了js的使用方法，如何把html，css和js联系起来，菜鸟刚起程，还会继续分享一些自己的学习心得。

阅读全文

0 0