[学习笔记]JavaScript基础

时间：2024-09-10 12:05:44

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. 变量定义

使用varkeyword进行变量定义。也能够不使用：


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>
效果
[学习笔记]JavaScript基础

打印倒三角



<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基础

JavaScript方法的定义

定义方法的keyword：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()" />

相关文章