Web前端开发 - 5 - JavaScript基础

一、JavaScript基础

1. JavaScript入门

<script>  </script>
<script type="text/javascript" src="xxx.js"> </script>
//单行注释
/* 多行注释
Uniconde字符集
大小写敏感
驼峰命名法
代码格式化:js一般会忽略分隔符,如空格符、制表符和换行符
标签:由一个合法字符加一个冒号组成,标签可以放在任意行的起始位置。结构体中使用break、continue等语句跳出循环结构
关键字:JavaScript默认定义具有特殊含义的词汇,如指令名、语句名、函数名、方法名、对象名、属性名。
保留字:预留以后作为关键字使用
*/

JavaScript常用关键字
26个关键字解析

  • 对象
// 使用点号可以引用对象的属性和方法,在调用对象方法时应在函数名称后面补加小括号。
var me = {
	name:"张三",
	say:function() {
		return "Hi, world!";
	}
}
document.write("<h1>" + me.name + " : " + me.say() + "</h1>");
  • 数组
var me = [
            "Charlie",
            function(){
                return "Hi,world!";
            }
        ]
        document.write("<h1>" + me[0] + " : " + me[1]() + "</h1>");
  • 全局变量和局部变量(私有变量)
// 全局变量:在整个页面中可见,并在页面中任何位置允许访问。【在域外,或者域内不使用var定义】
// 局部变量:只能在指定函数中可见,函数外面是不可见的,也不允许访问。【使用var关键字声明的变量就是私有变量】
  • 表达式
// 表达式是指可以运算,且必须返回一个确定的值的句子。表达式一般由常量、变量、运算符、子表达式构成
// 运算符:连接表达式的符号

2. 语句

语句就是JavaScript指令,通过这些指令可以设计程序的逻辑执行顺序

  • 表达式语句和语句块
// 如果在表达式的尾部添加一个分号就会形成一个表达式语句,默认独立一行的表达式也是一个表达式语句,解析时会自动补加分号。
var a,b,c;		//表达式语句
{				// 语句块
	a=b=c=1
	a = b + c 
}
  • 条件语句
// 程序的基本逻辑结构包括3种:顺序、选择和循环。大部分控制语句属于顺序结构,而条件语句则属于选择结构。主要包括if语句和switch语句两种
// if 语句
if (condition)
	statements1
else
	statements2

// switch语句
switch (expression) {
	case label1 :
		statement1;
		break;
	case label2 :
		statement2;
		break;
	...
	default : statementn;
  • 循环语句
// 循环语句就是能够重复相同操作的语句:while 、 for
// while 语句 
while (condition) {
	statements
}
// while语句特殊变体
do
	statement
while (condition);

// for 语句
for ([initial-expression;] [condition;] [increment-expression]) {
	statements
}
// for语句特殊形式
for (variable in object) {
	statements
}
  • 跳转语句
// 跳转语句能够从所在的分支、循环或从函数调用返回的语句跳出 : break 、 continue 、 return
// break语句 : 退出循环或者switch语句
break;
// continue语句 : 重新执行循环语句
continue;
// return语句 : 指定函数的返回值,只能够用在函数或者闭包重。
return [expression]
  • 异常处理语句
// 抛出(throw)异常,捕捉(catch)异常。 try、catch、finally
try {				// 执行语句
	CreateException();
}					
catch(ex) {			// 捕捉异常
	alert(ex.number + "/n" + ex.description);
}
finally {			// 最后必须执行的语句
	alert("end");
}
  • var语句和function语句
// var : 声明一个或多个变量,也可以在声明变量时进行初始化。默认状态下,初始值为underfined
// function : 定义函数
function [name]([param][,param][...,param]) {
	statements
}
  • with语句和空语句
// with语句能够为一组语句创建缺省的对象 (能够破坏变量的作用域链,一般不建议使用)
with (object) {
	statements
}

// 示例
<div id="box"></div>
    <script>
        document.getElementById("box").style.borderColor="red";
        document.getElementById("box").style.borderWidth="1px";
        document.getElementById("box").style.borderStyle="solid";
        document.getElementById("box").style.width="400px";
        document.getElementById("box").style.height="200px";
    </script>
// 使用with语句简化 :
<div id="box"></div>
    <script>
        with(document.getElementById("box").style){
            borderColor="red";
            borderWidth="1px";
            borderStyle="solid";
            width="400px";
            height="200px";
        }
    </script>

// 空语句就是只有一个独立的分号,作用是创建一个主体为空的条件或循环,如:
while(true) {
	;
}

3. 数据类型

js中数据存在两种存储方式,一种直接存储数据,称为值类型数据;另一种存储数据的空间地址来间接保存数据,称为引用型数据

  • 基本数据类型 : 数值、字符串、布尔型
  • 特殊类型 : null、undefined
  • 引用数据类型 : 数组、对象、函数

4. 函数

  • 定义函数
// 定义函数方法有两种:function语句声明函数;Function对象构造函数
//function定义函数方式一 : 命名函数(声明式函数)
function f() {
	// 函数体
}
// function定义函数方式二 : 匿名函数(引用式函数/函数表达式)
var f = function() {
	// 函数体
}
// Function对象构造函数(仅用于特定的动态环境中,一般不建议使用)
var function_name = new Function(arg1,arg2,...,argN,function_body)
  • 调用函数
function f() {
	return "Hello World! ";		// 设置函数返回值
}
document.write(f());			// 调用函数,并输出返回值
// 一个函数可以包含多个return函数,但是调用函数时只有第一个return语句被执行,且该语句后面的表达式的值被作为函数的返回值被返回,return语句后面的代码将被忽略掉
// 函数的返回值没有类型限制,可以返回任意类型的值
  • 函数参数
//参数:形参、实参。形参:定义函数时传递给函数的参数,形式上参数;实参:函数被调用时传递给函数的参数。
function add(a,b) {		//形参a和b
	return a+b;
}
alert(add(23,34));		//实参23,34
// arguments.length可以获取实参个数
  • 函数应用
// 在实际开发中函数常被当作表达式来处理,用户可以把函数视为一个值赋给变量,或者作为一个参数传递给另一个函数
  • 闭包函数
// 闭包函数就是外部函数被调用后,它的变量不会消失,仍然被内部函数所使用,而且所有的内容部函数都拥有对外部函数的访问权限。

5. 对象

对象(Object)是面向对象编程的核心概念,它是已经命名的数据集合,也是一种更复杂的数据结构。

  • 创建对象
// 在js中,对象是由new运算符生成,生成对象的函数被称为类(或称构造函数、对象类型),生成的对象被称为类的实例,简称为对象
var o = new Object();		// 构造原型函数
var date = new Date();		// 构造日期对象
var ptn = new RegExp("ab+c","i");	// 构造正则表达式对象
var xxx = {					// 定义对象直接量
	name : value,			// 属性、值
	name1 : value1,
	......
}
  • 访问对象
// 可以通过点号运算符(.)来访问对象的属性
// 也可以使用集合运算符([])来访问对象的属性,此时可以使用字符串下标来表示属性。

6. 数组

对象是无序的数据集合,而数组(Array)是一组有序数据集合,他们之间可以相互转换,但是数组拥有大量方法,适合完成一些复杂的运算。

  • 定义数组
// 定义数组通过构造函数Array()和运算符new来实现
// 1. 定义空数组
var a = new Array();
// 2. 定义带有参数的数组
var a = new Array(1,2,3,"4","5");
// 3. 定义指定长度的数组
var a = new Array(6);
var a = Array(6);
// 4. 定义数组直接量
var a = [1,2,3,"4","5"];
  • 存取元素
// 使用[]运算符可以存取数组元素的值,
var str = "";                           //声明临时变量
var a = [1,2,3,4,5];                    //定义数组
for(var i = 0 ; i < a.length; i++) {    //遍历数组,把数组元素串连成一个字符串
	str += a[i] + "-";
}
document.write(a + "<br />");           //读取数组的值
document.write(str);                    //显示串连的字符串

// 数组的大小不是固定的,可以动态增加或删除数组元素
// 通过改变数组的length属性来改变
// 使用push()和pop()方法来操作数组
var a = [];
a.push(1,2,3);		//得到a[1,2,3]
a.push(4,5);		//得到a[1,2,3,4,5]
a.pop();			//得到a[1,2,3,4]
// 使用unshift()和shift()方法
var a = [];
a.unshift(1,2,3);	//得到a[1,2,3]
a.unshift(4,5);		//得到a[4,5,1,2,3]
a.shift();			//得到a[5,1,2,3]
// 使用splice()方法 : 通用删除和插入元素的方法,可以在数组指定的位置开始删除或插入元素
// splice(插入的起始位置,要删除元素的个数,插入的具体元素)
var a = [1,2,3,4,5,6];
var b = a.splice(2,2);
document.write(a + "<br />");	//输出[1,2,5,6]
document.write(b);				//输出[3,4]

var a = [1,2,3,4,5,6];
var b = a.splice(2,2,7,8,9);
document.write(a + "<br />");	//输出[1,2,7,8,9,5,6]
document.write(b);				//输出[3,4]
  • 数组应用
// 利用数组对象包含的众多方法,可以对数组进行更加复杂的操作
// 数组与字符串转换:join()/split()
// 数组排序 : reverse()/sort()
// 连接数组 : concat()
// 截取子元素 : slice()
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值