[学习笔记]JavaScript基础

JavaScript概述

1. JavaScript定义

JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言。它是弱类型语言，只能由浏览器解释执行。

其中：

脚本语言：解释运行（由浏览器来解释执行），无需编译。

基于对象：有一些内置的对象共我们使用，但是不能完全实现继承，封装和多态，只能模拟。

事件驱动：必须由事件触发。

2. JavaScript的发展历程

在1995年时，由网景（Netscape）公司在Netscape浏览器上首次设计实现而成。因为网景公司与升阳（Sun）公司合作，网景公司管理层次结构希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了获取技术优势，微软（Microsoft）推出了JScript，CEnvi推出ScriptEase，与JavaScript类似同样可在浏览器上运行。为了统一规格，1997年，在ECMA（欧洲计算机制造商协会）的协调下，由网景、升阳、微软和Borland公司组成的工作组确定统一标准：ECMA-262。因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。目前规范：ECMA-262。

3. JavaScript的特点

  • 交互性（信息的动态交互）
  • 跨平台性（不允许直接访问本地硬盘）
  • 安全性（只要是可以解释Js的浏览器都可以执行，和平台无关）

JavaScript的语言组成

1. 核心语法（ECMA Core）

2. 浏览器对象模型（BOM，Browser Object Model）

3. 文档对象模型（DOM，Document Object Model）

JavaScript和HTML的结合方式

方法1：

直接写在事件中，当浏览器不能正确解释时，在前面加上“javascript:”，例如：javascript:alert(‘写在事件中‘)。


<input type="button" value="方法1" onclick="alert(‘写在事件中‘)" />

方法2：

使用script标签，在标签内写js代码。注意：script标签，必须有独立的结束标签。


<script  type="text/javascript" >

function _second(){

	alert("使用script标签，在标签内写js代码");

}

</script>

 

<input type="button" value="方法2" onclick="_second()" />

方法3：

引入外部js文件，<script>和</script>间不可以有JavaScript代码。


<script type="text/javascript" src="demo.js" ></script>

 

<input type="button" value="方法3" onclick="_third()" />

注意：

  • JavaScript每句最后的分号“;”非必须，但是建议加上。
  • JavaScript的变量，方法和运算符对大小写敏感。
  • JavaScript可以写在网页<html>标签内的任意地方，但是一般在<head>标签内。
  • 只有需要使用JavaScript打印输出，才将JavaScript写在<body>标签内。

JavaScript的基本语法

1. 注释


/*多行注释*/

//单行注释

2. 变量定义

使用var关键字进行变量定义，也可以不使用：


var a = 1;

a = "test";

a = 3.1415926;

a = false;

b = 3;

由于JavaScript是弱类型语言，所以数据类型由值确定。

3. 变量类型

五种基本数据类型：Undefined、Null、Boolean、Number 和 String，存储在栈区。

引用数据类型：存储在堆区。


var v1 = 10; //number

var v2 = 15.6; //number

var v3 = "abc"; //string

var v4 = false; //boolean

var v5; //undefined

var v6 = null; //基本数据类型是null，用typeof验证的时候是object
  • Undefined：typeof()测试为Undefined。
  • null：typeof()测试为Object。
  • var str = "abc";：基本数据类型字符串。

    var str = new String("abc");：引用数据类型字符串对象。

    基本数据类型字符串可以直接调用字符串对象的方法，因为JavaScript为弱类型语言。

4. 弱类型转换


var v1 = "1.5";

var v2 = 3;

var v3 = v2 + v1; //string

var v4 = v2 - v1; //number

var v5 = v2 * v1; //number

var v6 = v2 / v1; //number

5. 运算符

  • 加减乘除：，字符串+数字返回的是字符串，其余全是返回number。
  • 与或非：&&：左右两边都成立则为真；||：左右有一边为真即是真；！：取反。
  • 条件运算，两个等号比较的值的内容，三个等号比较的是值的内容和数据类型。

示例


var u = 10;

var t = "10";

alert(u==t); // true

alert(u===t); // false
  • 三元运算符：判断表达式 ? 表达式1 : 表达式2;
  • 在javaScript当中，‘‘、0、false、undefined、NaN、null是假，其余全是真。

示例


var v = NaN ? 10 : 20; // 20

6. 流程控制

6.1 条件


if (condition1) {

statement1;

} else if (condition2) {

statement2;

} else {

statement3;

}

其中，else if 和 else 不是必须的。

6.2 循环

方式一：

while (condition) {

statement;

}

方式二：

do {

statement;

} while (condition);

方式三：

for (初始化表达式; 循环条件表达式; 循环后操作表达式) {

statement;

}

  • while 循环是先判断，后执行；do-while 循环是先执行后判断。
  • for 循环先执行初始化表达式，然后判断循环条件表达式，如果满足则执行循环体，接着执行循环后操作表达式，然后循环判断循环条件表达式，直到不满足为止。也就是说初始化表达式只在一开始执行一次，接下来就是条件表达式->循环体->操作表达式的循环执行。

6.3 多重选择


switch (choice) {

case 1:

statement1;

break;

case 2:

statement2;

break;

default:

// bad input

statement3;

break;

}
  • case 标签可以是任意数据类型 var。
  • switch 语句从与选项值（choice）相匹配的 case 标签处开始执行，直到遇到 break 语句，或者执行到 switch 语句的结束为止。如果没有相匹配的 case 标签，而有 default 子句，就执行这个子句。

6.4 案例

动态打印表格


<html>

 

<head>

    <title>动态打印表格</title>

</head>

 

<body>

    <script type="text/javascript">

    //document 是DOM中的内置对象,有一个输出方法write()

    document.write("<table border=‘1‘ width=‘600px‘ height=‘300px‘>");

    for (var i = 0; i < 5; i++) {

        document.write("<tr>");

        for (var j = 0; j < 5; j++) {

            document.write("<td align=‘center‘>第" + (i + 1) + "行，第" + (j + 1) + "列</td>");

        }

        document.write("</tr>");

    }

    document.write("</table>");

    </script>

</body>

 

</html>

效果

打印倒三角


<script type="text/javascript">

var icon = "\u263a";

for (var i = 0; i < 6; i++) {

    for (var j = 0; j < i; j++) {

        document.write("  ");

    };

    for (var j = 0; j < (6 - i); j++) {

        document.write(icon+"  ");

    };

    document.write("<br />");

};

</script>

效果

JavaScript方法的定义

定义方法的关键字：function。

方法1：

function 方法名(参数){

方法体

（有可能有返回值，有可能没有返回值）

}

示例


//没有参数没有返回值

function _myfunction() {

    alert("hello world");

}

//调用方式 

_myfunction();

 

//没有参数，有返回值

function _myfunction() {

    return "hello world";

}

//调用方式

alert(_myfunction());

 

//有参数，没有返回值

function _myfunction(str) {

    alert(str);

}

//调用方式

_myfunction("hello World");

 

//有参数和返回值

function _myfunction(str) {

    return ("hello javascript " + str);

}

//调用方式

alert(_myfunction("test"));

方法2：

var 方法名 = function(参数){

方法体

（可能有返回值，也可能没有）

}

示例


var _myfunc = function() {

    alert("hello second defined function ");

}




//调用方式

_myfunc();

alert(_myfunc); // 把等号后面的内容当成变量的值输出

alert(_myfunc()); // 先运行方法体，然后输出undefined

方法3（不常用）：

var 方法名 = new Function(参数1, 参数2, 参数n, 方法体内容);

示例


var _mytest = new Function("a", "b", "return a+b;");




//调用方式

alert(_mytest(1, 2));

JavaScript全局方法

1. isNaN

当不是数字时返回true，是数字时返回false。


var a = "test";

alert(isNaN(a)); // true

2. parseInt，parseFloat

对字符串进行解析。parseInt解析成整数，如果是整数则正常解析，如果是浮点数则返回整数部分，如果不是数字返回NaN。parseFloat解析成浮点数，如果是浮点数则正常解析，如果不是一个数字则返回NaN。

示例


var s = "1";

alert(parseInt(s)+1); // 2

var t = "s";

alert(parseInt(t)); // NaN

var u = 3.1415926;

alert(parseInt(u)); // 3

 

var a = "3.1415926";

alert(parseFloat(a)); // 3.1415926

var b = "test";

alert(parseFloat(b)); // NaN

3. eval

将eval的参数当成js代码来执行。


eval("alert(1+2)"); // 3

4. escape和unescape

对字符串进行编码和解码，这样就可以在所有的计算机上读取该字符串而不受平台影响。


var v1 = "      test";

var v2 = "你好";

alert(escape(v1)); // "%20%20%20%20%20%20test"

alert(escape(v2)); // "%u4F60%u597D"

 

var v3 = "%20%20%20%20%20%20test";

var v4 = "%u4F60%u597D";

alert(unescape(v3)); // "      test"

alert(unescape(v4)); // "你好"

5. encodeURI和decodeURI

把字符串作为 URI 进行编码和解码。


var uri = "      test你好";

document.write(encodeURI(uri)); // "%20%20%20%20%20%20test%E4%BD%A0%E5%A5%BD"

var _uri = "%20%20%20%20%20%20test%E4%BD%A0%E5%A5%BD";

document.write(decodeURI(_uri)); // "      test你好"

JavaScript常用对象

1. Array

  • 数组定义可以不指定数组长度，数组中的数据类型可以任意并混合。
  • 初始化数组的方法比较自由。
  • 方法较多，具体查阅文档。

var arr = new Array(); // 创建数组

arr[0] = "a";

arr[1] = 3;

arr[15] = 5;

alert(arr[14]); // undefined

 

var arr1 = new Array(5); // 初始化一个数组，长度为5

var arr2 = new Array(1, 2, 3, 4); // 初始化一个数组长度为4，并初始化了元素

var arr3 = [5]; // 初始化一个数组长度为1，并初始化了元素

常用方法

  • 按指定分隔符转化为字符串

    join()

  • 向数组末尾添加和删除元素

    push()

    pop()

  • 对数组进行字典排序

    sort()

2. String

  • 可以对基本数据类型String类型变量使用String对象方法。

常用方法（多数与Java类似）

  • 字符串截取

    subString(a, b)：从a截取到b，含头不含尾。

    subStr(a, b)：从a开始截取b个字符。

  • 方法较多，具体查阅文档。

示例


var s = "hello-world";

var s1 = s.substring(2,5);

document.write(s1+"<br />"); // "llo"

var s2 = s.substr(2,5);

document.write(s2+"<br />"); // "llo-w"

3. Date

与Java类似。方法较多，具体查阅文档。


var mydate = new Date();

alert(mydate.getDate()); // 日：15

alert(mydate.getMonth()); // 月1：0

alert(mydate.getDay()); // 星期四：4

4. Math

与Java类似。方法较多，具体查阅文档。


var t = Math.random(); // 返回的是0-1之间的随机数

var f = Math.floor(-5.9999); // 下舍入：-6

var s = Math.round(-3.5); // 四舍五入：-3

5. RegExp

5.1 正则表达式对象的建立

  • 使用new创建对象：var _reg = new RegExp("正则表达式");
  • 直接使用正则表达式创建对象：var _reg = /^正则表达式/，注意：不可以有双引号。

5.2 正则表达式的使用

test()方法用于匹配正则表达式。方法较多，具体查阅文档。


<script type="text/javascript">

function _check() {

    var _reg = /^[0-9]{11}/;

    var _tel = document.getElementsByName("tel")[0].value;

    if (_reg.test(_tel)) {

        alert("是一个电话号码");

    } else {

        alert("不是一个电话号码");

    }

}

</script>

电话号码：

<input type="text" name="tel" />

<br/>

<input type="button" value="检查是否是电话号码" onclick="_check()" />
时间： 2024-10-13 22:17:28

[学习笔记]JavaScript基础的相关文章

[JavaScript] 学习笔记-JavaScript基础教程

1.JavaScript介绍 1)JavaScript是互联网上最流行的脚本语言,这门语言可用于Web和HTML,更可广泛用于服务器.pc端.移动端.JavaScript是一种轻量级的编程语言,插入HTML后,可由所有的浏览器执行 2)HTML中的脚本必须位于<script></script>标签之间:脚本可被放置于HTML页面的<head>和<body>部分中(通常把脚本放在<head>标签中,以不干扰页面的内容) 3)在HTML中,不限制脚本

学习笔记.JavaScript基础（一）

JavaScript是一种可以用来给网页增加交互性质的编程语言. <!DOCTYPE html> <html> <head>     <title>Barely a script at all</title>     <script>         window.onload = function(){             document.getElementById("myMessage").innerH

jQuery学习笔记——jQuery基础核心

代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $(‘#box’);//进行执行的ID元素选择 $(‘#box’).css(‘color’, ‘red’);//执行功能函数由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:jQ

大话设计模式学习笔记——面向对象基础

前言 好记性不如烂"笔头"系列--大话设计模式学习笔记 目录 面向对象基础 面向对象基础 什么是类与实例 一切事物皆为对象,即所有的东西老师对象,对象就是可以看到.感觉到.听到.触摸到.尝到.或闻到的东西.准确地说,对象是一个自包含的实体,用一组可识别的特性和行为来标识.面向对象编程,英文叫 Object-Oriented Programming,其实就是针对对象来进行编程的意思.类就是具有相同属性和功能的对象的抽象集合.实例就是一个真实的对象.比如我们属于'人'类,而个人就是'人'类

Java快速教程--vamei 学习笔记（基础篇）

链接:http://www.cnblogs.com/vamei/archive/2013/03/31/2991531.html java快速教程第1课 从HelloWorld到面向对象 学习网址:http://www.cnblogs.com/vamei/archive/2013/03/14/2958654.html java快速教程第2课 方法与数据成员 学习网址:http://www.cnblogs.com/vamei/archive/2013/03/25/2964430.html java快

学习之Javascript基础

1)HTML只是描述网页长相的标记语言,JavaScript是一种在浏览器端执行的语言,简称为JS,JavaScript是解释性语言,无需编译就可以随时运行,没有语法错误的部分还是能正确运行. 2)VS2010中有Javascript.JQuery的自动完成功能 3)JS点儿不出来的成员也许可用,点儿处理的成员也许不可用 4)VS2008的HTML编辑器中触发JavaScript自动完成:Ctrl+J 5)JS标签: <script type="text/javascript"&

C#学习笔记（基础知识回顾）之值类型与引用类型转换（装箱和拆箱）

一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字节的值,该如何在它上面调用方法? 二:值类型转换为引用类型--装箱 2.1CLR对值类型进行装箱时:新分配托管堆内存,将值类型的实例字段拷贝到新分配的内存中,返回托管堆中新分配对象的地址.这个地址就是一个指向对象的引用. int i = 10; Object obj = i; 三:将引用类型转换为值

[Golong]学习笔记(一) 基础知识

Go编程基础 Go的内置关键字(25个) 不多 break default func interface select case defer go map struct chan else goto package switch const fallthrough if range type continute for import return var Go的注释方法(和js一样) 单行注释: // 多行注释: /**/ Go程序一般结构 common_structure.go 通过 pack

学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcElement(触发事件的事件源对象)和attachEvent("onclick",function(){...}); 2. a. 实现拖放(Drag and Drop): 目前支支持IE, 若定制某对象为可拖放对象, 则必须覆盖目标对象的dragenter和dragover事件, 可以用e