JavaScript入门学习笔记
1.什么是JavaSript
HTML只是描述页面长相的标记语言,没有计算,判断能力,如果所有计算,判断(比如判断文本框是否为空)都放到服务器执行的话网页的话页面会非常慢,用起来也很难用,对服务器的压力也很大,因此要求能在浏览器中执行一些简单的运算,判断.JavaScript就是一种浏览器执行的语言
JavaScript和Java没有直接关系,简称JS
JS是解释型语言,无需编译就可以随时运行,哪怕预压有错误,没有语法错误的部分还是能正确运行
JavaScript组成：核心语法（ECMAScript）Dom（文档对象模型）Bom（浏览器对象模型）
2.JS入门
<script type="text/javascript">
alert(new Date().toLocaleDateString());
</script>
JS代码可以放在,head,body任何位置
new Date()是创建一个Date类的对象
<script language="">已经不推荐使用
除了可以在页面中声明JavaScript,还可以调用外部的js文件,比如外面的js文件为Common.js文件,里面alert(new Date().toLocaleDateString());
<script src="Common.js" type="text/javascript"></script>
字符串推荐使用‘’把字符串显示
严格区分大小写
3.js的变量
js中即可以使用双引号声明字符串,也可以用 单引号(推荐)声明字符串,主要方便html继承,避免转义符的麻烦
js中有null,undefined两种,null表示变量为空,underfined则表示变量还没有指向任何对象,未初始化.两者的区别参考资料
js是弱类型,声明变量的时候无法:int i=0; 只能通过var i=0;声明变量,和C#中的var不一样,不是c#中哪样的类型判断
js也可以不用var声明变量,直接用,这样的变量时"全局变量",因此除非却是想用全局变量,否则使用的时候最好加上var
在js里面是没有承认的全局变量,不要不加var
js是动态类型,因此var i=0; i="abc";是合法的
3.js的变量
js中即可以使用双引号声明字符串,也可以用 单引号(推荐)声明字符串,主要方便html继承,避免转义符的麻烦
js中有null,undefined两种,null表示变量为空,underfined则表示变量还没有指向任何对象,未初始化.两者的区别参考资料
js是弱类型,声明变量的时候无法:int i=0; 只能通过var i=0;声明变量,和C#中的var不一样,不是c#中哪样的类型判断
js也可以不用var声明变量,直接用,这样的变量时"全局变量",因此除非却是想用全局变量,否则使用的时候最好加上var
在js里面是没有承认的全局变量,不要不加var
js是动态类型,因此var i=0; i="abc";是合法的
undefined和整数相加返回NAN
4.JavaScript共六种数据类型：
- Boolean（布尔），取值：只有两种值：true或false
- Number（数字），取值：所有数字， 包含整数小数等，范围相当于double。
- String（字符串），取值：所有字符串。
- Undefined（未定义），取值：只有一个值undefined
- Null（空对象），取值：只有一个值null
- Object（对象类型），取值：任何对象、Array、function等等
加断点,在vs环境下调试
// ==相等 和 ===完全相等
var n=10;
var n2='10';
alert(n == n2); //true 因为没有类型判断
alert(n === n2);//false
var n=10;
var n2='10';
alert(n == n2); //true 因为没有类型判断
alert(n === n2);//false
var nn = 10;
switch(nn){
case '10':
alert('字符串10');
break;
case 10:
alert('数字10');//这个就是说明case是===判断
break;
}
switch(nn){
case '10':
alert('字符串10');
break;
case 10:
alert('数字10');//这个就是说明case是===判断
break;
}
var nnn1;
var nnn2 = null;
alert(nnn1 == nnn2); //true 因为没有类型判断
alert(nnn1 === nnn2);//false 类型不同
var nnn2 = null;
alert(nnn1 == nnn2); //true 因为没有类型判断
alert(nnn1 === nnn2);//false 类型不同
null与undefined表示的意义是完全
不同的。
- undifined表示一个未知的值，比如变量声明了没有赋值，方法没有返回值的时候，或是一个未知变量。
-
null，表示的是一个已知的值，这个值就是null，null表示不指向任何对象。当一个变量为null，这时，这个变量的值不是未知的，为是一个已知的值，就是null，表示不指向任何变量
6.判断变量初始化
js中判断变量,参数是否非初始化的三种方法
var x;
var sum = 0;
n = 100;//不声明直接赋值,直接作为全局变量
n++;
}
myFunc();
alert(n);
alert(sum);//报错,函数
var x;
if
(x ==
null
) {
alert(
"null"
)
}
if
(
typeof
(x) ==
"undefined"
) {
alert(
"undefined"
);
}
if
(!x) { alert(
'不x'
); }
//推荐,简单
7.变量所用域
总结1：直接在页面上声明的变量，在整个页面都能访问
总结2：在函数内任何地方声明的变量在函数内哪里都能使用
总结3：第二次重复声明变量会自动忽略var关键字
总结4：不声明直接赋值,直接作为全局变量
总结5：当局部变量和全局变量重复声明的时候，在函数内
优先用局部变量
var n=10;//在整个页面内都能使用
function myFunc(){
alert(n);
var m =100;
if( m>0){//在函数内任何地方声明的变量在函数内哪里都能使用
var x =10;
}
alert(x);
}
myFunc();
alert(m);//这里报错，方法中的变量有局部性
function myFunc(){
alert(n);
var m =100;
if( m>0){//在函数内任何地方声明的变量在函数内哪里都能使用
var x =10;
}
alert(x);
}
myFunc();
alert(m);//这里报错，方法中的变量有局部性
var n=10;//在整个页面内都能使用
function myFunc(){
var sum = 0;
for(var i=1;i<=100;i++){
sum += i;
}
alert(i);
//第二次重复声明变量会自动忽略var关键字
for(var i=1; i<5; i++){
}
alert(i);
}
myFunc();
function myFunc(){
var sum = 0;
for(var i=1;i<=100;i++){
sum += i;
}
alert(i);
//第二次重复声明变量会自动忽略var关键字
for(var i=1; i<5; i++){
}
alert(i);
}
myFunc();
var n=10;//在整个页面内都能使用
function myFunc(){
var sum = 0;
n = 100;//不声明直接赋值,直接作为全局变量
n++;
}
myFunc();
alert(n);
alert(sum);//报错,函数
8.转义字符的问题
- JavaScript中字符串同样需要转义符 ’ \ ’，与C#一样。
- 想在页面输出：c:\windows\microsoft\vs.txt，这句话，需要这样写：alert(‘c:\\windows\\microsoft\\vs.txt’);不能用@，@只在C#中有效。
- 常见转义符： \t、\n、\’、\”、\\
- 在用正则表达式的时候也会遇到转义符问题。（*）
9.js数据类型转换
- 一、字符串 转换 数字：
parseInt(numString[, radix])，字符串转换整数
parseFloat(numString)，字符串转换小数 - 二、任意类型到指定类型的转换：
将任意类型转换为数字：
Number(object); - 任意类型转换为字符串：
1.String(object)
2.对象.toString(); - 任意类型转换为Boolean：
Boolean(object) - NaN（Not a Number）：当将某类型转换为数字失败时，返回NaN。表示不是一个数字。NaN不等于任何值，包括它自己，需要使用isNaN(arg)函数。（NaN==NaN返回false）
- 类型转换时从第一个字符依次转换，如果出错则终止转换，比如123r4.44转换int，结果是123；
- //判断一个值是否是NaN用isNan()来判断
10.JavaScript的eval()方法（*）
- eval(codeString)
将一段字符串的js代码，计算并执行。
alert(eval(‘2+3’));
eval(‘alert(100);’); - 该方法知道即可，一般不建议使用，效率低，且不安全。
- 关于&&与||的补充，js中一种常见的用法：
var r="a" || ""; // 判断true || false == true 结果"a"
var r=null || 15; // false || true == true 结果15
var r="a" && 0; // true && false == true 结果 a
var r=null && 15; // false && true == true 结果15
var r=100 && 'hello'; // true && true = true结果'hello'
var r=100 || 'hello'; // true || true = true结果 100 - 见备注1.
如果必须使用eval,则用new Function()来代替eval()
function add(i1, i2){
return i1+i2;
}
int add(int i1,int i2) //C#中的写法
最好把声明放在前面,效率比较高
alert(add(1,4));
在js中不存在函数必须有返回值,如果没有就返回undefined
11.匿名函数
避免函数名冲突的问题
避免函数名冲突的问题
- 匿名函数的意思就是指：将函数定义语句当做一个表达式来处理。既然是表达式，则可以直接赋值，出现在小括号中等等。
- 第一种写法：
var fn = function (x, y) { return x + y; };（不要忘记分号）
调用：alert(fn(10,20)); 应用之一：设置事件处理程序。 - 第二种写法：
var result = (function (x, y) { return x + y; })(10, 20);
alert(result);
这种写法表示定义了一个匿名函数，立即调用。 - 第三种写法（动态函数）：
var fn = new Function("x", "y", "z", "var sum=x+y+z;alert(sum);");
或：var fn = new Function("x,y,z", "var sum=x+y+z;alert(sum);");
调用：fn(10, 20, 30);
12.js函数不能重载：arguments对象
- JavaScript中没有方法重载的概念。
- 观察备注1中代码，说出执行结果及理由。
- 既然函数没有重载，那么如何实现类似C#中函数重载的功能？
add(10,20)
add(10,20,30);
add(10,20,30,40);
add(10,20,30,40,......); - 要想实现以上n种调用方式都可以被正确执行该怎么办？
- 一、通过arguments对象可以判断用户在调用函数时，是否传递了参数，以及传递了几个参数。
- 二、虽然可以通过arguments对象获取参数，但在实际编程当中还是建议编写“命名参数”，增强程序可读性。
- 三、通过arguments对象获取参数的方式类似于C#中的params关键字效果。
13.事件
在超链接的点击里执行JavaScript: <a href="javascript:alert('hello')">点点</a> <!--交给javascript引擎处理-->
当按钮被点击执行javaScript
<input type="button" onclick="alert('99')" value="久久"/>
只有超链接的href中的JavaScript中才需要加"javascript",因为它不是事件,而是把"javascript:"当成"http:","ftp:","thunder:","ed2k:"一样的网络协议,交给js引擎处理
当按钮被点击执行javaScript
<input type="button" onclick="alert('99')" value="久久"/>
只有超链接的href中的JavaScript中才需要加"javascript",因为它不是事件,而是把"javascript:"当成"http:","ftp:","thunder:","ed2k:"一样的网络协议,交给js引擎处理
14.函数定义与变量声明的“预解析”功能？？？
在程序执行之前，会先进行函数的预解析，先将函数定义定下来。
var x = 1, y = 0, z = 0;
function add(n) { n = n + 1; return n }y = add(x);// 这里调用的是第二个函数定义，因为预先解析function add(n) { n = n + 3; return n; }z = add(x);alert(y + '......' + z); //执行结果4 ................... 4
15.“函数”也是“对象”
16.Array对象*
js中的Arry对象就是数组,首先是一个动态数组,而且是一个像c#中的数组,arryList,Hashtable等的 超强综合体
var names = new Array();
js中的Arry对象就是数组,首先是一个动态数组,而且是一个像c#中的数组,arryList,Hashtable等的 超强综合体
var names = new Array();
names[0] =
"tom"
;
names[1] =
"jerry"
;
names[2] =
'lily'
;
names[3] = 123;
names[3] += 1;
for
(
var
i = 0; i < names.length; i++) {
alert(names[i]);
}
无需预先定制大小,动态,类型也是动态的
var arr=['2003','China','Lili']; 推荐这么写
if (opts[i].selected) {
seletD.appendChild(opts[i]);
}
}
}
.png)
14.Js中的Dictionary*
js中的arry是一个宝贝,不仅是一个数组,还是一个dictionary,还是一个Stack
var
dict =
new
Array();
dict[
"人"
] =
"ren"
;
dict[
"口"
] =
"kou"
;
dict[
"手"
] =
"shou"
;
alert(dict[
"口"
]);
alert(dict.口);
for
(
var
k
in
dict) {
//js中的foreach语法,遍历主键
alert(k);
}
结果是遍历了,人,口,手
数组用法只是一个dictionary的用法的一个特例,取出的是主键
自己:感觉投机取巧一点,可以alert(dic[k]);这样就可以遍历全部了
15.Array和Dictionary的简化声明*
var
arr = [3, 5, 6, 7, 8];
//普通数组初始化
var
arr1 = {
"tom"
: 30,
"lily"
: 20, 'sayHi' : function(){ alert('Hello')!}};
//dictionary
alert(arr1[
"lily"
]);
arr1.sayHi();
16.数组,for,以及其他
//获得对象所有的成员,为什么可以获得呢?对象的成员就是以对象的key的形式出现的
for
(
var
e
in
document) {
alert(e);
}
var
p1 =
new
Person();
p1.Age = 10;
p1.Name =
"df"
;
p1.SayHello =
function
(){alert(
"dgf"
);};
//外部动态生成对象
for
(
var
e
in
p1) {
//遍历所有对象,成功出现Name,Age,Hello,SayHello
alert(e);
}
17. String字符串对象
- length属性：获取字符串的字符个数。（无论中文字符还是英文字符都算1个字符。）
- charAt(index)方法：获取指定索引位置的字符。（索引从0开始）
- indexOf(‘字符串’,startIndex)方法：获取指定字符串第一次出现的位置。startIndex表示从第几个开始搜索。
- split(‘分隔符’,limit);//根据分隔符将一个字符串返回为一个数组。limit表示要返回的数组的最大长度（可自定义）。多个分隔符使用正则表达式：var msg = 'a★b★c☆d☆e#f';var vals = msg.split(/☆|★|#/);alert(vals);
- substr(startIndex,len)//从startIndex开始，截取len个字符。1970.1.1
- substring(startIndex,stopIndex)//从startIndex开始，截取到stopIndex位置（不包括stopIndex所在的字符）。
- toUpperCase()//转换大写、toLowerCase();//转换小写
- match()、replace()、search()方法，正则表达式相关（在JS Dom课程里讲）。
15.js的面向对象*
js中没有类的语法,使用函数闭包(closure)模拟出来的,下面讲解的还是用c#中的类,构造函数的概念,js中的String,Date
< script type ="text/javascript">
js中没有类的语法,使用函数闭包(closure)模拟出来的,下面讲解的还是用c#中的类,构造函数的概念,js中的String,Date
< script type ="text/javascript">
function
Person(name, age) {
//声明一个函数,来模拟类
this
.Name = name;
//this什么含义,动态对象,动态增加的属性
this
.Age = age;
this
.Hello =
function
() {
alert(
this
.Name);
}
}
var
p1 =
new
Person(
"tom"
, 30);
//var p1 = Person('tom',30); //不要丢了new,否则返回undefined
p1.Gender =
"男"
;
//也可以在外面增加动态属性,甚至可以动态加方法
p1.Hello();
</
script
>
function
Person(name, age) {
this
.Name = name;
var
userAge = age;
this
.SayHi =
function
() {
alert(
"你好，我叫"
+
this
.Name);
}
this
.getUserAge =
function
() {
return
userAge;
}
this
.setUserAge =
function
(sage) {
if
(sage >= 0 && sage <= 150) {
userAge = sage;
}
}
}
var
arr =
new
Array();
arr[0] =
new
Person(
'张三'
, 18);
arr[0].setUserAge(50);
arr[0].setUserAge(250);
arr[0].SayHi();
alert(arr[0].getUserAge());
必须声明类名,function
对象自变量
//=====================类对象自变量
var
p = {
'userName'
:
'低调'
,
userAge: 19,
sayHi:
function
() {
alert(
this
.userName +
'========='
+
this
.userAge);
}
}
p.sayHi();
16.函数对象中的prototype属性：原型
- “prototype”的中文解释：原型, 雏形, 蓝本。
- 强调：
- 一、prototype是“函数对象”的属性。（回忆“函数对象”其他成员）
- 二、通过该属性可以实现类似C#中的“扩展方法的功能”。
为Person、String分别添加扩展方法。
解释为什么可以这样做？（画图） - 三、定义在prototpye中的成员是所有对象共享的。所以一般将方法定义在prototype中，而属性则定义在“构造函数”中。
- 四、通过该属性可以实现js中的继承。
提示：不要为“内置对象”随便添加新成员。防止混乱，可以对自定义对象通过该方式来添加新成员。
function
Student(name,age) {
//第一步定义“类”
this
.Name = name;
this
.Age = age;
}
Student.prototype.sayHi =
function
() {
//第二步定义扩展属性或方法
alert(
this
.Name+
'==========='
+
this
.Age);
};
var
s =
new
Student(
'张三'
,18);
//第三步调用
s.sayHi();
17.JavaScript中的“继承”
- js中的继承都是通过prototype实现的，所以一般叫做：“原型继承”。
注意：prototype属性只有函数对象才有（就像call()、apply()函数一样），其他对象只有__proto__属性，没有prototype. - 一、创建“Person”、“Student”实现继承。（注意区别“类”继承，这里可以暂时理解为“对象继承”）
- 二、通过画图说明继承原理。
- 三、举例：“子对象”继承后重写“父对象”的方法。
- 四、通过“对象字面量”的方式创建的对象，该对象的__proto__引用的是Object.prototype。（obj.__proto__===Object.prototype），换句话说通过“对象字面量”的方式创建的对象直接继承自Object对象。
- 五、任何类型都直接或简介继承自Object。
18.正则表达式
- 1.正则表达式
var regexObj = /\d+/;
2.提取第一个 exec()方法
var result = regexObj.exec(msg); - 全局模式匹配字符串 /\d+/g
反复调用exec()就能获得了不同
遍历while(result = regexObj.exec(msg)){} - bool regexObj.test()相当于isMatch方法
当正则表达式中有了小括号,则返回的就是一个数组 - 正则的替换
msg = '张三13856647815李四13856644565王五11256623835'
分组msg = msg.replace(regex,'$1****$3') - match方法
match直接放回数组var arr = msg.match(/\d+/g);
19.压缩
使用工具,需要安装java工具
java -jar compiler.jar --js hello.js --js_output_file helloc.js
20.移动字节
function moveSelected(selet, seletD, opts) {
for (
var i = opts.length-1 ; i >=0 ; i--) {
if (opts[i].selected) {
seletD.appendChild(opts[i]);
}
}
}
21.能力检测-事件对象的使用方式
//动态
document.getElementById('dv').onmousemove = function(e){
var etv = window.event || e;
document.title = etv.clientX+','+etv.clientY;
}
//手动
<div onmouse="MyFunc(event);"></div>
22.
声明全局变量的问题
声明全局变量的时候,不要直接声明,这样大量的变量注册在window上.
正确的方式是: 把全局变量放到命名空间下
var itcast = {};
itcast.chuan = {};
itcast.chuan.heima = {};
itcast.chuan.heima.name = '张三';
23.文档碎片
在内存中创建一个文档碎片,当完成所有的动态增加,然后把文档碎片给相对的对象.
优点:在频繁操作页面的时候,这样可以减少对文档对象的操作.
浏览器测试性能
使用探查器 profiler
闭包
事件比较常用，在项目中比较实用
12.Arry练习
function
getMax(arr) {
var
max = arr[0];
for
(
var
i = 0; i < arr.length; i++) {
if
(arr[i] > max) {
max = arr[i];
}
}
return
max;
}
var
arr1 =
new
Array();
arr1[0] = 20;
arr1[1] = 10;
arr1[2] = 30;
alert(getMax(arr1));
13.练习
//矩阵翻转
function
TurnArry(a) {
var
temp;
for
(
var
i = 0; i < a.length / 2; i++) {
temp = a[i];
a[i] = a[a.length - i - 1];
a[a.length - i - 1] = temp;
}
}
var
arr =
new
Array();
arr[0] =
"1"
;
arr[1] =
'2'
;
arr[2] =
'3**'
;
TurnArry(arr);
for
(
var
i = 0; i < arr.length; i++) {
alert(arr[i]);
}
将一个字符串数组输出为' | '分割的形式,比如"梅西|卡卡|李白", arr1.jion('|');将数组分割符连接成一个字符串
//我的join
function
myjoin(arr) {
if
(arr.length <= 0) {
return
''
;
}
var
s = arr[0];
for
(
var
i = 1; i < arr.length; i++) {
s +=
'|'
+ arr[i];
}
return
s;
}
var
arr =
new
Array();
arr[0] =
"1"
;
arr[1] =
'2'
;
arr[2] =
'3**'
;
alert(myjoin(arr));