内容概览
JS 学习笔记（一）
一、前言
（一）Web浏览器发展史
- Mosaic，是互联网历史上第一个被普遍使用和能够显示图片的网页浏览器。于1993年问世。
- 1994年4月，马克·安德森 和 美国硅图公司（SGI，Silicon Graphics）的创始人吉姆·克拉克（Jim Clark）在美国加州设立了“Mosaic Communication Corporation”。
- Mosaic公司成立后，由于伊利诺伊大学拥有Mosaic的商标权，且伊利诺伊大学已将技术转让给Spy Glass公司，开发团队必须彻底重新撰写浏览器程式码，且浏览器名称更改为Netscape Navigator，公司名字于1994年11月改名为“Netscape Communication Corporation”，此后沿用至今，中译为“网景”。
- Internet Explorer、Mozilla Firefox等目前的主流浏览器，其早期版本皆是以Mosaic为基础而开发的。微软随后买下Spy Glass公司的技术开发出Internet Explorer浏览器，而Mozilla Firefox则是网景通讯家开放源代码后所衍生出的版本。
（二）JavaScript 发展史
- JavaScript作为Netscape Navigator浏览器的一部分首次出现在1996年。它最初的设计目标是改善网页的用户体验。其作者为：Brendan Eich。
- 起初JavaScript被命名为：LiveScript。后因和Sun公司合作，因市场宣传需要改名为：JavaScript。后来Sun公司被Oracle收购，JavaScript版权归Oracle所有。
（三）浏览器的组成
-
shell部分：浏览器外壳，即用户界面。
-
内核部分：渲染引擎（语法规则和渲染页面）、JS引擎、其他模块。
1> 2001年发布ie6，首次实现对js引擎的优化。
2> 2008年Google发布最新浏览器Chrome，它是采用优化后的javascript引擎，引擎代号V8，因能把JS代码直接转化为机器码来执行，进而以速度快而闻名。
3> 后Firefox也推出了具备强大功能的js引擎: Firefox3.5 TraceMonkey（对频繁执行的代码做了路径优化）、Firefox4.0 JeagerMonkey。
（四）当今主流浏览器
| 主流浏览器 | 内核 |
|---|---|
| IE | Trident |
| Firefox | Gecko |
| Google Chrome | Webkit --> Blink |
| Safari | Webkit |
| Opera | Presto |
【注意】衡量标准为：占有一定的市场份额；必须有其独立研发的内核。
（五）JavaScript 简介
- JS的特点：解释性语言、跨平台（不需要编译成文件）、单线程。
- 规范历程：为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。ECMA（“European Computer Manufacturers Association”，即：欧洲计算机制造商协会）为了统一规格JavaScript兼容于ECMA标准，因此也称为ECMAScript。
- JS的组成：ECMAScript、DOM、BOM。
二、JS 初探
（一）说在前面
-
JS的执行队列： 按照“轮转时间片”的方式异步执行。
-
引入JS代码的方式：
1）页面内嵌<script></script>标签；2）外部引入JS文件
<script src=“JS文件的地址”> ... </script>
为符合web标准（w3c标准中的一项）中要求的“结构、样式、行为相分离”，通常会采用外部引入JS文件的方式。
（二）JS的基本语法
- 变量(variable)
1）变量的声明
2）命名规则<script> // 变量的声明及赋值 var demo = 666； // 变量的声明及赋值的分解(效果同上) var demo; demo = 666; // 单一 var 声明法 // ★不同变量之间用英文逗号分隔开！(注意回车)★ var demo1 = 1， demo2 = 2, demo3 = 3, demo4, demo5; //如果变量未被指定具体的值，则默认为：undefined </script>
1> 变量名必须以英文字母、_、$开头
2> 变量名可以包括英文字母、_、$、数字
3> 不可以用系统的关键字、保留字作为变量名 - 值的类型
1）原始值（stack，栈数据）— 拷贝的是：副本
number、string、boolean、undefined、null
2）引用值（heap，堆数据）— 拷贝的是：地址
array、object、function、… 、date、RegExp - JS语句基本规则
1）语句后面要用英文分号结束（ ; ）
2）JS语法错误会引发其所在代码块中的后续代码终止，但不会影响其它JS代码块
3）书写格式要规范，“ = + / - ”两边都应该有空格 - 错误的分类
1）低级错误（语法解析错误，浏览器在执行JS代码前会通篇扫描一遍JS文件，如果有一条或多条语法错误，则彻底不执行代码。）
2）逻辑错误（标准错误，情有可原，浏览器会默认执行该条错误代码之前的正常代码，但不会执行错误代码以及其之后的代码。）
（二）JS 运算符
-
算术运算符
1）“ + ”：① 数学运算、字符串链接；② 任何数据类型加字符串都等于字符串
2）“ - ”，“ * ”，“/”，“ %”，“ = ”，“ () ”
优先级 “ = ” 最弱，” () ” 优先级较高
3）“ ++ ”，“ - - ”，“ += ”，“ -= ”，“ /= ”，“ *= ”，“ %= ”<script> // 练习1：计算以下代码的输出结果 var a = 10; var b = ++a - 1 + a++; console.log(b + " " + a); // 以上代码的输出结果为：b = 21 ；a = 12 //赋值的顺序为：自右向左 //计算的顺序为：自左向右 </script><script> // 练习2：调换a和b的值 var a = 123; var b = 234; // 法一： // var c = a; // a = b; // b = c; // console.log(a + " " + b); // 法二： a = a + b; b = a - b; a = a - b; console.log(a + " " + b); </script>
-
比较运算符
“>”，”<”，”==”，“>=”，“<=”，”!=”
比较结果为 boolean 值（true、false）PS：字符串之间的比较，比较的是ASCII码。
-
逻辑运算符
“&&”，“||”，“!“
运算结果为真实的值
-
被认定为 false 的值：undefined， null， NaN， “”， 0， false
（三）JS 条件语句
-
if() { }、if(){ }else if(){ }else { }★★★ if语句 与 && 的相互转换
-
for(var i = 0; i < n; i++) { }
-
while() { }、do{ }while( )
-
switch case、break、continue
1）switch case语句
2）break：用于终止并跳出循环，必须放在循环里面，否则会报错。
3）continue：终止本次循环，继续执行下一次循环。
（四）练习题
<script type="text/javascript">
// 1、计算2的n次幂，n可输入，n为自然数
// 1 * 2
// 1 * 2 * 2
// 1 * 2 * 2 * 2
// 1 * 2 * 2 * 2 * 2
// var n = parseInt(window.prompt("计算2的n次幂，n可输入，n为自然数。请输入n的值！！！"));
// var mul = 1;
// for(var i = 0; i < n; i ++) {
// mul *= 2;
// }
// console.log("2的" + n + "次幂为：" + mul);
// 2、计算n的阶乘，n可输入
// 5! = 5 * 4 * 3 * 2 * 1 * 1
// 4! = 4 * 3 * 2 * 1 * 1
// 3! = 3 * 2 * 1 * 1
// var n = parseInt(window.prompt("计算n的阶乘，n可输入。请输入n的值！！！"));
// var mul = 1;
// for(var i = 1; i <= n; i++) {
// mul *= i;
// }
// console.log(n + "的阶乘为：" + mul);
// 3、著名的斐波那契数列（1 1 2 3 5 8 输出第n项）
// f s t
// 1 1 2 3 ...
// f s t
// 求第5位需要3次运算
// 求第6位需要4次运算
// 求第n位需要n-2次运算
// var n = parseInt(window.prompt("著名的斐波那契数列（1 1 2 3 5 8 输出第n项）。请输入n的值！！！"));
// var first = 1,
// second = 1,
// third;
// if(n > 2) {
// for(var i = 0; i < n - 2; i++) {
// third = first + second;
// first = second;
// second = third;
// }
// console.log("第n项为：" + third);
// }else {
// console.log("第n项为：1");
// }
// 4、编写一程序，输入一个三位数的正整数，输出时反向输出。如：输入456，输出654。
// var n = parseInt(window.prompt("输入一个三位数的正整数，输出时反向输出。请输入："));
// var num1 = parseInt(n % 10);
// var num2 = parseInt((n - num1) % 100 / 10);
// var num3 = parseInt((n - num1 - num2) % 1000 / 100);
// var result = num1 * 100 + num2 * 10 + num3;
// console.log(n + "的反向输出值为：" + result);
// 5、输入a,b,c三个数字，打印出最大的。
// var a = parseInt(window.prompt("a的值为："));
// var b = parseInt(window.prompt("b的值为："));
// var c = parseInt(window.prompt("c的值为："));
// if(a > b) {
// if(a > c) {
// console.log(a);
// }else{
// console.log(c);
// }
// }else {
// if(b > c) {
// console.log(b);
// }else {
// console.log(c);
// }
// }
// 6、打印出100以内的质数
// var count = 0;
// //取出1~100中的每一个数
// for(var i = 1; i <= 100; i++){
// // 判断每一个i是否为质数
// for(var j = 1; j <= i; j++) {
// if(i % j == 0) {
// count ++;
// }
// }
// if(count == 2) {
// console.log(i + " ");
// }
// count = 0;
// }
//面积为100的矩形 长宽比
// 10 * 10
// 4 * 25
// 2 * 50
// 1 * 100
// 2.5 * 40
// 1.25 * 80
var count = 0;
//取出1~100中的每一个数
for(var i = 1; i <= 100; i++){
// 判断每一个i是否为质数
for(var j = 1; j <= Math.sqrt(i); j++) {
if(i % j == 0) {
count ++;
}
}
if(count == 1) {
console.log(i + " ");
}
count = 0;
}
</script>
总结自《渡一教育_Web前端开发JavaScript权威课堂》
1594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
