JavaScirpt Note: JavaScript基础篇

发表于 | | 阅读次数

前言. javascript基本信息

javascript是所学最难的编程语言,这里先给大家简单说下js的一些基层知识,在本月会持续更新到js高级部分.

enjoy it!

  1. js与java的关系： 雷锋与雷锋塔的关系
  2. js能做什么：游戏|后台应用程序|前台特效

00.javascript学习大纲:

  1. 基础语法
  2. 内置对象
  3. 浏览器对象
  4. 文档对象
  5. 节点对象
  6. ajax无刷新技术
  7. jquery框架

一. 语法特性

1.1 基础语法

页面嵌套js

1
2
3
4
5
6
7
8
9
方法1：
<script>
    //js代码
</script>
方法2：
<script type="text/javascript" src="//cdn.trackjs.com/releases/current/tracker.js"></script>
  • 在页面上加入script标签的地方只有两个地方:head中，body体中
  • 加载外部的js文件，在head中加
  • 写页面特效，js放到body后面

js是面向对象的语言，严格的说是基于对象的语言

document js类实例化出来
window js类实例化出来

注释

1
2
// 注释方法1
/*  注释方法2 */

认识js基础对象

  1. window //窗口对象
  2. document //文档对象
  3. document.documentElement //html对象
  4. document.body //body对象 //主要战场
  5. document.head //head对象

写js代码的时候可以不用写window对象，直接写window属性和方法就可, ex:
alert(); //window的方法
window.document.write(“aaa”); //write方法是属性于document的
//document.write()在页面所有元素加载完毕以后，不要再随便使用document.write,否则会关闭当前文档流，重新打开一个新的文档流，然后输出到这个文档流中.

demo. 创建元素:

1.2 基础语法

1.2.1 变量

JavaScript 语言是区分大小写的，不管是命名变量还是使用关键字的时候。

大多数情况下，JavaScript 忽略空白或者 JavaScript 语句之间的空格（也包括 Tab 键产生的空白缩进）。

js变量的声明:

var 变量名;

js中可以同时赋值多个变量:

1
2
var a=2 , b =12;
alert(a);
变量的定义
  • 定义变量：var str="hello world";

    js一定要用var修饰变量,否则会报”不遵守标准”

  • 输出变量

    1
    2
    3
    alert(str);
    document.write(str);
    console.log(str);

  • 变量定义和调用前面不用加$

变量类型
  1. 字符串
  2. 整型

    num=10;

  3. 浮点

    num=10.3;

  4. 布尔

    str=false;

  5. 数组

    js只有索引数组，而且遍历没有foreach，只有for

  6. 对象

    1
    2
    3
    4
    5
    obj=new Object();
    obj.name="user1";
    obj.say=function(){
        alert("aaaaaaaaaaaaaa");
    }

  7. json对象

    {“name”:”user1”,”age”:”30”}

  8. NaN

    not a number 不是一个数字，非数字

  9. null

    空,对象类型

  10. undefined

    未定义

检查变量类型
  1. typeof() //global对象的其中一个方法，typeof()
  2. 对象.constructor; //查看当前对象的构造函数是谁
    1
    2
    3
    if(arr.constructor==Array){
        alert("数组"); //数组推荐用这种方法，因为typeof得到是object
    }
变量类型转换

  1. 字符串 .toString() //返回字符串

    1
    2
    3
    4
    array.toString();
    bool.toString();   
    date.toString();
    number.toString();

  2. 整型 从字符串转成整型

    1
    2
    3
    parseInt("3abc"); //"3","3abc"
    parseFloat(); //"3.3"
    abc3  最后会被转成NaN

还可以用new Number(“3”); 只能转”3” “3.2”，不能转”3abc”

  1. 布尔类型

1)!!各种数据类型

2)new Boolean(各种数据类型);

为false的情况: false、0、null、 NaN，或者空字符串

  1. json字符串转json对象
    1
    2
    str="{'name':'user'}";
    obj=eval("("+str+")");

eval(字符串表达式); 把一个字符串表达式做一个表达式去执行

变量运算符
  1. + 字符串连接符
  2. new 创建对象用的
  3. this 本对象
  4. in 检查某一个属性是否是这个对象里面的
  5. void //可以不用去记,作用产生任何返回值
  6. instanceof // 检查某个对象是否是由某个构造函数产生的, demo:
  1. delete //不能删除用var定义的变量，删除数组的某一个值，或者对象的某个属性.

1.2.2 控制语句

  1. with 

    1
    2
    3
    4
    5
    with(document){
        write("111111");
        write("111111");
        write("111111");
    }

  2. if

    1
    2
    3
    4
    5
    if(){
    }else{
    }

  3. while

    1
    2
    3
    while(){
    }

  4. for

1
2
3
4
5
6
7
for(var i=0,l=arr.length;i<l;i++){
    document.write(i,"<br>");
}
for(var i in obj){
    document.write(i,"=>",obj[i],"<br>"); 
}
  1. switch case

1.2.3 消息框

  • alert(); //警告
  • confirm(); //确认
  • prompt(); //提示

1.2.4 函数

  1. 有名的函数 function show(){}
  2. 匿名函数(无名的函数)
    1
    2
    obj.say=function(){}
    obj.say();
变量作用域
  1. var
  2. 不用var修饰

只有在函数内定义的var str=20，它是局部变量，其余的地方全面全局变量.

1.2.5 对象

对象遍历

遍历body:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="div1">
		<h1 id="obj1" onclick="alert(111)">111</h1>
		<h1 id="obj2">222</h1>
		<h1 id="obj3">333</h1>	
		<button id="btobj" onclick="show()">source</button>
	</div>
</body>
	<script>
		var obj=document.body;
		for(var i in obj){
			if(i!="innerHTML" && i!="outerHTML"){
				document.write(i," => ",obj[i],"<br>");
			}
		}
	</script>
</html>
顶级全局方法
1
2
3
4
5
6
7
8
9
10
11
12
13
parseInt();
parseFloat();
typeof();
eval();
isNaN();
String();
Number();
Array();
Object();
Bool();
encodeURIComponent();
decodeURIComponent();
内置对象
  1. 数学

属性:

Math.pi

方法:

1
2
3
4
5
6
Math.ceil();
Math.floor();
Math.round();
Math.random();
Math.max();
Math.min();

  1. 日期
    1
    2
    var tt=new Date();
    var time=tt.getFullYear()+"-"+(tt.getMonth()+1)+"-"+tt.getDate()+" "+tt.getHours()+":"+tt.getMinutes()+":"+tt.getSeconds();
  1. 定时器
    1
    2
    s1=setInterval(函数,3);
    clearInterval(s1);

  1. 超时器

    1
    2
    s2=setTimeout();
    clearTimeout(s2);

  2. 字符串

    属性:length
    方法:

    1
    2
    3
    4
    5
    6
    7
    8
    indexOf()
    lastIndexOf();
    substr(0,5);
    slice(start,end);
    split(reg);
    search(reg); //匹配到返回的是首次出现的位置，匹配不到是-1
    match(reg); //匹配到返回的是匹配的字符串数组，匹配不到是null
    replace(reg,"str"); //返回的是替换后的新字符串,没有替换，则返回原字符串

  3. 数组

    属性:length
    方法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    join("/");
    pop() //返回弹出的值，并且改变原数组
    push() //从后面压入一个值，并且返回数组长度
    shift() //返回弹出的值，并且改变原数组
    unshift() //从前面压入一个值，并且返回数组长度
    reverse() //把数组元素进行反转，反转原数组
    concat() //连接多个数组
    slice(start,end) //返回的是数组
    sort(show)
    //show(a,b){
        return a-b;  //正序
        //return b-a;  //倒序
    }
    splice()
    //2,0,"abc"  从第三个开始，删除0个，并且插入abc
    //2,3,"abc"  从第三个开始, 删除3个，并且插入abc

demo: 遍历数组

  1. 常用js对象:

    1.window对象
    2.document对象
    3.document.head对象
    4.document.body对象
    5.document.title对象
    6.document.documentElement对象 

1
2
3
4
5
6
7
8
9
10
window
document
html
    head
        title
        /title
    /head
    body
    /body
/html

  1. 浏览器默认行为

    1
    2
    3
    4
    <a href="index.php" target="_blank"></a>
    <form action="index.php" target="_blank"></form>
    <input type=submit name=sub value="提交">
    <input type=reset name=set value="重置">

  2. 事件绑定

  3. <button id=bid onclick="js"></button>

  4. 在js中给元素标签绑事件

    1
    2
    3
    4
    5
    6
    7
    <button  id=bid></button>
    <script>
    bid=document.getElementById("bid");
    bid.onclick=function(){
        alert(111);
    }
    </script>

  5. 事件类型

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    1.onclick
    2.ondblclick
    3.onmouseover
    4.onmouseout
    5.onmousedown
    6.onmouseup
    7.onmousemove
    8.onkeydown
    9.onkeyup
    10.onkeypress
    11.onfocus
    12.onblur
    13.onchange
    14.onselect
    15.onsubmit
    16.onreset
    17.onload
    18.onerror
    19.onresize
    20.onscroll

方法:

1
2
3
4
1.select()
2.blur()
3.focus()
4.click()

表单事件:

demo 点击事件:

demo 范例合集:

JavaScript 数据类型

JavaScript 主要有如下 6 种数据类型：

  1. 字符串（String）类型: 字符串类型使用双引号 “ 或单引号 ‘ 括起来
  2. 数值（Number）类型: 数值（Number）类型包括整数和浮点数（包含小数点的数或科学记数法的数）
  3. 布尔（Boolean）类型
  4. 空值（Null）: 空值类型表示该变量或内容无任何值
  5. 未定义（Undefined）类型: 变量被创建后，未给该变量赋值，该变量即为未定义类型
  6. 对象（Object）类型

JavaScript 是一门松散的语言，甚至可以说是混合语言，因此导致其数据类型以及类型之间的关系比较复杂。另外也有一些人把 function（函数） 列为数据类型之一，对于这些有一定争议的说法

JavaScript 运算符

JavaScript 运算符主要包括：

  1. 算术运算符 : + - * / % ++ –
  2. 赋值运算符
  3. 比较运算符
  4. 三元运算符
1
2
3
x = 2;
y = (x == 2) ? x : 1;
alert(y);   //输出：2
  1. 逻辑运算符: && || !
  2. 字符串连接运算符: 连接运算符 + 主要用于连接两个字符串或字符串变量。因此，在对字符串或字符串变量使用该运算符时，并不是对它们做加法计算。

JavaScript 循环控制

1
2
3
4
var i=1
for (i = 1; i <= 10; i++) {
    document.write(i + "<br />")
}

JavaScript 流程控制

JavaScript for 循环用于反复执行一段代码，其语法如下：

for (expr1; expr2; expr3){
    statement
}

for 循环语法解读
. expr1 在循环开始前无条件求值一次
. expr2 在每次循环开始前求值，如果值为 TRUE，则继续循环，执行嵌套的循环语句；如果值为 FALSE，则终止循环。
. expr3 在每次循环之后被求值（执行）
. 每个表达式都可以为空。如果expr2 为空意则将无限循环下去，

1
2
3
4
var i=1
for (i = 1; i <= 10; i++) {
    document.write(i + "<br />")
}

JavaScript 消息提示框

alert():

confirm(): 创建一个消息确认框

prompt(): 创建一个消息提示框

JavaScript 函数

函数是 JavaScript 语言的核心之一，其基本语法如下：

function functionName(arg0, arg1, ...) {
    statements
}

JavaScript 函数参数错误

JavaScript 函数参数并没有严格要求哪些参数是必选参数，哪些参数是可选参数，因此传入的参数个数是允许不等于定义函数时参数的个数的。
如果在函数中使用了未定义的参数，则会提示语法错误（参数未定义），JavaScript 代码不会正常运行。
如果参数已经定义，但未正确的传入参数时，相关参数值会以 undefined 替换，JavaScript 代码仍正常运行，如下例所示：

1
2
3
4
5
6
<script type="text/javascript">
function hello(name,age){
    document.write("我叫" + name + "，今年" + age + "岁！");
}
</script>
<input type="button" onclick="hello('小明')" value="确定" />

输出：我叫小明，今年undefined岁！

JavaScript arguments 对象

在 JavaScript 函数中，有个特殊的 arguments 对象，它以类似数组的形式保存了当前函数调用的参数。因此，开发者无需定义具体的参数名，就可以方便的访问函数参数：

1
2
3
4
5
6
<script type="text/javascript">
function hello(){
    document.write("我叫" + arguments[0] + "，今年" + arguments[1] + "岁！");
}
</script>
<input type="button" onclick="hello('小明',18)" value="确定" />

输出：我叫小明，今年18岁！

通常在函数定义中，为便于代码的可读性，一般不会使用 arguments 对象。在处理不定数目的参数，或者模拟函数重载时，可方便的使用 arguments 对象来处理。

arguments.length 可以很方便的检测函数的参数个数。

document.write(arguments.length);

JavaScript 事件

JavaScript 面向对象

JavaScript 字符串处理(String对象)

JavaScript 数组

JavaScript 时间日期(Date 对象)

JavaScript 数学计算(Math对象)

JavaScript Boolean 对象

JavaScript History 对象

JavaScript Location 对象

JavaScript Navigator 对象

JavaScript Screen 对象

JavaScript Document 对象

JavaScript Window 对象