JavaScript学习笔记1
1. prompt和confirm函数
1. confirm函数返回布尔值:用户单击OK则返回true,单击cancel返回false.
2. prompt为询问式:用户输入内容,则返回其内容.
<html>
<head>
<script type="text/javascript">
<!--用户点击OK或者Cancel,则返回true或者false-->
var isOK = confirm("shall we, then?");
document.write(isOK);
<!--输入换行符-->
document.write("<br />");
<!--如果用户输入内容并且点击OK,则answer显示其内容.若点击取消按钮,则返回null-->
var answer = prompt("tell my the answer!", "the answer is:");
document.write(answer);
</script>
</head>
</html> 浏览器显示如下:(点击确定并且输入字符串后,点击确定):
2. 进一步认识类型
1. undefined:未定义类型
2. null:定义了但是没有任何值(这有点匪夷所思)
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str);
}
var mysteryVariable;
print(mysteryVariable);
print("<br />");
<!--赋予null有个用途是:和if(nullVariable==null)配合使用,用于后期赋值,前期先定义-->
var nullVariable = null;
print(nullVariable);
</script>
</head>
</html> 浏览器显示如下:
3. 自动类型转换
1. 0, NaN和空字符串===>false,其余的===>true
2. ===和!==将会精确比较(即包括比较类型)
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str);
}
<!--模糊比较-->
print(false == 0);
print(" ");
print("5" == 5);
print(" ");
print(null == undefined)
print("<br />");
<!--精确比较-->
print(false === 0);
print(" ");
print("5" === 5);
print(" ");
print(null === undefined)
</script>
</head>
</html> 浏览器显示如下:
3. 在符合字符串条件下,则进行字符串转换;或者在符合数值操作条件下,进行数值转换
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str);
}
//符合字符串操作
print("hello" + 5);
print("<br />");
//符合数值操作--不推荐在字符串中使用*
print("5" * 5);
</script>
</head>
</html> 浏览器显示如下:
3. 函数
1. 闭包
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str);
}
//函数名也只是一个变量
function makeAdder(amount) {
return function(number) {
return number * amount;
}
}
var addTwo = makeAdder(2);
print(addTwo(3));
</script>
</head>
</html> 浏览器输出:6
4. 数据结构
1. 属性:关联的值称为属性(引申到C++的map中),两种读取属性的方法:中括号或者点标记法:
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str);
}
var text = "hello world";
print(text["length"]);
print("<br />");
print(text.length);
</script>
</head>
</html>
2. 对象值:一个属性的集合:可以添加和删除
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str + "<br />");
}
var cat = {color : "gray", name : "spot", size : 46};
print("the size is:" + cat.size);
//使用delete删除属性
delete cat.size;
print("the size is:" + cat.size);
//添加属性
cat.age = 3;
print("the age is:" + cat.age);
//这里cat是一个对象
print("the cat is:<br />" + cat);
//判断是否存在属性
if ("age" in cat) {
print("cat has age");
}
</script>
</head>
</html>
3. 易变性
下例中,如果单单只要一个副本,如何解决?
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str + "<br />");
}
var object1 = {"value" : 10};
//这里object1和object2是相同的对象!但是如果只是想要一个副本,如何达到?
var object2 = object1;
var object3 = {"value" : 10};
print(object1 == object2);
print(object1 == object3);
object1.value = 15;
print(object2.value);
//通过new一个对象,达到得到副本的作用
var object4 = new Object();
for (var p in object1) {
var name = p;
var value = object1[name];
object4[name] = value;
}
//这里object4是copy出来的,所以值不受object1的改变而改变
print(object4.value);
object1.value = 10;
print(object4.value);
</script>
</head>
</html>
4. 数组
可以简单理解为:属性集合的一种特殊情况:
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str + "<br />");
}
//数组形式
print("the array is:")
var arr = [11, 12, 13, 14];
for (var i = 0; i < arr.length; i++) {
print(arr[i]);
}
//对应的集合形式
print("the list is:")
var arr1 = {0 : 11, 1 : 12, 2 : 13, 3 : 14};
for (var p in arr1) {
print(arr1[p]);
}
</script>
</head>
</html>
5. 方法
<html>
<head>
<script type="text/javascript">
function print(str) {
document.write(str + "<br />");
}
var mark = [];
mark.push("hello");
mark.push("world");
mark.push("i love you");
var sentence = mark.join(" ");
print(sentence); //输出:hello world i love you
print(mark.pop()); //输出:i love you
sentence = mark.join(" ");
print(sentence); //输出:hello world
</script>
</head>
</html>