JavaScript入门经典 学习笔记
2016-01-07 15:56
281 查看
读书理由
1.JavaScript一直以来作为前段开发者的利器存在，然而它并不只如此，现在JavaScript的不仅用于Web页面开发，甚至用于服务器，随之产生的框架也逐渐成熟。2.另一方面，项目需要用Java实现一个JS网页内容提取插件的功能。
3.最后，JavaScript和Java以及python有很多相似的地方，学习时间成本不会太高。
读书目标
1.掌握基础JS语法2.了解JS常识，比如内置对象，浏览器对象
3. JS事件处理机制
备注：
第六章没有学所以完全达成的目前只有目标1. 现在不单独研究提高效率。
以后再单独研究JS框架
第一章
标签可以放在head或body标签内每行代码后加分号
alert()函数是模态的–除非单击，都则不会消失。
简单例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script type="text/javascript">
alert("hi!");
</script>
</head>
<body>
<p>Paragraph 1</p> //注意加载顺序
<script type="text/javascript">
alert("There~~~~~~~~~~~~~~~~~~~~");
</script>
</body>
</html>第二章
JavaScirpt是弱类型语言–无需指定变量所能保存的数据类型（类似python）。运算符及其优先级无需特别注意
举个例子。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// C=5/9*(F-32)
var degree_F = prompt("Enter the degrees in Fahrenheit:",50);
var degree_C = 5/9*(degree_F-32);
alert(degree_C)
</script>
</body>
</html>注意，prompt（）中用户填入的值会被自动更新到变量中，真方便！
字符串转换成整型parseInt()、浮点型 parseFloat()，无法转换的时候返回NaN。
数组
数组不需要指定长度（虽然也是允许指定的）。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var myArray= new Array();
myArray[0]="Bob";
myArray[1]="Petter";
myArray[2]="Paul";
document.write("myArray[0] = "+myArray[0]+"<BR>");
document.write("myArray[1] = "+myArray[1]+"<BR>");
document.write("myArray[2] = "+myArray[2]+"<BR>");
myArray[1]="Mike";
document.write("myArray[1] changed to "+myArray[1]);
</script>
</body>
</html>多维数组使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var person = new Array();
person[0] = new Array();
person[0][0] = "name0";
person[0][1] = "age0";
person[1] = new Array();
person[1][0] = "name1";
person[1][1] = "age1";
document.write("name : "+person[1][0]+"<BR>");
document.write("age : "+person[1][1]+"<BR>");
</script>
</body>
</html>和python的列表list还真的挺像，看起来弱类型语言很多语法应该形式上比较接近。
第三章
函数的签名没有返回值类型，可以有返回语句。函数定义和调用示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function writeUserWelcome(userName, userAge){
document.write("Welcome to my website: "+userName+"<BR>");
document.write("Hope you enjoy it.<br/>");
document.write("Your age is: "+userAge);
}
writeUserWelcome("Ben",20)
</script>
</body>
</html>变量的作用域和生存期亦和其他语言类似，需要注意的是最好用var来定义变量，否则可能影响变量的作用域。
第四章
Debug
JavaScript调试可以借助浏览器自带的工具。Chrome调试JS
其实调试的具体方法和Java如出一辙
异常处理
和Java的异常处理思想是一致的值得指出的是对于JS而言，抛出错误非常有助于解决用户的无效输入等问题。
优秀实践：自定义的错误消息可以加上个特殊标记（例如感叹号）开头，以便将这些错误标识为自定义的某类错误。
第五章
JS对 对象的定义–拥有方法和属性的事物–基本概念与其他面向对象的语言都一致。创建对象
var myVariable = new ObjectName(optional parameter);
内置对象
String
与Number对象是唯二可以自动转型，无需显示定义对象的对象类型。var string1 = "stringcontent";
length
indexOf() lastIndexOf()
substr() substring()
substring()与java类似，指定开始和结束位置即可。
substr()方法第二个参数是提取子串的长度。
toLowerCase() toUpperCase()
charAt()和charCodeAt() fromCodeCode()
charCodeAt()返回字符在Unicode字符集中的十进制编码。
fromCodeCode() 与charCodeAt()相反，返回十进制编码对应的字符串。
**注意**fromCodeCode()是静态方法
Array
常规方法
length 元素个数concat(Array1, Array2) 连接两个数组 返回连接后的新数组
slice(firstIndex, [secondIndex]) 方法 复制数组的部分 第二个参数可选
join() 将数组转换为字符串，转换时候可以插入标识字段。
var string1 = array1.join(“#”);
sort() 数组排序 升序 基于Unicode编码
reverse() 数组排序降序
indexOf() lastIndexOf() 查找数组元素
Array的测试方法 every(), some(), filter(); foreach(), map()
every() 测试数组中的所有元素是否通过了函数中的测试–逻辑ANDsome() 测试数组中是否有某些元素通过了函数中的测试–逻辑OR
filter() 将数组中通过测试的元素添加到一个临时数组中，最后将这个临时数组返回。
foreach() 和 map()不用函数测试数组中的每个元素，而是操作数组中元素执行函数功能。
map()会将操作的结果记录在一个临时数组中，最后返回。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function divider(keyword){
document.write("---------------------TEST OF "+keyword.toUpperCase()+"---------------------<BR>")
}
var numbers = new Array(1,2,3,4,5);
function isLessThan3(value, index, array)
{
var returnValue = false;
if(value<3)
{
returnValue = true;
}
return returnValue;
}
document.write("numbers: "+numbers+"<BR>");
divider("every");
document.write("all numbers smaller than 3? "+numbers.every(isLessThan3)+"<BR>");
divider("each");
document.write("any number smaller than 3? "+numbers.some(isLessThan3)+"<BR>");
divider("filter");
document.write("numbers smaller than 3 are: "+numbers.filter(isLessThan3)+"<BR>");
function doubleAndOutput(value, index, array)
{
var result = value * 2;
document.write(result+"<BR>");
return result;
}
divider("foreach");
numbers.forEach(doubleAndOutput);
divider("map");
var doubledNumbers = numbers.map(doubleAndOutput);
document.write("the doubled numbers are: "+doubledNumbers);
</script>
</body>
</html>Math对象
Math对象使用的时候无需通过new创建，JavaScript会自动创建。使用方法类似于Java的Math* abs() 绝对值
* min() 和 max()
* ceil() 向上取整
* floor() 向下取整
* round() 四舍五入取整
* random() 产生0~1之间的浮点随机数
* pow(x,y) 计算x的y次幂
Number对象
与String类似，提供一个自动对象生成器。使用var myNumber = 123.456
* toFixed()方法 在指定点处截断数字
Date对象
—-比Java简洁的多！* 获取当前日期，时间：
var date = new Date()
* 定义时传入目标时间相对GMT经过的毫秒数–时差
* 传入表示日期或时间的字符串：
var date = new Date("31 January 2010")var date = new Date("31 Jan 2010")var date = new Date("Jan 31 2010")用逗号分隔符显示传参(日期，时，分，秒，毫秒)：
the date = new Date(2010,1,31,14,12,12,20)
获得时间、日期值 getXXX()
设置时间、日期值 setXXX()
创建新对象类型（引用类型）
JavaScript没有正式的类结构，但支持对应的逻辑。
定义引用类型
引用类型 = 构造函数+ 方法定义 + 属性
* 引用类型定义
用大写首字母区别于一般的函数
* 奇特的setter getter
把该类型的prototype对应的属性设置为等于一个函数。
使用构造函数创建对象时，使用new
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapter 5, example 8</title>
</head>
<body>
<script type="text/javascript">
//CustomerBooking type
function CustomerBooking(bookingId, customerName, film, showDate) {
this.bookingId = bookingId;
this.customerName = customerName;
this.film = film;
this.showDate = showDate;
}
CustomerBooking.prototype.getBookingId = function () {
return this.bookingId;
}
CustomerBooking.prototype.setBookingId = function (bookingId) {
this.bookingId = bookingId;
}
CustomerBooking.prototype.getCustomName = function () {
return this.customerName;
}
CustomerBooking.prototype.setCustomName = function (customName) {
this.customerName = customName;
}
CustomerBooking.prototype.getFilm = function () {
return this.film;
}
CustomerBooking.prototype.setFilm = function (film) {
this.film = film;
}
CustomerBooking.prototype.getShowDate = function () {
return this.showDate;
}
CustomerBooking.prototype.setShowDate = function (showDate) {
this.showDate = showDate;
}
//Cinema type
function Cinema() {
this.bookings = new Array();
}
Cinema.prototype.addBooking = function (bookingId, customerName, film, showDate) {
this.bookings[bookingId] = new CustomerBooking(bookingId, customerName, film, showDate);
}
Cinema.prototype.getBookingTable = function () {
var booking;
var bookingTableHtml = "<table border =2>";
for (booking in this.bookings) {
bookingTableHtml += "<tr><td>";
bookingTableHtml += this.bookings[booking].getBookingId();
bookingTableHtml += "</td>";
bookingTableHtml += "<td>";
bookingTableHtml += this.bookings[booking].getCustomName();
bookingTableHtml += "</td>";
bookingTableHtml += "<td>";
bookingTableHtml += this.bookings[booking].getFilm();
bookingTableHtml += "</td>";
bookingTableHtml += "<td>";
bookingTableHtml += this.bookings[booking].getShowDate();
bookingTableHtml += "</td>";
bookingTableHtml += "</tr>"
}
bookingTableHtml += "</table>";
return bookingTableHtml;
}
var londonOdeon = new Cinema();
londonOdeon.addBooking(324, "Kevin Jestes", "Toy Story", "13 July 2009 20:15");
londonOdeon.addBooking(325, "Joseph Jestes", "Hello world", "15 July 2009 23:15");
londonOdeon.addBooking(326, "Jordan Jestes", "Never say never", "16 July 2009 09:30");
londonOdeon.addBooking(327, "Joshua Jestes", "The Shawshank Redemption", "23 July 2009 18:50");
document.write(londonOdeon.getBookingTable());
</script>
</body>
</html>由于例子中的js代码较长，可以放到单独的js文件中，这样也便于复用。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS日期操作
- seajs
- js深入理解"闭包"
- Javascript模块化编程（三）：require.js的用法
- Javascript模块化编程（二）：AMD规范
- JavaScript基本概念（四）---操作符
- 常用的JavaScript验证正则表达式归总
- 如下是各种获取页面和项目的路径和链接路径：
- 【常用工具类】解析工具类
- js密码强度检测
- 使用webdriver + phantomjs + pdfkit 生成PDF文件
- berserkjs实例
- 复选框的全选
- javascript原型链初识
- js将追加的某行tr删除
- 在Mac下使用berserkJS
- JS鼠标事件大全
- javascript keycode大全
- 实例详解JSON数据格式及json格式数据域字符串相互转换
- js控制页面上展示的图片大小