JavaScript学习记录(一)

本文旨在介绍JavaScript的基本概念,包括DHTML的三个组成部分、ECMAScript基础、数据类型、函数、对象、数组以及一些系统函数。同时,文章还讨论了JavaScript的面向对象特性,如继承、实例方法和类变量,并提供了数组操作的示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

下决心要学习JavaScript了,用博客来记录一下。会不断更新的。(参考资料:《精通JavaScript+JQuery》曾顺编著,《精通JavaScript动态网页编程》王俊杰编著)


简介:

先说一下我理解的JavaScript是干嘛用的,我们在写网页的时候,最开始用的是HTML,从HTML入手简单易懂,但是缺陷是HTML只是静态网页,要把其变成动态网页,就要用到JavaScript,这中间要用到JavaScript解释器,具体作用情况如下图:

其中DHTML(Dynamic HTML)包含如下3个含义:

  1. 通过HTML把网页标记为各个元素;
  2. 利用CSS设计元素之间的排版样式,并控制各个标记的位置;
  3. 使用JavaScript来控制各个标记。

JavaScript的组成部分如下图:

ECMAScript是一个重要标准,DOM是W3C制定的规范,BOM是浏览器对象模型。


基础:

ECMAScript的基础概念如下:

  1. 区分大小写;
  2. 弱类型变量。定义变量只使用“var”关键字(所有类型,并可灵活变换);
  3. 每行分号可有可无(但还是都写着吧,规范);
  4. 括号用于代码块。代码块表示一系列按顺序执行的代码,这些代码封装在“{”和“}”中;
  5. 注释的方式与C语言和Java相同。

这里再重申一下变量名称的规则:

  1. 首字符必须是字母(大小写均可),下划线(_)或者美元符号($);
  2. 余下的字母可以是下划线,美元符号,任意字母或者数字字符;
  3. 变量名不能是关键字或者保留字。

为了代码清晰易懂,利用命名规则进行前缀标记,下图为匈牙利标记法

JavaScript一共有9种数据类型,分别是未定义(Undefined),空(Null),布尔型(Boolean),字符串(String),数值(Number),对象(Object),引用(Reference),列表(List)和完成(Completion)。其中后三种类型仅仅作为JavaScript运行时中间结果的数据类型,不能在代码中使用。

其中选几个要点来说一下:

数值型:

  1. 十进制数.(十进制数)(指数),例126.5;
  2. 十六进制数,以数字0开始,后面紧跟字母x(不区分大小写),其后是十六进制数,例0x23456ABC;
  3. 八进制数,以数字0开头,后面紧跟一个八进制数,例021376
  4. 特殊值 Infinity。当一个数值表达式的值超出了可表示的最大(最小)值得范围,将被赋值为(-)Infinity,所有(-)Infinity值都相等,且运算结果仍为Infinity,
  5. 特殊值 NaN,含义是 “not a number”。当一个undefined表达式结果为数值型数据时,该数值型数据就是NaN值。

无定义数据类型(undefined):用来表示不存在的值或尚未赋值的变量。

空值(null):是一个表示“什么都没有”的占位符。


函数:

定义函数 function:

function 函数名([参数列表]){
	statements(程序语句)
	......
	[return 值;]
}
注意:

  1. 函数名必须唯一,且区分大小写;
  2. 参数可以是常量,变量或表达式;
  3. 参数列表中有多个参数时,参数间以逗号“,”隔开;
  4. 若函数需要返回值,使用return语句;
  5. 定义函数并不会执行组成函数的语句,只有当调用函数时,函数才会执行;
  6. 如果函数中省略了return语句后面的表达式,或者函数结束时根本没有return语句,函数就会返回一个undefinded的值。

arguments 数组对象,包含了调用程序传递给函数的所有函数。如果要实现的参数个数允许不确定,或者函数的参数个数很多,又不想为每个参数都定义一个变量,在定义这样的函数时,可以保留函数的参数列表为空,在函数内部使用arguments对象来访问调用程序传递的所有参数。例子如下:

<Script language="javascript">
<!--
    function testparams()
    {
        var params="";
        for(var i=0;i<arguments.length;i++)
        params=params+""+arguments[i];
        alert(params);
    }
    //函数调用与结果输出
    testparams("abc",123);
    testparams(123,456,"abc");
//-->
</script>

动态函数:

定义指针变量来指向某个函数,以后就用这个指针变量来调用其指向的函数,语法格式:

var  变量名= new  Function(参数列表);例子如下:

<Script language="javascript">
<!--
//等号的右边是一个动态创建的函数,注意其变量、语句及返回值的写法
var square=new Function("x","y","var sum;sum=x*x+y*y;return sum;"); 
alert(square(3,2));    //调用该动态函数并显示其结果
//-->
</script>
注意:这里的x,y一定要用双引号或单引号引起来,动态函数的执行代码作为 new Function(...)最后的参数内容出现。


JavaScript的系统函数:

URL编码处理函数

  1. encodeURI 方法:返回一个对URI字符串编码后的结果。
  2. decodeURI 方法:与encodeURI相反,decodeURI方法将一已编码的URI字符串解码成最原始的字符串并返回。

数值处理函数

  1. parseInt 方法:将一个字符串指定的进制转换成一个整数,语法格式:parseInt(numString,[radix])。
  2. parseFloat 方法:将一个字符串转换成对应的小数。
  3. isNaN 方法:用于检测 parseInt 和 parseFloat 方法的返回值是否为NaN。

字符串编码处理函数

  1. escape 方法:返回对一个字符串编码后的结果字符串。所有空格,标点,重音符号以及任何其他非ASCLL码字符都用%xx编码替换(xx等于十六进制Unicode编码)。
  2. unescape 方法:将一个用escape方法编码的结果字符串编码成原始字符串并返回。
  3. eval 方法:将某个参数字符串作为一个JavaScript表达式执行。


对象:

对象是一种非常重要的数据类型,是自我包含的数据集合。对象包含属性(property)和方法(method)。

对象使用运算符 new 来创建,在 new 之后必须有用于初始化对象的构造函数名。

两种创建对象的方法:

1.用构造函数创建对象
function Student(name,age,grade)
{
	this.name=name;
	this.age=age;
	this.grade=grade;
}
2.直接创建对象
<script language="javascript">
<!--
    var book = new Object();//创建一个对象,并保存在一个变量中
    book.title = "Book1";//设置该对象的一个属性
    //设置更多的属性,注意其层次关系
    book.chapter1 = new Object();
    book.chapter1.title ="第一章";
    book.chapter1.pages = 25;
    book.chapter2 = {title:"第二章",pages:30};
    //调用该对象的某些属性
    alert("输出结果:"+"\n\t\n\t"+book.title+"\n\t"+"Chapter 1: "
                      +book.chapter1.title+"\n\t"+"chapter 2: "+ book.chapter2.title);
//-->
</script>
可以使用 delete 语句来删除一个对象的属性,如:delete book.chapter2; 删除该对象。

方法是通过对象调用的JavaScript函数。可以将函数赋给任何变量,甚至赋给一个对象的任何属性。在方法的主体内部,关键字this的值会变成调用该方法的对象。


JavaScript面向对象,因此也可继承,也有实例方法,类变量,类方法这些概念。

一个对象可以创建多个对象实例,在使用时,各个对象实例之间没有任何关系,为一个对象实例新增加的属性和方法,不会增加到同一个对象所产生的其他对象实例上,修改一个对象 的实例的属性值,也不会影响其他对象实例的同名属性。this 关键字一般只在用作对象成员方法的函数中出现,代表某个成员方法执行时,引用该方法的当前对象实例。在对象的构造函数中使用 “this.成员名”的形式,可以为该对象的每个对象实例都增加新成员。


数组:

用构造函数Array()和运算符new来创建,三种调用方法:

var a=new Array();
var a=new Array(5,4,3,2,1,"test,test");
var a=new Array(10);

数组都有length属性。Array对象的常用方法:

  1. join 方法:将一个数组的所有元素转换成字符串,并把这些字符串连接起来。
  2. reverse 方法:在已有的数组中对数组元素进行重排,用来颠倒数组元素的顺序。
  3. sort 方法:用来对数组元素进行排序。
  4. Alice 方法:返回的是指定数组的一个子数组。带有两个参数,分别表示要返回的子数组的起止点(负数表示从最后一个元素倒数)。
  5. splice 方法:可以把元素从数组中删除,也可以向数组中插入新元素。

作为关联数组的对象,区别 “.” 和 “[]”:

  • 当采用 “.” 运算符存取对象属性时,属性名是用标识符表示的,而标识符必须被逐字输入。标识符不是一种数据类型,程序不能对其进行操作;
  • 当用 “[]” 存取对象属性时,属性名是用字符串表示的,而字符串是JavaScript的一种数据类型,可以在程序运行过程中常见并进行操作。


JavaScript内部对象:

Object对象,String对象,Date对象,Math对象,number对象。。。


专门用于对象的语句

with语句:

语法格式:with(对象名称){ 程序语句块 }

<script language="javascript">
<!--
    var curr_time = new Date();
    with(curr_time)
    {
        //定义变量,并为其赋值为当前年份,后加中文“年”字标识
        var strDate = getYear()+1900+"年";  
        //取当前月份。注意月份从0开始,所以需加1,后加中文“月”字标识
        strDate +=getMonth()+1+"月";
        strDate +=getDate()+"日"; //取当前日期,后加中文“日”字标识
        strDate +=getHours()+":"; //取当前小时
        strDate +=getMinutes()+":"; //取当前分钟
        strDate +=getSeconds(); //取当前秒数
        alert(strDate);  //结果输出
    }
//-->
</script>
for...in 语句:

语法结构:for (变量in对象){ 程序语句 }

<script language="javascript">
<!--
    function Student()
    {
        this.name = "张华";
        this.age = "19";
        this.height = "172";
    }
    var attr = new Student();
    var prop,stru ="";
    for(prop in attr)
    {
        stru += prop+" ";
    }
    alert(stru);
//-->
</script>
加以改造,使用 “对象实例名[属性名]” 的形式取出每个属性值:

<script language="javascript">
<!--
    function Student()
    {
        this.name = "张华";
        this.age = "19";
        this.height = "172";
    }
    var attr = new Student();
    var prop,stru ="";
    for(prop in attr)
    {
        stru += attr[prop]+" ";
    }
    alert(stru);
//-->
</script>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值