JavaScript基础细讲

JavaScript基础细讲

JavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java的程序概念，将自己原有的Livescript 重新进行设计，并改名为JavaScript。

　　　JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。

JavaScript优点　　

1.简单性 　

JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

2.动态性　

JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

3.跨平台性 　

JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。

4.节省CGI的交互时间　

随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流，确浏览的身份、需服务的内等等，这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然，通过网络与用户的交互过程一方面增大了网络的通信量，另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时，需要一个进程为它服务，它要占用服务器的资源(如CPU服务、内存耗费等)，如果用户填表出现错误，交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多，服务器的性能影响就越大。

　　　JavaScript是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用CGI的部分，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。

编写JavaScript

1、JavaScript代码存在形式

<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>

<!-- 方式二 -->
<script type"text/javascript">
    Js代码内容
</script>

2、JavaScript代码存放位置

  • HTML的head中
  • HTML的body代码块底部(推荐)

由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>
    alert(‘123‘);
</script>

每个语言刚开始都是Hello World那咱们也来写一个吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        document.write("Hello World!!");
        document.write("My name is 张岩林");
    </script>
</body>
</html> 

效果如下：

注意：每一行代码写完要写一个分号来分割开，谨记

JavaScript变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

<script type="text/javascript">

    // 全局变量
    name = ‘seven‘;

    // 定义函数
    function func(){
        // 局部变量
        var age = 18;

        // 全局变量
        gender = "男"
    }
</script>

注：在JS中也有注释，//表示单行注释，/* ...注释内容...  */表示多行注释，此注释仅在Script块中生效

数据类型

JavaScript 中的数据类型分为原始类型和对象类型：

  • 原始类型

    • 数字
    • 字符串
    • 布尔值
  • 对象类型
    • 数组
    • “字典”
    • ...

特别的，数字、布尔值、null、undefined、字符串是不可变。

null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。

undefined是一个特殊值，表示变量未定义。

1、number数字类型

avaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

转换：

  • parseInt(..)    将某值转换成数字，不成功则NaN
  • parseFloat(..) 将某值转换成浮点数，不成功则NaN

特殊值：

  • NaN，非数字。可使用 isNaN(num) 来判断。
  • Infinity，无穷大。可使用 isFinite(num) 来判断。

1

2

3

4

5

6

7

8

9

10

11

12

Number                                    对数字的支持

Number.MAX_VALUE                      最大数值

Number.MIN_VALUE                      最小数值

Number.NaN                            特殊的非数字值

Number.NEGATIVE_INFINITY              负无穷大

Number.POSITIVE_INFINITY              正无穷大

Number.toExponential( )                   用指数计数法格式化数字

Number.toFixed( )                     采用定点计数法格式化数字

Number.toLocaleString( )              把数字转换成本地格式的字符串

Number.toPrecision( )                     格式化数字的有效位

Number.toString( )                    将—个数字转换成字符串

Number.valueOf( )                     返回原始数值    

　


1

2

3

4

5

6

7

8

9

<script>

    var a = 123;

    var b = ‘123‘;

    var c = parseInt(b);

    console.log(c);

    var d = parseFloat(b);

    console.log(d);

    var e = "a234";

</script>

2、string字符串

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

String                        对字符串的支持

String.charAt( )          返回字符串中的第n个字符

String.charCodeAt( )          返回字符串中的第n个字符的代码

String.concat( )          连接字符串

String.fromCharCode( )        从字符编码创建—个字符串

String.indexOf( )         检索字符串

String.lastIndexOf( )         从后向前检索一个字符串

String.length                 字符串的长度

String.localeCompare( )       用本地特定的顺序来比较两个字符串

String.match( )               找到一个或多个正则表达式的匹配

String.replace( )         替换一个与正则表达式匹配的子串

String.search( )          检索与正则表达式相匹配的子串

String.slice( )               抽取一个子串

String.split( )               将字符串分割成字符串数组

String.substr( )          抽取一个子串

String.substring( )       返回字符串的一个子串

String.toLocaleLowerCase( )   把字符串转换小写

String.toLocaleUpperCase( )   将字符串转换成大写

String.toLowerCase( )         将字符串转换成小写

String.toString( )        返回字符串

String.toUpperCase( )         将字符串转换成大写

String.valueOf( )         返回字符串

String.replace(regexp, replacement)    替换，正则中有g则替换所有，否则只替换第一个匹配项，

　　　　　　　　　　　　　　　　　　　　　　　　$数字：匹配的第n个组内容；

                        　　　　　　　　　　$&：当前匹配的内容；

                        　　　　　　　　　　$`：位于匹配子串左侧的文本；

                       　　　　　　　　　　 $‘：位于匹配子串右侧的文本

                    　　　　　　　　　　    $$：直接量$符号

　　

                       

挨个练习一下吧

    <script>
        var a = "zhangyanlin";
        document.write(a.charAt(5));
        // 返回y

        document.write(a.concat("haoshuai"));
        // 返回zhangyanlinhaoshuai

        document.write(a.indexOf("yan"));
        // 返回5

        document.write(a.length);
        // 返回11

        var b = "zhang7yan8lin";
        document.write(b.split("7"));
        //返回 ["zhang", "yan8lin"]

        document.write(b.split(/\d/));
        // 返回["zhang", "yan", "lin"]

        document.write(b.slice(1,d1_text.length));
        // 返回 hang7yan8lin
    </script>

下面再写一个很有意思的案例，让字体滚动起来吧：

 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = num1 style="font-size: 50px;text-align: center;color: white;padding-left: 40px;padding-right: 40px">欢迎各位领导莅临检查,中华人民共和国万岁，我爱天安门，当初我们手拉着手！</div>
<script type="text/javascript">
    setInterval(function () {
        d1 = document.getElementById(‘num1‘);
        d1_text = d1.innerText;

        //字符串索引
        first_char = d1_text[0];

        //字符串切片
        sub_char = d1_text.slice(1,d1_text.length);

        //字符串拼接
        new_str = sub_char + first_char;

        d1.innerText = new_str;
    },500);

</script>
</body>
</html>

3、Boolean布尔类型

布尔类型仅包含真假，与Python不同的是其首字母小写。

  • ==      比较值相等
  • !=       不等于
  • ===   比较值和类型相等
  • !===  不等于
  • ||        或
  • &&      且

4、Array数组

JavaScript中的数组和Python中的列表非常相似

数组提供的方法有

Array                    对数组的内部支持
Array.concat( )          连接数组
Array.join( )            将数组元素连接起来以构建一个字符串
Array.length             数组的大小
Array.pop( )             删除并返回数组的最后一个元素
Array.push( )            给数组添加元素
Array.reverse( )         颠倒数组中元素的顺序
Array.shift( )           将元素移出数组
Array.slice( )           返回数组的一部分
Array.sort( )            对数组元素进行排序
Array.splice( )          插入、删除或替换数组的元素

　　Array.splice(n,0,val)    指定位置插入元素

    Array.splice(n,1,val)   指定位置替换元素

    Array.splice(n,1)      指定位置删除元素

Array.toLocaleString( )  把数组转换成局部字符串
Array.toString( )        将数组转换成一个字符串
Array.unshift( )         在数组头部插入一个元素

    <script>
        var a = ["zhang","yan","lin","aylin"];
        var b = [1,2,3,4];
        document.write(a.concat(b));
        // 输出结果["zhang","yan","lin","aylin",1,2,3,4]

        document.write(a.join("_"));
        // 输出结果zhang_yan_lin_aylin

        document.write(a.length);
        // 输出结果4

        var c = a.pop();
        document.write(c);
        // 输出aylin

        a.splice(1,0,"索");
        document.write(a);
        // 输出 ["zhang","索","yan","lin","aylin"]
    </script>

更多请参考http://www.shouce.ren/api/javascript/l_Object.html

条件判断

1、条件语句

JavaScript中支持两个中条件语句，分别是：if 和 switch

 if判断

var a = 0 ;
if (a == 0){
     document.write("您的值是正确的")
}else if(a < 0 ) {
     document.write("您的值小于0")
}else {
     document.write("您的值是错的")
}

 switch语句

switch(name){
    case ‘1‘:
        age = 18;
            break;
    case ‘2‘:
            age = 456;
            break;
    default :
            age = 777;
    }

2、循环语句

JavaScript中支持三种循环语句，分别是：

 方式一

var names = ["zhang", "yan", "lin"];

for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}

 方式二

var names = ["zhang", "yan", "lin"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}

 方式三

i  = 0;
while (i<10){
      if (i == 7){
           continue
       }else {
       document.write(i);
        i++
      }
}

3、异常处理

try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

注：主动跑出异常 throw Error(‘xxxx‘)

函数

1、基本函数

JavaScript中函数基本上可以分为一下三类：

        // 普通函数
        function func() {
            return "zhangyanlin"
        }
        // 匿名函数
        var func = function(arg){
            return "zhangyanlin";
        };
        // 自执行函数
        (function(arg){
            console.log(arg);
        })(‘123‘)

注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。

实例：

<button onclick="myFunction(‘张岩林‘,‘CEO‘)">点击这里</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

2、作用域

JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。当内层函数使用变量时，会根据作用域链从内到外一层层的循环，如果不存在，则异常。

切记：所有的作用域在创建函数且未执行时候就已经存在。

更多请参考http://www.cnblogs.com/wupeiqi/p/5649402.html

3、闭包

「闭包」，是指拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

闭包是个函数，而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」

由于作用域链只能从内向外找，默认外部无法获取函数内部变量。闭包，在外部获取函数内部的变量。

function f2(){
    var arg= [11,22,33,44];
    function f3(){
        return arg;
    }
    return f3;
}

ret = f2();
ret();

4、面向对象

function Foo (name,age) {
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}

var obj = new Foo(‘张岩林‘, 18);
var ret = obj.Func("很帅");
console.log(ret);

对于上述代码需要注意：

  • Foo充当的构造函数
  • this代指对象
  • 创建对象时需要使用 new

上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题：

function Foo (name,age) {
    this.Name = name;
    this.Age = age;
}
Foo.prototype = {
    GetInfo: function(){
        return this.Name + this.Age
    },
    Func : function(arg){
        return this.Name + arg;
    }
}

时间： 2024-10-18 10:02:53

JavaScript基础细讲的相关文章

JavaScript基础精讲

本文主要从javascript简介开始,分享Js语法.JS函数.BOM编程和DOM编程的相关知识. 一.JS简介 1.1 简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 1.2 组成部分 核心(ECMAScript) :数据类型.语句.声明等:核心对象 文档对象模型(

Javascript基础篇小结

Javascript基础篇小结 字数9973 阅读3975 评论7 喜欢28 转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制 1.javascript介绍 JavaScript操作DOM的本质是=获取+触发+改变 目的:就是用来操作内存中的DOM节点 修改D

一个简单的、面向对象的javascript基础框架

如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有完整的思考过我到底该如何去写这个框架,所以事后对于这个框架我有很多遗憾之处,当我重构过一次代码后我就没再做过任何重构操作的工作,因为我根本不想再去给它修修补补了,之所以有这个想法,就是我对我写的那个框架的基础架构不满意. 为什么不满意这个基础架构了?我们先来看看我当时封装框架的方式: (functi

【javascript基础】7、继承

原文:[javascript基础]7.继承 前言 由于本人水平有限,所以有些高手觉得现在写的内容偏容易,要一点点来嘛,今天和大家学习或者复习一下javascript的继承.我也就是尽量写吧······ 继承 javascript的继承其实主要就是通过原型链来实现的,原型链我们之前已经和大家一起学习过,这里就不浪费大家的时间了.javascript连类都没有,还说啥继承呢,这还是模拟类的继承.<javascript高级程序设计>上分成了几个方式,有的书上分为类式继承,原型式继承,这就是模拟其他语

【javascript基础】2、函数

原文:[javascript基础]2.函数 前言 我在上一篇[javascript基础]基本概念中介绍了javascript的一些基本概念,多谢大家的阅读和意见,自己写的东西可以被大家阅读,真心高兴,刚开始发布的时候我一直盯着阅读人数,虽然知道大家可能就是点开一下而已,但是还是给我一些继续写下去的信心.那今天写一些关于javascript函数的一些知识,帮助大家熟悉或者复习一些函数的基本知识. PS:最近jQuery源码交流群( 239147101)加了不少热新人,希望大家还是以学习为主,尽量少

JavaScript基础---语言基础（4）

函数,对象和数组 学习要点: 1.函数声明 2.return返回值 3.arguments对象 4.Object类型 5.Array类型 6.对象中的方法 函数是定义一次但却可以调用或执行任意多次的一段JS代码.函数有时会有参数,即函数被调用时指定了值的局部变量.函数常常使用这些参数来计算一个返回值,这个值也成为函数调用表达式的值. 一．函数声明 函数对任何语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.ECMAScript中的函数使用functi

JAVASCRIPT基础06-闭包

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

JavaScript 基础学习1-day14

JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator

JavaScript基础：DOM操作详解

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 事件 JS是以事件驱动为核心