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>

效果

打印倒三角


<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方法的定义

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

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

[JavaScript] 学习笔记-JavaScript基础教程
1.JavaScript介绍 1)JavaScript是互联网上最流行的脚本语言,这门语言可用于Web和HTML,更可广泛用于服务器.pc端.移动端.JavaScript是一种轻量级的编程语言,插入H ...
MyBatis:学习笔记(1)——基础知识
MyBatis:学习笔记(1)--基础知识引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...
bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
Django学习笔记（基础篇）
Django学习笔记(基础篇):http://www.cnblogs.com/wupeiqi/articles/5237704.html
C#学习笔记（基础知识回顾）之值类型与引用类型转换（装箱和拆箱）
一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字 ...
C#学习笔记（基础知识回顾）之值传递和引用传递
一:要了解值传递和引用传递,先要知道这两种类型含义,可以参考上一篇 C#学习笔记(基础知识回顾)之值类型和引用类型二:给方法传递参数分为值传递和引用传递. 2.1在变量通过引用传递给方法时,被调用的 ...
C#学习笔记（基础知识回顾）之值类型和引用类型
一:C#把数据类型分为值类型和引用类型 1.1:从概念上来看,其区别是值类型直接存储值,而引用类型存储对值的引用. 1.2:这两种类型在内存的不同地方,值类型存储在堆栈中,而引用类型存储在托管对上.存 ...
学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event.IE浏览器下的拖拽效果 1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...
MAVEN学习笔记之基础（1）
MAVEN学习笔记之基础(1) 0.0 maven文件结构 pom.xml src main java package resource test java package resource targ ...

随机推荐

ES6 学习笔记 - 变量的解构赋值
变量的解构赋值学习资料:ECMAScript 6 入门数组的解构赋值基本用法可以从数组中提取值,按照对应位置,对变量赋值.这种写法属于"模式匹配". let [a, b, ...
iOS中ARC和非ARC混用
如果在使用第三方类库的时候,我们可能会遇到一些内存管理的问题那么如何在一个工程中实现ARC和非ARC混用呢,例如你创建一个ARC的工程,但是你引用的第三方类库是非ARC管理内存的首先点击工 ...
mongo 3.4分片集群系列之五：详解平衡器
这个系列大致想跟大家分享以下篇章: 1.mongo 3.4分片集群系列之一:浅谈分片集群 2.mongo 3.4分片集群系列之二:搭建分片集群--哈希分片 3.mongo 3.4分片集群系列之三:搭建 ...
IntelliJ IDEA 2017安装和破解方法
一,安装这里是windows下的安装,另外还有mac和linux下的版本,可自行解决下载并安装IDEA官网:https://www.jetbrains.com/idea/ 或者百度网盘2017版本 ...
jmeter普通的接口测试
摘自:后知者.https://www.cnblogs.com/houzhizhe/p/6838731.html jmeter可以做接口测试,其中接口测试的简单操作包括做http脚本(发get/post ...
Xmind的使用
Xmind是用来学习整理思维的工具
Linux下查看Tomcat运行日志
查看方式 1.先切换到:cd usr/local/tomcat5/logs2.tail -f catalina.out3.Ctrl+c 是退出tail命令/alt+E+R重置部署常用指令 1.ps ...
SQLAlchemy-Utils
由于sqlalchemy中没有提供choice方法,所以借助SQLAlchemy-Utils组件提供的choice方法. 安装: pip3 install sqlalchemy_utils 示例: f ...
PKI相关知识简述
1. 公钥泄露导致中间人攻击有A.B.C三个人,如果C把自己的公钥提供给了AB双方,C伪装成B,让A认为C就B,这样A就把自己的公钥发送给C,C再伪装成A,让B认为C就A,B就把自己的公钥也发送给了 ...
Tornado进阶
三.Tornado进阶 3.1 Application settings debug,设置tornado是否工作在调试模式,默认为False即工作在生产模式.当设置debug=True 后,torna ...

[学习笔记]JavaScript基础

JavaScript概述

1. JavaScript定义

2. JavaScript的发展历程

3. JavaScript的特点

JavaScript的语言组成

JavaScript和HTML的结合方式

方法1：

方法2：

方法3：

注意：

JavaScript的基本的语法

1. 凝视

2. 变量定义

3. 变量类型

4. 弱类型转换

5. 运算符

6. 流程控制

6.1 条件

6.2 循环

6.3 多重选择

6.4 案例

动态打印表格

打印倒三角

JavaScript方法的定义

方法1：

方法2：

方法3（不经常使用）：

JavaScript全局方法

1. isNaN

2. parseInt，parseFloat

3. eval

4. escape和unescape

5. encodeURI和decodeURI

JavaScript经常使用对象

1. Array

2. String

3. Date

4. Math

5. RegExp

5.1 正則表達式对象的建立

5.2 正則表達式的使用

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

随机推荐

热门专题