javascript发展史和入门教程

最新推荐文章于 2023-11-30 14:22:51 发布
最新推荐文章于 2023-11-30 14:22:51 发布
阅读量753 收藏 1
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smithliang1996/article/details/73699799
版权

5 Javascript入门
5.1 引入
html：负责网页结构
css： 负责网页美观
javascript：负责用户与浏览器交互。
5.2 javacript的来由
1994时，网景公司研发了livescript语言，领航者浏览器（把livescript语言植入到浏览器）
微软公司的IE浏览器，后来自己花钱20亿美金研发jscript

    1995年，Sun公司，推出jdk1.1 .谈合作。livescript-》javascript

    1998，美国在线收购网景。

    2003，直接关闭网景。网景6-7亿美金。2千万美金，组建谋智基金（火狐）

    javascript   jscript    语法不同。 ECMA（欧洲制造商联盟）

    scirpt的语法：
        1）基础语法（ECMA规范）
        2）BOM编程（没有统一）
        3）DOM编程（没有统一）

1.1 javascript使用
javascript的注释：单行 // 多行 /* */
css的注释：css 多行注释 /* */
html的注释： 

常用的函数：
    alert("提示框");
    document.write("向浏览器输出内容");

javascript的使用方法：
    1）内部javacript:
        a)在html页面中使用<script>标签，在<script>标签体中写js内容
        b)弊端：和html代码混杂在一起，不好维护，不好重用

   2）外部javascript（推荐使用）
       注意： 不能使用<script src="01.js"/> 空标签方式导入

1.2 变量和数据类型 

    1）定义和赋值变量： var 变量名=值;
        var a = 10;
        //var a = 20;
        var b = 3.14;
        var c = 'c';
        var d = "hello";
        var e = true;
        var f = new Object();
    注意：
        1）使用var关键词定义变量，var可以省略的，但是不建议省略var
        2) 在js中可以重复定义变量，后面定义的变量会覆盖前面的变量。
        3) js是弱类型语言，使用var来定义任何数据类型
        4）js中变量的类型是由变量的值决定的，所以只定义不赋值的变量，就是一个未赋值变量（undefined），
    未赋值的变量不能使用

    typeof(变量)： 查看变量的数据类型

    2)js的数据类型分类：
        a）number： 无论整数还是小数，都是number类型
        b) string:  无论字符还是字符串，都是string类型
        c) boolean
        d) object  对象类型

1.3 类型转换函数
string->number(整数) : parserInt(变量)
string->number(小数): parserFloat(变量)

1.4 运算符
1)算术运算符： + - * / %
2)比较运算符： > < >= <= ==
3)逻辑运算符： && || !
4)三目运算符: 表达式 ? true的结果 : false的结果

1.5 流程控制语句
/*
if语句
if(表达式){
语句
}else{
语句
}

条件可以是：
    布尔值：true：成立 ； false:不成立
    number：非0：成立； 0： 不成立
    string: 非空字符串： 成立 ； 空字符串： 不成立
    object: 非null: 成立；  null：不成立
*/

/*
    if(null){
        alert("条件成立");  
    }else{
        alert("条件不成立");
    }
    */


    /*
    swtich语句
        swtich(变量){
        case 选项1:
            语句;
            break;  如果不break，就会继续下面选项的语句    
        case 选项2:：
            语句;
            break;
        default:
            默认;
        }

    注意：
        case的条件：
            1）可以是常量. string,number
            2）可以是变量。（java是不能是变量）
            3)可以是表达式 （java不能这样）
    */
    /*
    var i = "b";
    var b = "b";
    switch(i){
    case "a":
        document.write("你选择了a");
        break;  
    case b:
        document.write("你选择了b");
        break;
    case "c":
        document.write("你选择了c");
        break;
    case "d":
        document.write("你选择了d");
        break;
    default:
        document.write("你选择了其他");
        break;
    }
    */
    /*
    var age = 20;
    switch(true){
    case age>=18:
        document.write("他是成年人");
        break;
    case age<18:
        document.write("他是未成年人");
        break;
    }
    */

    /*
    for语句：
        for(初始化语句;条件判断语句;流程控制语句){
            循环体语句
        }

    需求：页面上打印十次helloworld
    需求：对1-100进行求和
    */
    /*
    var result = 0;
    for(var i=1;i<=100;i++){
        result+=i;
    }
    document.write("结果为:"+result);
    */

    /*
    while语句
        初始化语句
        while(条件判断语句){ 
        循环体语句;
        条件控制语句;
        }

        执行流程：

需求：在页面上打印十次helloworld;

/*
    var i = 1;
    while(i<=5){
        document.write("helloworld<br/>");
        i++;
    }
    */
do-while语句
    初始化语句;
    do{
        循环体语句;
        条件控制语句;
    }while(判断条件语句)

需求：在页面上打印十次helloworld;

var i = 0;
do{
    document.write("helloworld");
    i++;
}while(i<10);
循环语句课堂练习（for循环的嵌套）：
1，显示"*"为三角型，5行，第1行有1个"*"，第2行有2个"*"……

2. 打印99乘法表（作业）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">


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

            for(var j = 0;j <= i; j++)
            {
                document.write(i+"*"+j+"="+i*j+"  ");   
            }
            document.write("<br />");

        }
</script>
</head>
<body>
  <div>
  九九乘法表
  </div>
</body>
</html>

with语句：方便函数的调用（以上练习题网页拿过来直接讲解）
    with(对象){
        直接写对象的方法，无需写对象的名称   
    }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
    with(document){
        var i = 0;
        do{
            write("helloworld"+"<br />");
            i++;
        }
        while(i<10);
    }
</script>
</head>
<body>

</body>
</html>

1.6 函数

函数定义：
    function 函数名称(形式参数列表){
        语句  
    }

调用函数:
    函数名称(实际参数列表);

    注意： 
        1）js的函数使用function定义，但是形式参数列表不能使用var关键词
        2）js的函数可以有返回值，直接使用return关键词返回即可，不需要声明返回值类型
        3) js没有方法重载的概念，后面定义的函数会覆盖前面的函数。
        4）js中的形式参数和实际参数的数量可以不一致，依然可以调用。
        5）js的每个函数中都隐藏了一个叫arguments的数组，这个数组用于接收函数调用时传递过来的实际参数值。
        6)arguments数组接收完实际参数后，会逐一的依次从左到右赋值给形式参数,如果实际参数数量大于形式参数，则丢失剩下的实际参数

注意：
实际参数<形式参数： NaN
实际参数>形式参数： 取前面的实际参数，后面的参数丢失

案例：定义一个函数，输入月份，可以查询到该月份的天数
1,3,5,7,8,10,12  大月 31天
    4,，6,9,11  小月  30天
    2  小小月  28天

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
    function checkMonth()
    {
        var month = document.getElementById("month").value;
        if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){     
            alert("该月有31天");
            }else if(month==4||month==6||month==9||month==11){
                alert("该月有30天");
                }else if(month==2){
                    alert("该月有28天");
                    }else{
                        alert("星球上没有这个月份");
                        }
        }
</script>
</head>
<body>
    请输入要查询的月份：<input type="text" id="month" />
    <input type="button" value="查询天数" onclick="checkMonth()" />
</body>
</html>

1.7 基于对象编程
内置对象
1.String对象
方式一：定义String对象
var str1 = new String(“hello”);
var str2 = new String(“hello”);
document.write(“结果：”+(str1==str2)+”
”);
valueOf（）:该方法返回对象的内容
document.write(“结果：”+(str1.valueOf()==str2.valueOf()));

        方式二：
        var str1 = "hello";
        var str2 = "
        ";  
        document.write("结果："+(str1==str2)+"<br/>");

    常用方法：
        charAt(索引): 返回指定索引的内容
        indexOf(字符串): 返回首次出现指定字符的索引位置
        lastIndexOf(字符串): 返回最后出现指定字符的索引位置
        fontcolor("red"): 直接给字符串添加颜色
        split("字符串"): 使用指定字符串切割字符串，返回字符串数组
        substring(start,end); 截取字符串，start：开始索引， end:结束索引
        substr(start,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
/*
1.String对象定义
方式1:var s1 = new String("hello");
方式2:var s2 = "hello";

charAt(索引): 返回指定索引的内容
indexOf(字符串): 返回首次出现指定字符的索引位置
lastIndexOf(字符串): 返回最后出现指定字符的索引位置
fontcolor("red"): 直接给字符串添加颜色
split("字符串"): 使用指定字符串切割字符串，返回字符串数组
substring(start,end); 截取字符串，start：开始索引， end:结束索引
substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度


*/
var s1 = new String("hello");
var s2 = "world";

//charAt(索引): 返回指定索引的内容
var s3 = s1.charAt(1);

//indexOf(字符串): 返回首次出现指定字符的索引位置
var s4 = s1.indexOf("h");

//split("字符串"): 使用指定字符串切割字符串，返回字符串数组
var s5 = s1.split("e");
document.write(s5);
document.write("<br />");

</script>
</head>
<body>

</body>
</html>
        Number对象
        方式一：定义Number对象
        var num1 = new Number(20);
        var num2 = new Number(20);
        方式二：
        var num1 = 20;
        var num2 = 20;
        对比
        document.write((num1==num2)+"<br/>");
        document.write(num1.valueOf()==num2.valueOf());


        Boolean对象
        var b1 = new Boolean(true);
        var b2 = new Boolean(true);
        document.write((b1==b2)+"<br/>");
        document.write(b1.valueOf()==b2.valueOf());


        Math对象
        常用的方法：
        1）ceil()： 向上取整。 如果有小数部分的话，直接+1
        2）floor(): 向下取整。如果有小数部分的话，直接丢失小数部分，保利整数位
        3) round(): 四舍五入取整。满5进一
        4）random(): 生成一个随机的0-1的小数 .包含0，不包含1
        5）max(): 返回最大值
        6）min(): 返回最小值 
        var num = 3.50;
        document.write(Math.ceil(num)+"<br/>");
        document.write(Math.floor(num)+"<br/>");
        document.write(Math.round(num)+"<br/>");
        document.write(Math.round(Math.random()*100)+"<br/>");
        document.write(Math.max(10,6,54,23,76)+"<br/>");
        document.write(Math.min(10,6,54,23,76)+"<br/>");

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
    //Boolean对象
    var b1 = new Boolean(true);
    var b2 = new Boolean(true);
    document.write(b1==b2);
    document.write("<br>");
    document.write(b1.valueOf()==b2.valueOf());
    document.write("<br>");


    //Number对象
    var n1 = new Number(10);
    //document.write(n1);
    var n2 = new Number(10);
    document.write(n1==n2);
    document.write("<br>");
    document.write(n1.valueOf()==n2.valueOf());

</script>
</head>

<body>
</body>
</html>
    Date对象
        //创建日期
        var date = new Date(); //取当前系统日期时间    java: SimpleDateFormat对象 yyyy-MM-dd 格式化
        //document.write(date);  //默认格式
        //格式： 2015年06月01日 15时12分30秒
        //年份
        document.write(date.getFullYear()+"年");
        //月
        document.write((date.getMonth()+1)+"月");
        //日
        document.write(date.getDate()+"日");
        //星期
        document.write("星期"+date.getDay()+"&nbsp;");
        //时
        document.write(date.getHours()+"时");
        //分
        document.write(date.getMinutes()+"分");
        //秒
        document.write(date.getSeconds()+"秒");

        案例练习：网页时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<span id="sapnTime"></span>
</body>
<script type="text/javascript">

    //创建一个获取当前时间的方法
    function getTime(){
        //获取span标签对象
        var spanTime = document.getElementById("sapnTime");
        //创建日期对象
        var date = new Date();
        //获取年月日,时分秒进行字符串拼接
        var time = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"&nbsp;&nbsp;"+date.getHours()+"-"+date.getMinutes()+"-"+date.getSeconds();

        //给标签体设置内容,innerHTML这个属性
        spanTime.innerHTML=time;

        }

    //调用设置时间的方法
    //getTime();//这样的方式对上面设置时间的方法只调用了一次,所以我们的时间无法实现动态的设置变化

    //如果需要让时间动起来的话,我们需要每隔一秒调用getTime()这个方法一次
    window.setInterval("getTime()",1000);
    //参数1:调用的函数名称   参数2:每隔多久调用一次,调用的次数没有限制


</script>
</html>

Array数组对象   
    方式一：创建数组
    1.1 指定数组长度
    var arr = new Array(3);

    1.2 不指定数组长度、默认0个元素
    var arr = new Array();

    1.3 指定具体内容
    var arr = new Array(10,"hello",true);

    方式二： 不需要new，直接指定内容
    var arr = [10,"java",false];


    注意：
    1）数组的长度会随着元素的添加而变化，不用担心出现索引位置越界的异常。
    2) js的数组可以存放任意类型的元素。

    常用的方法：
    join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串
    reverse(): 反转数组中的元素

    常用的属性：length 数组的长度

        for-in语句（数组讲完之后再讲，和普通for循环遍历对比）：
        for(var 遍历 in  数组){

        }
        var arr = [10,20,30,40];
        作用：遍历数组 
        需求：定义数组进行遍历


（作业）设计一个猜数字小游戏      

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
    //生成随机数
    var num = Math.floor(Math.random()*100+1);
    alert(num);
    function checkNumber(){
        //1.获取输入狂内部输入的数字
        var inputNumber = document.getElementById("inputNumber").value;

        //将数字的类型进行转换
        inputNumber = parseInt(inputNumber);

        //做if判断并给出提示
        if(inputNumber>num){
            alert("大了");
            }else if(inputNumber<num){
                alert("小了");
                }else if(inputNumber==num){
                    alert("对了");
                    }

        }

</script>
</head>

<body>
请输入你猜测得数字:<input type="text" id="inputNumber" />
<input type="button" onclick="checkNumber()" value="猜数字" />

</body>
</html>
smithliang1996
关注
专栏目录
Javascript 简史
六小登登的专栏
08-14 1009
「 JavaScript 」 诞生于 1995年，当时主要是用于处理由服务器负责的一些输入验证操作。 在 「 JavaScript 」为诞生之前，必须要把表单数据发送到服务端，然后等到服务单接受并响应后，才能确定用户是否输入正确或者输入到是不是有效到值。 在网络与带宽都比较发达到今天看这些东西其实并没用什么，传到服务器等相应也都是分分钟到事情。 但是在当时到环境下可没有这么好到网络与带宽，那...
JavaScript异步编程发展史（Promise Demo）
Darlingmi的博客
01-08 1161
呕心沥血整理的promise demo合集 ！ 任何同学没有看过我都伤心的OK ？ 什么链式调用、什么all、race、什么await，通通拿下！
JavaScript 的历史
junJZ_2008的专栏
08-23 206
Nombas 和 ScriptEase 大概在 1992 年，一家称作 Nombas 的公司开发了一种叫做 C 减减（C-minus-minus，简称 Cmm）的嵌入式脚本语言。Cmm 背后的理念很简单：一个足够强大可以替代宏操作（macro）的脚本语言，同时保持与 C （和 C ++）足够的相似性，以便开发人员能很快学会。这个脚本语言捆绑在一个叫做 CEnvi 的共享软件中，它首次向开发人...
JavaScript发展历史(JS)
weixin_39299249的博客
12-02 1616
JavaScript发展历史(JS) 1.1994年， 网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器——只能浏览页面，浏览器无法与用户互动，当时解决这个问题有两个办法，一个是采用现有的语言,允许许它们直接嵌入网页。另一个是发明一种全新的语言。 liveScript ==> javaScript...
JavaScript 的发展历史
王春燕的博客
07-02 3909
JavaScript 无处不在，多年来，JavaScript 已成为最流行和最通用的编程语言。支持超过 97% 的Web。作为一名 Web 开发人员，了解最流行和最受欢迎的编程语言的历史是一个加分项，将有助于增强您对该语言的理解。1、1995 年：JavaScript 的诞生 2、1996 年：JavaScript 与 Java 3、1997 年：ECMAScript 作为 JavaScript 标准诞生 4、2009 年：ES5 6、2015: 年度预期更新 ~ ES6/ES2015...
JavaScript发展史
林泽_-的博客
06-14 202
JavaScript发展史以及市面上常见的五大浏览器与内核
编程语言发展史：JavaScript语言的发展和应用
05-21
JavaScript 语言的发展和应用 JavaScript 语言是一种广泛应用于网页前端开发的脚本语言，具有非常重要的意义。JavaScript 语言的发展历程可以分为多个阶段，自从 1995 年发布第一版以来，不断地扩展了语言的功能和...
浅谈Unicode与JavaScript的发展史
10-24
Unicode是一个致力于统一全世界所有字符的字符编码标准，由Unicode联盟维护。它的核心思想是创造一个统一的字符集，使得每...这些技术的结合极大推动了全球信息技术的发展，为构建面向未来的软件系统提供了坚实的基础。
javascript发展史
05-29
JavaScript 的发展历程可以简单地分为以下几个阶段： 1. 初期阶段（1995-1997）：JavaScript 由 Netscape 公司的 Brendan Eich 开发，最初被命名为 LiveScript。1995 年，Netscape 公司发布了 Navigator 2.0 浏览器...
计算机语言发展史大全
03-18
这份"计算机语言发展史大全"涵盖了从早期的机器语言、汇编语言，到高级编程语言，再到现代的脚本语言和面向对象语言的整个演变过程。 在计算机的早期，人们直接使用机器语言，这是一种二进制代码，由0和1组成，对应...
JavaScript的发展史
muyuxifeng的博客
10-21 179
在九十年代初，网络的速度非常慢，一般都是十几k，二十几k。用户上网时常常会遇到这样一个窘境，一个现实的例子：那个时候论坛风靡一时，许多用户上论坛时，需要注册一个账号，注册页面是一个表单，要求用户填写账号、密码、性别、爱好等信息，当用户填好信息提交时，这个表单就会被发送到服务器，由服务器做一些校验工作（例如，密码设定是否符合一定的规则、用户是否漏填某些必要信息等格式校验）。设想，如果此时一个用户由于粗心忘记了填写某个必要信息就提交了表单，在那个网络速度非常慢的时代，当服务器检测出该用户漏填再将提醒信息反馈到用
javascript的历史
weixin_30302609的博客
12-05 96
1.netscape与livescript 　　92年，一个叫nombas的公司开发了“c减减”语言，后来改名为scriptEase。它是一个微型的脚本语言。后来网景公司模仿该语言设计了liveWire，没过多久就改名为liveScript了。该语言在设计的时候就是针对的非专业的开发人员，提供一个方便的工具。因为大部分的网站设计者没有任何的编程背景，因此这个语言应该尽可能简单、易学，最终一...
JavaScript(一)_简介&发展史
qq_37388518的博客
08-12 617
## JavaScript： * 概念： 一门客户端脚本语言 * 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 * 脚本语言：不需要编译，直接就可以被浏览器解析执行了 * 功能： * 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。 ...
JavaScript 的发展史你真的了解吗？
最新发布
fefdfg的博客
11-30 1130
JavaScript 的发展历程令人瞩目。从作为一种脚本语言的谦逊起步，到在单页面应用（SPA）、虚拟 DOM、TypeScript 等方面发挥重要作用，JavaScript 深刻地改变了软件开发领域。随着每一次挑战被创新解决方案所克服，开发者们得以创建更加复杂和用户中心的应用。当我们站在未来的边缘时，可以清楚地看到 JavaScript 的旅程还远未结束。随着人工智能、新的框架和部署范例的出现，有一点是确定无疑的：JavaScript 的适应能力和革命性将继续在未来多年塑造技术领域的发展。
JavaScript 发展的前世今生
学而不思则罔,思而不学则殆
06-01 1624
本章节介绍了JavaScript 这门语言发展的历程以及背后的故事
2018 年最值得关注的 JavaScript 趋势
前端大全
01-03 2580
（点击上方公众号，可快速关注）英文：Ryan Chartrand  译文：36氪http://36kr.com/p/5110763.htmlJavaScript 渗透的范围越来越广，它能做的事情已经远不止前端开发而已。不久前stateofjs.com刚刚发布了 2017 JavaScript 现状报告 ，现在Ryan Chartrand非常应景地推出了 2018年的JavaScript发展趋势 ，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值