• 技术文章 >web前端 >js教程

    javascript入门学习指南新手篇

    伊谢尔伦伊谢尔伦2017-06-16 10:05:51原创1070
    javascript对于前端开发来说,是一门必学的课程,以下是入门的前3节课程,一起看看吧。

    第一课
    1:javascript的主要特点
    解释型:不需要编译,浏览器直接解释执行
    基于对象:我们可以直接使用JS已经创建的对象
    事件驱动:可以对以事件驱动的方式相应客户端的输入,无须经过服务器端程序
    安全性:不允许访问本地硬盘,不能将数据写入到服务器上
    跨平台:js依赖浏览器本身,与操作系统无关

    第二课
    如何在网页中写Javascript
    1:在页面中直接嵌入Javascript
    <script language="javascript">

    javascript程序
    </script>
    javascript可以插入在<head></head>标签中间,
    也可以放在<body></body>标签中间
    最常用放在<head></head>标签之间

    案例如下,将javascript代码插入在<head></head>标签中间。

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>初学javascript</title>
        <script language="javascript">        var now=new Date();//获取Date对象的一个实例
            var hour=now.getHours();//获取小时数
            var min=now.getMinutes();//获取分钟数
            alert("当前时间"+hour+":"+min+"\n欢迎访问柠檬学院http://www.bjlemon.com/");    </script>
    </head>
    <body>
    </body>
    </html>

    案例2代码如下

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>我的年月日</title>
        <script language="javascript">        var now=new Date();//获取日期对象
            var year=now.getYear()+1900;//获得年,在js中年份需要加1900才可以显示此时此刻的年份
            var month=now.getMonth()+1;//获得月份,月份是0-11,所以在js中需要加1
            var date=now.getDate();//获得日
            var day=now.getDay();//获得星期几
            var day_week=new Array("礼拜日","礼拜一","礼拜二","礼拜三","礼拜四","礼拜五","礼拜六");        var week=day_week[day];        var time="当前时间:"+year+"年"+month+"月"+date+"日"+week;
            alert(time);    </script>
    </head>
    <body></body>
    </html>

    2:引用外部的Javascript

    如果脚本比较复杂或者是同一段代码被很多页面所使用,则可以将这些脚本代码放置在一个单独的文件中,该文件的扩展名是.js,然后再需要使用该代码的web页面中链接该javascript文件即可

    <script language="javascript" src="*.js">
    </script>
    (建议)以上代码一般写在<head></head>中间比较好

    在.js后缀的文件中,不需要使用<script></script>标签对括起来

    <body onload="getDate()">表示的是加载页面时调用getDate()方法getdate()是定义在.js后缀的文件中的方法

    此案例后缀是.html

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>引用外部的js</title>
        <script language="javascript" src="js1.js">
        </script>
    </head>
    <body onload="getdate()">
    </body>
    </html>

    此案例后缀是.js

    function getdate(){    var now=new Date();//获取日期对象
            var year=now.getYear()+1900;//获得年,在js中年份需要加1900才可以显示此时此刻的年份
            var month=now.getMonth()+1;//获得月份,月份是0-11,所以在js中需要加1
            var date=now.getDate();//获得日
            var day=now.getDay();//获得星期几
            var day_week=new Array("礼拜日","礼拜一","礼拜二","礼拜三","礼拜四","礼拜五","礼拜六");        
            var week=day_week[day];        
            var time="当前时间:"+year+"年"+month+"月"+date+"日"+week;
            alert(time);
        
    }

    第三课
    javascript的语法
    1:javascript的语法
    1.1:js的变量区分大小写
    usename,useName这是两个不同的变量
    1.2:每行结尾的分号可有可无,如果语句的结束没有分号,那么js
    会自动将这行代码的结尾作为语句的结尾
    alert("hello world");
    alert("hello world")
    1.3:变量是弱类型
    定义变量时只使用var运算符
    例如:var usename="biexiansheng";
    var age=22;
    1.4:使用大括号标签代码块
    { //代码}被封装在大括号内的语句按照顺序执行
    1.5:注释
    1.5.1:单行注释 //
    单行注释使用双斜线"//"开头,在"//"后面的文字即为注释内容
    注释的内容在代码执行过程中不起作用。
    var now=new Date();//获取日期对象
    1.5.2:多行注释 /**/
    多行注释以/*开头,以*/结尾,在两者之间的内容为注释内容
    在代码执行过程中不起任何作用。
    /*
    *功能:获取当前日期
    *作者:biexiansheng
    */
    function getClock(){
    //内容
    }

    第四课
    javascript的数据类型(不管javascript有多少种数据类型,声明的时候只可以使用var来声明)
    1:数值型
    整形:123 //十进制
    0123 //八进制,以0开头
    0x123 //十六进制 ,以0x开头(是零不是o)
    浮点型:整数部分加小数部分,只能以十进制表示,不过可以使用科学记数法
    3.1415926 //标准形式的浮点数
    3.14E9 //采用科学计数法来表示,代表的是3.14乘以10的9次方

    2:字符型
    字符型数据是使用单引号或者多引号括起来的一个或者多个字符
    例如:'a' 'hello world'
    "a" "hello world"
    javascript中无char数据类型
    如果要表示单个字符,必须要使用长度为1的字符串

    单引号包含双引号 '"hello"'
    双引号包含单引号 "'world'"
    3:布尔型
    布尔型数据只有true或者false,在js中也可以使用整数0代表false,使用非0的整数代表true

    4:转义字符
    以反斜杠开头的不可显示的特殊字符通常称为控制字符,也被称为转义字符
    \b退格 \n换行 \f换页 \tTab符 \'单引号 \" 双引号 \\反斜杠

    5:空值
    null,用于定义空的或者不存在的引用
    例如 var a=null;

    6:未定义值
    已经声明但是没有赋值的变量
    var a;
    alert(a);
    弹出undefined是关键字,用来代表未定义值


    7:Array型
    数组类型,数组是包含基本和组合数据的序列,在javascript脚本语言中
    每一种数据类型对应一种对象,数据本质上即为Array对象。
    var score=[45,56,45,78,78,65];
    由于数组本质上为Array对象,则可用运算符new来创建新的数组,如
    var score=new Array(45,65,78,8,45);
    访问数组中特定元素可通过该元素的索引位置index来实现,如下面语句声明
    变量返回数组score中第4个元素
    var m=score[3];

    第五课
    变量的定义与使用
    1:变量的命名规则
    变量名由字母,数字,下划线组成,但是不能以数字开头
    不能使用javascript中的关键字
    严格区分大小写
    例如 username username
    2:变量的声明
    var variable
    可以使用一个var声明多个变量,比如
    var now,year,month,date;
    可以在声明变量的同时对它进行赋值,也就是初始化
    var now="2016-8-11",year="2016",month="8",date="11";
    如果只是声明了变量,没有赋值,那么该变量的默认值就是undefined

    javascript是弱类型,声明的时候不需要指定变量的类型,变量的类型将根据变量的值来确定

    全局变量的声明:1:在函数体外的声明都是全局变量,无论是否有var声明
       2:在函数体内部使用var声明的变量是局部变量,不使用var声明的变量是全局变量

    //如果给一个尚未声明的变量类型赋值时,javascript会自动使用该变量创建一个布局变量
    例如:a="hello world";
    funcation test(){
    var c="局部变量";//这个c是局部变量,也是唯一的一种方式定义局部变量
    b="全部变量";//这个b也是全部变量
    }

    function test2(){
    alert(b);
    }

    3:变量的作用域
    变量的作用域是指变量在程序中的有效范围
    全部变量:定义在所有函数之外,作用于整个代码的变量
    局部变量:定义在函数体内,只作用于函数体内的变量

    第六课
    运算符的应用
    1:赋值运算符
    简单赋值运算符
    例如var useName='tom';//简单赋值运算符
    复合赋值运算符
    a+=b;//相当于a=a+b;
    a-=b;//相当于a=a-b;
    a*=b;//相当于a=a*b;
    a/=b;//相当于a=a/b;
    a%=b;//相当于a=a%b;
    a&b=b;//相当于a=a&b;逻辑与运算
    a|=b;//相当于a=a|b;逻辑或运算
    a^=b;//相当于a=a^b;逻辑非运算符
    2:算术运算符
    + - * / %
    ++ 前++先加后用 后++先用后加
    -- 前--先减后用 后--先用后减
    注意:在进行除法运算时,0不能作为除数,如果0作为除数,那么将会返回这个关键字infinity

    3:比较运算符
    >大于 <小于 >=大于等于 <=小于等于
    ==等于 只是根据表面值进行判断,不涉及数据类型,alert("11"==11);返回true。
    ===绝对等于 不仅判断表面值,还要判断数据类型是否一样。
    != 不等于 只是根据表面值进行判断,不涉及数据类型。
    !==不绝对等于 不仅判断表面值,还要判断数据类型是否一样。

    4:逻辑运算符
    !逻辑非
    &&逻辑与。只有当两个操作数的值都为true的时候,结果才会true
    ||逻辑或。只有两个操作数有一个为true,则结果为true
    5:条件运算符
    条件运算符是javascript支持的一种特殊的三元运算符
    语法格式:操作数?结果1:结果2;
    如果操作数的值为true,则整个表达式的结果为结果1
    如果操作数的值为false,则整个表达式的结果为结果2
    6:字符串运算符
    连接字符串的两种方式
    +。 var a="hello"+"world";
    +=。var a+="hello world!!!";

    第七课
    流程控制if,switch语句
    1:if条件判断语句
    1:if(expression){
    //expression为true的时候执行里面的语句
    }
    2:if(expression){
    //expression为true的时候执行里面的语句
    }else{
    //expression为false的时候执行里面的语句
    }
    3:if(expression){
    //expression为true的时候执行里面的语句
    }else if(expression1){
    //expression1为true的时候执行里面的语句
    }else if(expression2){
    //expression2为true的时候执行里面的语句
    }else{
    //这个else可有可无,如果有的话,则上述条件
    //都不满足的时候指定else
    }
    2:switch语句
    优点:可读性好,易读
    语法格式
    switch(表达式){
    case 条件1:语句1;
    break;
    case 条件2:语句2;
    break;
    case 条件3:语句3;
    break;
    case 条件4:语句4;
    break;
    case 条件5:语句5;
    break;
    default:语句6//无匹配的执行此语句;
    }
    第八课
    流程控制之for,while,do-while语句
    1:for循环语句
    语法格式
    for(1初始条件;2循环条件;4增长步幅){
    3语句体;
    }
    //先执行初始条件,然后判断循环条件是否返回true,
    //如果返回false,终止条件,如果为true,执行语句体,
    //然后执行增长步幅
    //1->2true->3->4->2true->3->4
    //1->2false->3->4->2false for循环结束
    实例
    var sum=0;
    for(var i=0;i<10;i++){
    sum+=i;
    }
    alert(sum);
    2:while循环语句
    语法格式
    while(表达式1){
    2语句体;
    }
    1true->2->1true->2.....
    实例
    var sum=0;
    var i=1;
    while(i<10){
    sum+=i;
    i++;
    }
    alert(i);
    3:do-while循环语句
    do-while循环的循环能够保证至少执行一次。
    语法格式
    do{
    1执行循环体
    }while(2判断条件);
    1->2true->1->2true.....

    注意:while循环是先判断条件是够成立,然后再根据判断的结果
    是否执行循环体
    do-while循环是先执行一次循环体,然后再判断条件是否为true.
    所以do-while循环能够保证至少执行一次。

    实例
    var sum=0;
    var i=1;
    do{
    sum+=i;
    }while(i<=10);
    alert(sum);

    以上就是javascript入门学习指南新手篇的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:javascript异步编程入门指南 下一篇:requireJS框架模块化编程实例详解
    20期PHP线上班

    相关文章推荐

    精选22门好课,价值3725元,开通VIP免费学习!• 万字图解JavaScript笔记总结• 如何搞懂虚拟 DOM?看看这篇文章吧!• 深入聊聊Node 异步和事件循环的底层实现和执行机制• 简单介绍JavaScript “原型“与“原型链“• 聊聊Node.js中的进程、线程、协程与并发模型
    1/1

    PHP中文网