学习笔记---JavaScript基础
1. JavaScrip数据类型:
值类型PrimitiveValue(栈中):
a. undefined类型(值为undefined表示未定义, undefined实际上是从null派生出来的, 在javascript中他们是相等的)、
b. null类型(已定义且值为null, 表示空引用, 即可用于引用类型, 也可以用于值类型. null只是个标号, 表示什么都没有, 类似于生活中的"无")、
c. boolean(false、0、null、undefined、NaN均表示false, 其他为true; Infinity亦为true)、
d. number(1,1.0,..., 8进制以0开头, 16进制以0x开头)、
e. string(栈上, 无论单引号还是双引号都表示串)
f. 特殊的数值: Infinity(无穷大)、NaN(非数字)、Numer.MAX_VALUE(最大值)、Number.MIN_VALUE(最小值)、Number.POSITIVE_INFINITY(正无穷)、Number.NEGATIVE_INFINITY(负无穷)
引用类型ReferenceValue(堆中):
object(函数是一种特殊的对象类型)
2. 开启脚本调试: Internet工具 -- 高级 -- 去掉禁用脚本调试的勾即可
3. 变量名: 必须是非关键字的字符、下划线、数字、$, 但是首字符不能是数字
4. JSON(JavaScript Object Notation): 即JavaScript对象标记法, 用来在javascrip中创建对象, 如: var obj ={}; 其中, javascript中的对象可以动态的增加或删除, 可以认为对象内部有个字典, 键位对象成员名, 值为成员的value;
5. Array-Like: JavaScript中可以使用类似数组的方式来访问对象, 因为单独的数字不能作为属性名称, 可以通过"0":100(对象内部) 或 array["0"]=100 或array[0]=100赋值, 之后在for循环中, 可以直接用i做下标
6. 函数: a. 函数可以无返回类型, 直接return即可 b. 函数的参数也不需要指定类型, 直接写参数名即可(最好还是写上有意义的符号做参数); 甚至可以不定义任何参数, 在调用时直接传递参数即可(通过arguments获得参数, length属性表示实际传递的参数个数)
7. 匿名函数: (function(){alert("Hello");})(); 脚本块执行完毕后, 自动加载.
8. ★JavaScript脚本块执行顺序: a. 脚本块按先后顺序执行, 所以只能后便的脚本块调用前面脚本块中的函数. b. 同一脚本块中, JavaScript会先识别函数, 之后才会按照代码依次执行, 因此同名的函数会被覆盖, 不会出现C#中的重载.
9. 类函数(构造函数)和new配合用来创造新的对象实例, 可以通过this获得刚创建的对象, 如果不用new的话, this获得是全局对象window, 而对象的成员也是创建在window上的
10.数组[]: 可使用join()方法连接数组的各个数据元素; 若要实现倒序排序, 需要在sort()中放置个函数对象; 也可以用数组当作堆栈和队列使用(pop和shift、push和unshift)
11.日期处理: 当前日期new date(); 年份getFullYear(); 月份getMonth()+1; 天getDate(); 星期几getDay()
12.字符串处理: 常用的字符串对象成员:
length 串长
charAt() 根据下表找字符
substring() 取子串, 第一个参数为起始位置, 第二个参数个数, 正数向右数, 负数向左数
slice() 取字串, 低格参数为起始位置, 第二个参数为个数, 正数向右数, 负数从末尾向左数
concat() 连接子串, 通常用+
toLowerCase() 变小写
toUpperCase() 变大写
indexOf() 查找
13. delete用于动态删除成员、void通常用于避免输出不应该的值: 如:window.open('about:blank')返回一个对象, 如果不加void则会使父页面变成[object], 加上void后返回undefined(无效值), 不会再父页面中显示
14. ★&&和||: 将a或b转换为boolean类型, 对于a&&b: 若a为false, 则返回a, 否则返回b; a||b: 若a为true则返回a, 否则返回b(实际上就是&&和||提前结束的情况). 该操作对于null、NaN、undefined同样有效.
15. ==和===、!=和!==: ==和!=表示数值相等, ===和!==表示引用相等
16. 异常处理: BOM中包含的onerror错误事件和try..catch...finally结构两种异常处理方式.
window.onerror = function(message,url,line){}, 可以定义异常出现时error事件的处理方法, 且必须写在js语句块的第1行. onerror对象提供了三种信息(由error事件的参数自动传递给处理函数): 错误信息、发生错误的文件的url、错误的行号.
Javascript中的所有异常对象派生自Error基类, 该基类有两个属性: name(错误类型)和message(错误信息).
catch子句中捕获的是error的子类: EvalError(eval中的错误)、SyntaxError(eval中的错误语法)、RangeError(数字超范围)、ReferenceError(非法的引用)、TypeError(变量类型非预期)、URIError(encodeURE()或decodeURI()函数中出错).
throw用于抛出异常(throw error_object), 也可以抛出一个error对象, 该对象的构造函数只有一个参数--错误信息.
17. BOM(Browser Object Model, 浏览器对象模型): 表示当前浏览器窗口对象.
顶级对象的常用方法: alert用于在提示窗口中显示信息.
confirm显示一个确认窗口.
prompt获取用户的输入.
open打开新的页面, 该方法返回新窗口的引用供父窗口使用, 同时也可以通过window.opener得到父窗口的引用.
close关闭当前窗口.
setInterval设定定时任务
clearInterval取消定时任务
setTimeout设置延时执行任务
常见属性: event事件对象, event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作)、srcElement(触发事件的事件源对象)和attachEvent("onclick",function(){...});
location当前访问的资源地址
opener打开当前窗口的窗口(即父窗口)
document网页内容的dom对象(内存中的, document object model)
//示例代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Java Script</title>
</head>
<body>
<script type="text/javascript">
var undefined = undefined; //左边变量名, 右边为值. 小技巧, 速度快
alert("type:" + typeof (undefined) + ", value:" + undefined); //undefined类型为undefined, 值也为undefined
var nl = null;
alert("type:" + typeof (null) + ", value:" + nl); //注意: 类型为object, 值为null; var nl定义了一个变量, 该变量指向堆中的一个对象, null仅仅是个标号, 表示该变量放置的引用是空引用, 故typeof的结果是object
//定义对象
var people = {}; //JSON: JavaScript Object Notation(JavaScript对象标记法)
people.Name = "张三";
people.Age = 25;
alert("姓名: " + people.Name + ", 年龄: " + people.Age);
//显示对象内容的方法
var showMe = function ShowObject(obj) {
var result = "";
for (var propertyName in obj) { //in后便必须为对象
result += "属性名: " + propertyName + ", 值: " + obj[propertyName] + "\n";
}
return result;
}
//函数是一种特殊的对象类型
showMe(people); //有点类似委托实例, 通过变量调用函数.
alert(showMe); //函数是一种特殊的对象
//另一种定义对象的方式, 也可以动态的删除成员
var book = {
bookname: "大唐西行记", //这里是,号
bookauthor: "某高僧",
bookprice: 55.55
};
alert(ShowObject(book)); //显示结果
delete book.bookauthor; //动态删除对象成员
alert(ShowObject(book));
//通过对象模拟数组(Array-Like)
var array = {
"0": "不可以直接用数字作对象成员",
"1": "但可以在for循环中, 通过索引器模拟数组的下标",
length: 2
};
array[2] = "xxx";
array["3"] = 'yyy';
array.length += 2;
for (var i = 0; i < array.length; i++) {
alert(array[i]);
}
//可以不定义任何参数, 通过arguments获得参数, length属性表示实际传递的参数个数
function showArguments() {
var result = "";
for (var i = 0; i < arguments.length; i++) {
result += arguments[i] + ",";
}
return result;
}
alert(showArguments(1, "abc", true, people));
//匿名函数
(function() {
alert("Hello");
})();
//类函数(构造函数), 类函数通常首字母大写
function CreateBook(name, author, price) {
this.Name = name;
this.Author = author;
this.Price = price;
}
var redbook = new CreateBook("红宝书", "某集团", 98.0); //使用new创建对象
alert(ShowObject(redbook)); //对象成员创建到redbook上
var windowbook = CreateBook("window对象", "Win2K3", 0.0); //不实用new创建对象
alert(ShowObject(windowbook)); //结果显示为空
alert(ShowObject(window)); //对象成员创建到了window对象上
//数组对象
var array = [3, 1, 52, 12, 1, 97, 32];
array[7] = 77; //直接通过下表访问
alert(array.length);
alert(array.join(","));
array.sort() //排序
alert(array.join(","));
array.reverse(); //反转
alert(array.join(","));
array.sort(function(a, b) { return b - a }); //匿名函数, 倒序排序
alert(array.join(","));
//堆栈push、pop
array.pop();
array.push(111);
alert(array.join(","));
//队列: push和pop操作数组尾部, unshift和shift操作数组头部
array.shift(); //队列头
array.push(0); //助记: push和unshift, 带u的表示入队
alert(array.join(","));
array.unshift(33);
array.pop();
alert(array.join(","));
//日期处理
var now = new Date(); //类函数, 大写
alert(now);
alert(now.toLocaleString());
alert(now.getFullYear());
alert(now.getMonth() + 1);
alert(now.getDate());
alert(now.getDay());
</script>
<script type="text/javascript">
//显示对象中的内容
function ShowObject(obj) {
var result = "";
if (typeof (obj) == "undefined") { //可能没传递参数, 也可能参数为undefined
alert("必须传递参数, 且参数已定义! ");
return;
}
if (typeof (obj) == "object" || typeof (obj) == "function") { //函数是个特殊的对象
if (typeof (obj) == null) { //typeof(null)也是object类型
alert("参数不能为null! ");
return;
}
//遍历对象成员
for (var propertyName in obj) { //in后便必须为对象
result += "属性名: " + propertyName + ", 值: " + obj[propertyName] + "\n"; //使用索引器获取成员值
}
}
else {
//其他类型直接显示
result += "输入为值类型, 具体类型为" + typeof (obj) + ", 值为: " + obj;
}
return result;
}
var book = {
bookname: "大唐西行记", //这里是,号
bookauthor: "某高僧",
bookprice: 55.55
};
//alert(ShowObject(book)); //测试数据
//alert(ShowObject(100));
//给String类的原型函数上, 添加trim方法去除首位空格
String.prototype.trim = function(str) {
if (arguments.length !== 0) throw Error.parameterCount(); //!==表示在不需要类型转换的情况下, 就不相等则返回false, 即不相等返回false, 相等返回true
var regexp = /(^\s+) | (\s+$)/g; //new RegExp(); //^匹配前面、$匹配后边、|或者、+1次或n次、g表示全局匹配global、i表示部分匹配insect
return this.replace(regexp, ""); //调用方法, 所以this为str这个字符串
};
alert(" like u ".trim());
//某整数范围内, 统计某数字(1-9)出现的次数: onenume: 起始数; twonum: 终止数; threenum: 要计算个数的数字, 1-9之间
function CountNum(onenum, twonum, threenum) {
var sum = 0;
for (var i = onenum; i <= twonum; i++) {
//alert(i.toString());
var numlength = i.toString().length; //拿到数字的位数
//alert(numlength);
var count = 0;
for (var j = 1; j <= numlength; j++) {
var temp = Math.floor(i % Math.pow(10, j) / Math.pow(10, j - 1));
//alert(temp);
if (temp == 2) {
count++;
}
}
sum += count;
}
return sum;
}
//alert(CountNum(30, 100, 2)); //测试数据
//输入某组整数数据(所有整数均不大于100), 要求去除重复项后按从到高到底排序输出
//思路: 利用Array-Like实现, 用输入的整数做键, 用boolean做值; 如此便去除了重复项, 再用整数做索引器从大数到小数输出即可
function DealScore() {
var score = {};
for (var i = 0; i < arguments.length; i++) {
var temp = arguments[i];
score[temp] = true;
}
var result = "";
for (var i = 100; i >= 0; i--) { //键的最大值不可能大于100
if (score[i] == true) {
result += i + ",";
}
}
return result;
}
//alert(DealScore(12,15,98,87,56,78,23,100));
//根据某个输入的整数, 将其拆分为2^x次方,3^y次方,4^z次方等形式(略去验证)
//思路: 利用Array-Like, 用2,3,4等基数做键, 每除一次2,3或者4(能整除), 对应键所代表的值将+1, 最后输出对象中的键和次数(值)即可
function SplitNum(num) {
var array = {};
for (var i = 2; i <= num; i++) {
while (num % i == 0) {
if (!array[i]) { //不存在键为i的项, 如:2
array[i] = 1; //创建键为i, 值为第一次即1
}
else {
array[i]++; //存在, 则基数其+1
}
num /= i;
}
}
//输出
var result = "";
for (var propertyName in array) {
result += propertyName + "^" + array[propertyName] + "\n";
}
return result;
}
//alert(SplitNum(12));
</script>
<script type="text/javascript">
//window.onerror错误事件
window.onerror = function(message, url, line) {
var msg = "错误信息详情: ";
msg += "\nMessage: " + message;
msg += "\nUrl: " + url;
msg += "\nLine: " + line;
alert(msg);
return true;
}
//try...catch...finally异常处理
try {
window.nonExitFunction();
alert("Method completed.");
}
catch (exception) {
alert("an exception occurred.");
}
finally {
alert("end of try...catch Test.");
}
//throw
throw "An error occurred.";
throw 1326;
throw new RangeError("Sorry, you just don't have the range.");
</script>
<a href="javascript:window.open('about:blank');">无void, 原来的父页面被替换成"[object]"</a><br />
<a href="javascript:void(window.open('about:blank:'))">有void, 原来的父页面不做更改</a>
</body>
</html>