javascript学习笔记2
1. 错误处理
1. 简单的错误处理
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str + "<br />");
}
function between(string, start, end) {
var startAt = string.indexOf(start);
//进行错误处理
if (-1 == startAt) {
return undefined;
}
startAt += start.length;
var endAt = string.indexOf(end, startAt);
if (-1 == endAt) {
return undefined;
}
return string.slice(startAt, endAt);
}
print(between("hello 'world' i love you", "'", "'")); //输出world
</script>
</head>
</html>
2. 有点不知所措的错误处理
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str + "<br />");
}
function lastElement(array) {
if (array.length > 0) {
return array[array.length - 1];
} else {
return undefined;
}
}
//这种情况下,undefined是最后一个值,还是代表错误,就无法判断了
print(lastElement([1, 2, undefined]));
</script>
</head>
</html>
3. 处理异常(通过try--catch来捕捉异常,通过finally来处理异常的后续工作)
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str + "<br />");
}
//用于测试finally--出现异常后需要保持原先的值
var value = 5;
function lastElement(array) {
//这里用作测试,value的值被改变了,函数结尾重新赋原始值
value = 10;
if (array.length > 0) {
return array[array.length - 1];
} else {
throw "cannot take the last element of an empty array";
}
value = 5;
}
try{
print(lastElement([]));
} catch(error) {
print("something went wrong:" + error);
} finally {
value = 5;
}
//如果没有finally的赋值,value将等于10
print(value);
</script>
</head>
</html> 浏览器显示如下:
1. 我们可以自定义异常的处理
通过new Error来定义一个异常对象:
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str + "<br />");
}
//非法数字异常
var InvalidInputError = new Error("Invalid numeric input");
function inputNumber() {
var input = Number(prompt("Give me a number", ""));
if (isNaN(input)) {
throw InvalidInputError;
}
return input;
}
//重复输入数值
for (; ;) {
try {
alert(inputNumber() + 5);
break;
} catch (error) {
//并不是InvalidInputError,则抛出异常
if (error != InvalidInputError) {
throw error;
}
alert("you did not input a number. Try again");
}
}
</script>
</head>
</html>
2. 函数式编程
1. 高阶函数:操作其他函数的函数
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str + "<br />");
}
function forEach(array, action) {
for (var i = 0; i < array.length; i++) {
action(array[i]);
}
}
function sum(numbers) {
var total = 0;
//这里number对应于array[i]
forEach(numbers, function(number) {
total += number;
});
return total;
}
//作为数组或者集合,最好要定义
var arr = [];
for ( var i = 0; i <= 10; i++) {
arr.push(i);
}
print(sum(arr));
</script>
</head>
</html> 程序输出:55
1. 修改函数
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str + "<br />");
}
//注意:这里function(x)的作用类似于一个返回值:说明!func(x)是一个函数
//但是这里只能声明一个参数,或者说只能声明具体的参数个数.如果参数个数不固定,则需要用到apply
function negate(func) {
return function(x) {
return !func(x);
};
}
var isNotNaN = negate(isNaN);
print(isNotNaN(NaN));
function sum() {
var total = 0;
for (var i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
function negateSum(func) {
return function() {
//这里不要傻傻的返回-func,因为func会被解释成一个数值,
//而非一个函数地址.如果返回func,则有惊喜
// return func;
return -func.apply(null, arguments);
}
}
var func = negateSum(sum);
print(func(1, 2, 3));
</script>
</head>
</html> 程序输出:
2. 规约函数
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str + "<br />");
}
function forEach(array, func) {
for (var i = 0; i < array.length; i++) {
func(array[i]);
}
}
function reduce(combine, base, array) {
forEach(array, function(element) {
base = combine(base, element);
});
return base;
}
function add(a, b) {
return a + b;
}
function sum(numbers) {
return reduce(add, 0, numbers);
}
print(sum([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]));
</script>
</head>
</html>
2. 将文本转换为HTML文件
1. 规则:
1) 用空行分隔段落
2) 用%开头的段落是标题,%越多,标题越小
3) 在段落里,将某些文本放在星号(*)之间进行强调
4) 脚注写在花括号里.
2. 生成HTML
javascript提供简单的建模方法:
var linkObject = {name : "a", attributes : {href : "http://www.gokgs.com/"}, content : ["play Go!"]}; 这样会直接生成HTML语句如下:
<a href="http://www.gokgs.coom/">play Go!</a>代码如下:(不知如何调试程序,所以没生成正确的结果):
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function print(str) {
document.write(str + "<br />");
}
/*********
1. 将标题和段落分割开来.
2. %代表h1,%%代表h2,以此类推
3. 非标题的均为段落(<p>)
************/
function processParagraph(paragraph) {
var header = 0;
while (paragraph.charAt(header) == "%") {
header++;
}
if (header > 0) {
return {type : "h" + header, content : paragraph.slice(header + 1)};
} else {
return {type : "p", content : paragraph};
}
}
//将数组array的每个元素进行transform转换,并将转换后的结果存储于关联容器中
function map(transform, array) {
var mapped = [];
for (var i = 0; i < array.length; i++) {
mapped.push(transform(array[i]));
}
return mapped;
}
//使用了递归
function splitParagraph(text) {
function split(pos) {
if (pos == text.length) {
return [];
}
//找到*...*部分(*代表强调)
else if (text.charAt(pos) == "*") {
var end = findClosing("*", pos + 1);
var frag = {type : "emphasized", content : text.slice(pos + 1, end)};
return [frag].concat(split(end + 1));
}
//找到{...}部分({}代表脚注)
else if (text.charAt(pos) == "{") {
var end = findClosing("}", pos + 1);
var frag = {type : "footnote", content : text.slice(pos + 1, end)};
return [frag].concat(split(end + 1));
}
else {
var end = findOpeningOrEnd(pos);
var frag = {type : "normal", content : text.slice(pos, end)};
return [frag].concat(split(end));
}
}
//从索引from开始查找字符character
function findClosing(character, from) {
var end = text.indexOf(character, from);
if (end == -1) throw new Error("Missing closing '" + character + "'");
else return end;
}
//查找最早出现字符"*"或者"{"的索引
function findOpeningOrEnd(from) {
function indexOrEnd(character) {
var index = text.indexOf(character, from);
return index == -1 ? text.length : index;
}
return Math.min(indexOrEnd("*"), indexOrEnd("{"));
}
return split(0);
}
//移动脚注
function extractFootnotes(paragraphs) {
var footnotes = [];
var currentNote = 0;
//将脚注的内容替换为索引
function replaceFootnote(fragment) {
if (fragment.type == "footnote") {
currentNote++;
footnotes.push(fragment);
fragment.number = currentNote;
return {type : "reference", number : currentNote};
}
else {
return fragment;
}
}
forEach(paragraphs, function(paragraph) {
paragraph.content = map(replaceFootnote, paragraph.content);
});
return footnotes;
}
//生成HTML标签
function tag(name, content, attributes) {
return {name : name, attributes : attributes, content : content};
}
function link(target, text) {
return tag("a", [text], {href : target});
}
function htmlDoc(title, bodyContent) {
return tag("html", [tag("head", [tag("title", [title])]),
tag("body", bodyContent)]);
}
//文档中特殊字符的转换
function escapeHTML(text) {
var replacements = [[/&/g, "&"], [/"/g, """],
[/</g, "<"], [/>/g, ">"]];
forEach(replacements, function(replace) {
text = text.replace(replace[0], replace[1]);
});
return text;
}
function forEach(array, func) {
for (var i = 0; i < array.length; i++) {
func(array[i]);
}
}
//将attribute对象转换为字符串{href : "http://www.w3school.com.cn"}=>href=http://www.w3school.com.cn
function renderAttributes(attributes) {
if (attributes == null) return "";
var result = [];
for (var name in attributes) {
result.push(" " + name + "=\"" + escapeHTML(attributes[name]) + "\"");
}
return result.join("");
}
//将一个HTML元素对象转换为一个字符串
//print(renderHTML(link("http://www.w3school.com.cn", "the link")));
function renderHTML(element) {
var pieces = [];
function render(element) {
//文本节点
if (typeof element == "string") {
pieces.push(escapeHTML(element));
}
//不带内容的标签
else if (!element.content || element.content.length == 0) {
pieces.push("<" + element.name + renderAttributes(element.attributes) + ">");
}
//带内容的标签
else {
pieces.push("<" + element.name + renderAttributes(element.attributes) + ">");
forEach(element.content, render);
pieces.push("</" + element.name + ">");
}
}
render(element);
return pieces.join("");
}
//片段转换为HTML
function renderFragment(fragment) {
if(gragment.type == "reference") {
return tag("sup", [link("#footnote" + number, String(number))]);
}
else if (fragment.type == "emphasised") {
return tag("em", [fragment.content]);
}
else if (fragment.type == "normal") {
return fragment.content;
}
}
//显示整个段落
function renderParagraph(paragraph) {
return tag(paragraph.type, map(renderFragment, paragraph.content));
}
//生成脚注
function renderFootnote(footnote) {
var anchor = tag("a", [], {name : "footnote" + footnote.number});
var number = "[" + footnote.number + "]";
return tag("p", [tag("small", [anchor, number, footnote.content])]);
}
//正式生成HTML文档
function renderFile(file, title) {
var paragraphs = map(processParagraph, file.split("\n\n"));
var footnotes = map(renderFootnote, extractFootnotes(paragraphs));
var body = map(renderParagraph, paragraphs).concat(footnotes);
return renderHTML(htmlDoc(title, body));
}
var file = "%the book of programming" + "<br /><br />" + "%%the tow aspects" + "<br /><br />" + "hello world" + "<br /><br />" + "i love you" +
"<br /><br />" + "%% Short Sayings" + "<br /><br />" + " forever" + "<br /><br />"
//print(file);
print(renderFile(file, "the programming"));
</script>
</head>
</html>