JavaScript学习笔记记录我的旅程


Posted in Javascript onMay 23, 2012

1、什么是JavaScript?
(1) HTML只是描述网页长相的标记语言,没有计算,判断能力,如果所有计算,判断(比如判断文本框是否为空,判断两次密码是否输入一致)店铺放到服务器端执行的话网页的页面会非常的慢,用起来也很难用,对服务器的压力也很大,因此要求能在浏览器中执行一些简单的运算,判断,JavaScript就是一种在浏览器端执行的语言。
(2) JavaScript和Java没有直接的关系,唯一的关系就是JavaScript原名LiveScript,后来吸取了Java的一些特性,升级为JavaScript,JavaScript有时被简称为JS。
(3) JavaScript是解释性语言,无需编译就可以随时执行,这样哪怕语法有错误,没有语法错误的部分还是能够正确的执行。
JS的开发环境
(1) VS中JavaScript,Jqery的自动完成功能。
(2) JS是非常灵活的动态语言,不像C#等静态语言那样严谨。
JS入门
(1)

<script type="text/javascript"> 
alert(new Date().toLocaleDateString()); 
</script>

(2) JavaScript代码放到<script>标签中,<script>可以放到<head>,<body>等任意位置,而且可以有不止一个<script>标签。alert函数是弹出消息窗口,new Date()是创建一个Date类的对象,默认值就是当前的时间。
(3) 放到<head>中的<script>在body加载之前就已经运行了,写在body中的<script>是随着页面的加载而一个个的执行的。
(4) 除了可以再页面中声明JavaScript之外,还可以将JavaScript写在单独的JS文件中,然后在页面中引入:<script src=”common.js” type=”text/javascript”></script>。声明到单独的JS文件的好处是多页面也可以共享,减少网络流量。
事件
(1) <a href="javascript:alert('Hello')">点击我</a>
<a href="javascript:void(0)">我就不弹出东西</a><br />
<a href="JSoop.htm" onclick="alert('您确认你要跳转吗?')">单击我</a>
(2) JavaScript中也有事件的概念,当按钮被点击的时候
1) <input type="button" value="单击我" onclick="alert('终于单击我了')" />
2) 只有超链接的href中的JavaScript中才需要”JavaScript:”,因为他不是事件,而是把”JavaScript:'看成像”http:”,”ftp:”,”thunder://”,ed2k://,mailto://一样的网络协议,交由JS解析引擎处理,只有href中这一个特列。
JS变量
(1) JavaScript中既可以使用双引号声明字符串,也可以使用单引号声明字符串,主要是方便和HTML集成,避免转义符的麻烦。
(2) var i=10; //声明一个变量,名字为i,指向10这个整数,一旦指向10,i就是int类型, alert(i);
(3) JavaScript中有null,underfined两种,null表示变量的值为空,underfined则表示变量还没有指向任何的对象,未初始化。
(4) JavaScript是弱类型,表示变量的时候无法:int i=10.只能通过var i=10;声明变量,和C#中的var不一样,不是C#中的那样的类型推断。
(5) JavaScript中也可以不用var声明变量,直接用,这样的变量是”全局变量”,因此除非确实想用全局变量,否则使用的时候最好加上var。
(6) JS是动态类型的,因此var i=10;i=”abc”是合法的。
JavaScript
(1)
var sum = 0; 
for (var i = 0; i <= 100; i++) { 
sum = sum + i; 
} 
alert(sum);

(2) 如果JavaScript中的代码有语法错误,浏览器会弹出报错信息,查看报错信息就能帮助排查错误。
(3) JavaScript的调试,使用VS可以很方便的进行JavaScript的调试,调试时需要注意几点:
1) IE的调试选项要打开,Internet选项-高级,去掉”禁用脚本调试”前的勾选。
2) 以调试方式运行界面。
3) 设置断点,监视变量等操作和C#一样。
判断变量初始化
(1) JavaScript中判断变量,参数是否初始化的三种方法。
var r; 
if (r == null) { if (typeof (r) == "undefined") { if (!x) { 
alert("null"); alert("undefined"); alert("不X"); 
} 
} 
}

注:推荐用最后一种方法
函数的声明
(1) JavaScript中声明函数的方法:
function Add(i1, i2) { 
return i1 + i2; 
}

(2) 不需要声明返回值类型,参数类型,函数定义以function开头
var r = Add(10, 20); 
alert(r); 
var r = Add("tom,", "您好"); 
alert(r);

(3) JavaScript中不像C#中那样要求所有路径都有返回值。
匿名函数
(1)
var f1 = function sum(i1, i2) { 
return i1 + i2; 
} 
alert(f1(10, 20));

(2) 类似于C#中的匿名函数。
(3) 这种匿名的用法在Jquery中用法特别多。
(4)
alert(function sum(i1, i2) { 
return i1 + i2; 
} (100, 10));

注解:C#中匿名函数使用委托来调用。
JS面向对象基础
(1) JavaScript中没有类的语法,是用函数闭包(closure)模拟出来的,下面讲解的时候还是用C#中的类,构造函数等概念,JavaScript中string,date等”类”都被叫做”对象”,JavaScript中声明类(类不是类,是对象)。
(2)
function Person(name, age) { //声明一个函数,当成类用 
this.Name = name; 
this.Age = age; 
this.SayHello = function () { 
alert("你好,我是" + this.Name + ",我今年:" + this.Age + "岁了"); 
} 
} 
var p1 = new Person("韩迎龙", "23"); 
p1.SayHello();

(3) 必须要声明类名,function Person(name,age)可以看做是声明构造函数,Name,Age这些属性也是使用者动态添加了。
Array()对象
(1) JavaScript中的Array对象就是数组,首先是一个动态数组,而且是一个像C#中数组ArrayList,Hashtable等的超强综合体。
(2)
var names = new Array(); 
names[0] = "韩迎龙"; 
names[1] = "得到"; 
names[2] = "说的"; 
for (var i = 0; i < names.length; i++) { 
alert(names[i]); 
}

(3) 无需预先制定大小,动态。
Array()练习1
(1) Array练习,求出一个数组中的最大值。
<script type="text/javascript"> 
function MyMax(arr) { 
var max = arr[0]; 
for (var i = 0; i < arr.length; i++) { 
if (arr[i] > max) { 
max = arr[i]; 
} } 
return max; 
} 
var arr = new Array(); 
arr[0] = 20; 
arr[1] = 10; 
arr[2] = 34; 
alert(MyMax(arr)); 
</script>

Array()练习2
(1) 将一个字符串数组的元素的顺序进行反转,{3,9,5,34,54}{54,34.5.9.3}。不要使用JavaScript中的反转函数,提示:第i个和第length-i-1进行交换,定义函数。
<script type="text/javascript"> 
function MyReverse(arr) { 
for (var i = 0; i < arr.length / 2; i++) { 
var temp = arr[i]; 
arr[i] = arr[arr.length - i - 1]; 
arr[arr.length - i - 1] = temp; 
} 
} 
var arr = new Array(); 
arr[0] = "3"; 
arr[1] = "9"; 
arr[2] = "5"; 
arr[3] = "34"; 
arr[4] = "54"; 
alert(arr); 
MyReverse(arr); 
alert(arr);

Array()练习3
(1) 将一个字符串数组输出为|分割的形式,比如:韩迎龙|试试|订单。不要使用JavaScript中的Join函数,arr.join(1)将数组用分割符链接成一个字符串。
<script type="text/javascript"> 
function MyJoin(arr) { 
if (arr.length <= 0) { 
return; 
} 
var s = arr[0]; 
for (var i = 1; i < arr.length; i++) { 
s = s + "|" + arr[i]; 
} 
return s; 
} 
var arr = new Array(); 
arr[0] = "韩迎龙"; 
arr[1] = "试试"; 
arr[2] = "订单"; 
alert(MyJoin(arr)); 
//第二种方法 
alert(arr.join("|")); 
</script>

Array的字典用法
(1) JS中的Array是一个宝贝,不仅是一个数组,还是一个Dictionary,还是一个Stack。
(2)
var names = new Array(); 
names["人"] = "ren"; 
names["扣"] = "kou"; 
names["手"] = "shou"; 
alert(names["人"]); 
alert(names.人); 
for (var k in names) { 
alert(k); 
}

(3) 像Hashtable,Dictionary那样用,而且像他们一样的效率高。
Array()的简化声明
(1) Array还可以有简化的方式
var arr=[3,4,5,6,7]; //普通数组初始化
这种数组可以看做是names[“人”]=”ren”;的特例,也就是key为0,1,2,3,4,5
(2) 字典风格的简化创建方式
var arr={”tom”=30,”jim=”30};
数组,for和其它
(1) 对于数组风格的Array来说,可以使用join方法拼接为字符串。
var arr = ["tom", "jim", "kencery"]; 
alert(arr.join(",")); //JS中join是array的方法,不像.net中是string的方法

(2) for循环可以像C#中的foreach一样的使用。
for (var e in document) { 
alert(e); 
}
Javascript 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
JS中处理与当前时间间隔的函数代码
May 23 #Javascript
自己做的模拟模态对话框实现代码
May 23 #Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 #Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 #Javascript
JavaScript基本编码模式小结
May 23 #Javascript
Javascript处理DOM元素事件实现代码
May 23 #Javascript
面向对象Javascript核心支持代码分享
May 23 #Javascript
You might like
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
举例详解Python中的split()函数的使用方法
2015/04/07 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
Python 代码调试技巧示例代码
2020/08/11 Python
python获取linux系统信息的三种方法
2020/10/14 Python
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
大学生党员承诺书
2014/05/20 职场文书
投资意向书
2014/07/30 职场文书
销售内勤岗位职责
2015/02/10 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
党员公开承诺书2016
2016/03/24 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
instantclient客户端 连接oracle数据库
2022/04/26 Oracle
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python