内容概览
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权威课堂》