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 ...

随机推荐

2017-12-04HTML table布局
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
WordPress主题reBorn最新破解版发布
今天上班的时候,没事浏览网页! 突然之间发现了这么一个标题,顿时让我产生了兴趣. 标题:WordPress主题reBorn最新破解版发布不知道什么原因,现在原网址打不开了,可能是作者怕骚扰吧. 其实 ...
plc学习笔记
防抖编程代码备份如果定时到了还未检测到下降沿,则认为信号有效.这一端程序主要是针对现场装料杯在输送过程中由于传送带原因,电眼时常产生无效停机信号,需要过滤,因此需要在电眼检测中添加防抖功能 2018 ...
两年，VMware又重回巅峰？
两年前,被公有云和容器打的焦头烂额的VMware一度被众多业界人士看衰,营收.股价双双下滑.然而,仅仅经过短短两年时间,VMware已经和AWS,IBM.微软.Rackspace等众多公有云厂商成为合 ...
VC++函数只被调用一次
如何保证某个函数只被调用一次一个函数caller会在其内部调用另外一个函数callee,现在的情况是,caller可能会在多个地方被多次调用,而你希望callee只在第一次被调用时被调用一次.一 ...
dubbo之日志适配及访问日志
日志适配自 2.2.1 开始,dubbo 开始内置 log4j.slf4j.jcl.jdk 这些日志框架的适配 1,也可以通过以下方式显示配置日志输出策略: 命令行 java -Ddubbo.app ...
MySql（四）Select条件查询
select条件查询的格式如下: SELECT 查询列表FROM 表名WHERE 筛选条件:123456根据筛选条件可以分为以下几类: 按照条件按表达式进行筛选常用条件运算符如下:> .< ...
并发编程学习笔记(8)----ThreadLocal的使用及源码分析
1. ThreadLocal的理解 ThreadLocal,顾名思义,就是线程的本地变量,ThreadLocal会为每个线程创建一个本地变量副本,使得使用ThreadLocal管理的变量在多线程的环境 ...
java几种连接数据库的方法
package bean; import java.sql.Connection;import java.sql.DriverManager; public class jdbcTest { //不同 ...
2019西安多校联训 Day2
试题链接:http://www.accoders.com/contest.php?cid=1894 考试密码请私信; T1 残忍WA 0,明明就是一道非常菜的字符串QAQ 思路:一共找四种东西,A ...

[学习笔记]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基础的更多相关文章

随机推荐

热门专题