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 相关文章推荐
动态为事件添加js代码示例
Feb 15 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
XML的代替者----JSON
2007/07/21 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
实例讲解Python爬取网页数据
2018/07/08 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
python dataframe NaN处理方式
2019/12/26 Python
python重要函数eval多种用法解析
2020/01/14 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
民事赔偿协议书
2014/11/02 职场文书
导游词之镇江焦山
2019/11/21 职场文书
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL