javascript入门学习指南-js课程新手篇

栏目: JavaScript · 发布时间: 7年前

内容简介：javascript入门学习指南-js课程新手篇

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

第一课

1：javascript的主要特点

解释型：不需要编译，浏览器直接解释执行

基于对象：我们可以直接使用JS已经创建的对象

事件驱动：可以对以事件驱动的方式相应客户端的输入，无须经过服务器端程序

安全性：不允许访问本地硬盘，不能将数据写入到服务器上

跨平台：js依赖浏览器本身，与操作系统无关

第二课

如何在网页中写Javascript

1:在页面中直接嵌入Javascript

<script language="javascript">

javascript程序

</script>

javascript可以插入在<head></head>标签中间，

也可以放在<body></body>标签中间    

最常用放在<head></head>标签之间    

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

javascript入门学习指南-js课程新手篇 

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

javascript入门学习指南-js课程新手篇

案例运行结果如下

javascript入门学习指南-js课程新手篇

案例2代码如下

javascript入门学习指南-js课程新手篇 

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

javascript入门学习指南-js课程新手篇

案例2运行结果如下

javascript入门学习指南-js课程新手篇

2:引用外部的Javascript

如果脚本比较复杂或者是同一段代码被很多页面所使用，则可以将这些脚本代码放置在一个单独的文件中，该文件的扩展名是.js，然后再需要使用该代码的web页面中链接该javascript文件即可
<script language="javascript" src="*.js">
</script>
（建议）以上代码一般写在<head></head>中间比较好
在.js后缀的文件中，不需要使用<script></script>标签对括起来
<body onload="getDate()">表示的是加载页面时调用getDate()方法getdate()是定义在.js后缀的文件中的方法
此案例后缀是.html

javascript入门学习指南-js课程新手篇 

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

javascript入门学习指南-js课程新手篇

此案例后缀是.js

javascript入门学习指南-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入门学习指南-js课程新手篇

综合上面两个案例的运行结果是

javascript入门学习指南-js课程新手篇

  第三课

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);

想深入学习js的朋友，可以下载 jquery高级编程pdf书籍 哦。

以上就是js入门的全部课程了，感谢大家的阅读！

(责任编辑：小恩)


以上所述就是小编给大家介绍的《javascript入门学习指南-js课程新手篇》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
网站运维技术与实践

网站运维技术与实践

饶琛琳 / 电子工业出版社 / 2014-3 / 69.00元

网站运维工作，一向以内容繁杂、覆盖面广著称。《网站运维技术与实践》选取日常工作涉及的监测调优、日志分析、集群规划、自动化部署、存储和数据库等方面，力图深入阐述各项工作的技术要点及协议原理，并介绍相关开源产品的实践经验。在技术之外，作者也分享了一些关于高效工作及个人成长方面的心得。 《网站运维技术与实践》适合Linux 系统管理员、中大型网站运维工程师及技术负责人、DevOps 爱好者阅读。同......一起来看看 《网站运维技术与实践》 这本书的介绍吧!

码农工具
HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3