javascript入门学习指南新手篇-js教程-PHP中文网

首页

web前端

js教程

javascript入门学习指南新手篇

伊谢尔伦

Jun 16, 2017 am 10:05 AM

javascript对于前端开发来说，是一门必学的课程，以下是入门的前3节课程，一起看看吧。

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

第二课
如何在网页中写Javascript
1:在页面中直接嵌入Javascript
   10a80d49cacb7ad8386f440152676a4b

       javascript程序
   2cacc6d41bbb37262a98f745aa00fbf0
javascript可以插入在93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1标签中间，
也可以放在6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956标签中间
最常用放在93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1标签之间

案例如下，将javascript代码插入在93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1标签中间。

<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文件即可

509c97860014f6ed7ded9f068581ffe5
2cacc6d41bbb37262a98f745aa00fbf0
（建议）以上代码一般写在93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1中间比较好

在.js后缀的文件中，不需要使用3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0标签对括起来

2db6fd1021c86648c8f95da7a951f139表示的是加载页面时调用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：比较运算符
>大于 4e60f382527e9bfdda7321974f122c7c=大于等于 8fe1fcc032892a925709adb4531434a02true->3->4->2true->3->4
   //1->2false->3->4->2false for循环结束
   实例
   var sum=0;
   for(var i=0;i83755c7e41f5a2625651ee0cb16c4d2c2->1true->2.....
       实例
       var sum=0;
       var i=1;
       while(i5e98ddd84e6c7f1676c71ab5332214042true->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中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

如何创建和发布自己的JavaScript库？Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能？Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

如何使用浏览器开发人员工具有效调试JavaScript代码？Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。

jQuery矩阵效果Mar 10, 2025 am 12:52 AM

将矩阵电影特效带入你的网页！这是一个基于著名电影《黑客帝国》的酷炫jQuery插件。该插件模拟了电影中经典的绿色字符特效，只需选择一张图片，插件就会将其转换为充满数字字符的矩阵风格画面。快来试试吧，非常有趣！工作原理插件将图片加载到画布上，读取像素和颜色值： data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地读取图片的矩形区域，并利用jQuery计算每个区域的平均颜色。然后，使用

如何构建简单的jQuery滑块Mar 11, 2025 am 12:19 AM

本文将引导您使用jQuery库创建一个简单的图片轮播。我们将使用bxSlider库，它基于jQuery构建，并提供许多配置选项来设置轮播。如今，图片轮播已成为网站必备功能——一图胜千言！决定使用图片轮播后，下一个问题是如何创建它。首先，您需要收集高质量、高分辨率的图片。接下来，您需要使用HTML和一些JavaScript代码来创建图片轮播。网络上有很多库可以帮助您以不同的方式创建轮播。我们将使用开源的bxSlider库。 bxSlider库支持响应式设计，因此使用此库构建的轮播可以适应任何