码迷,mamicode.com
首页 > 编程语言 > 详细

前端基础之JavaScript

时间:2017-07-31 01:08:25      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:如何   image   划线   大小   检查   nbsp   sed   原型   charset   

一.JavaScript简介

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

二.JavaScript基础

2.1JS的引入

  • 直接编写
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert("Hello JavaScript")
    </script>
</head>
<body>

</body>
</html>
  •  导入文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="hello.js"></script>
</head>
<body>

</body>
</html>

2.2 JS的变量、常亮和标识符

2.2.1.JS的变量

x=5
y=6
z=x+y

在代数中,我们使用字母(比如 x)来保存值(比如 5)。通过上面的表达式 z=x+y,我们能够计算出 z 的值为 11。在 JavaScript 中,这些字母被称为变量。

那么如何在JS中定义使用变量呢?

1.声明变量时不用声明变量类型. 全都使用var关键字;

var a;<br>a=3;

 2.一行可以声明多个变量.并且可以是不同类型

var name="yuan", age=20, job="lecturer";

 3.声明变量时 可以不用var. 如果不用var 那么它是全局变量

2.2.2常量和标识符

常量 :直接在程序中出现的数据值

标识符:

  1. 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
  2. 常用于表示函数、变量等的名称
  3. 例如:_abc,$abc,abc,abc123是标识符,而1abc不是
  4. JavaScript语言中代表特定含义的词称为保留字,不允许程序再定义为标识符

2.3JS的数据类型

/*       
        number     -----  数值
        boolean    -----  布尔值
        string     -----  字符串
        undefined  -----  undefined
        null       -----   null  
      
 *

 2.4运算符

算术运算符:
    +   -    *    /     %       ++        -- 

比较运算符:
    >   >=   <    <=    !=    ==    ===   !==

逻辑运算符:
     &&   ||   !

赋值运算符:
    =  +=   -=  *=   /=

字符串运算符:
    +  连接,两边操作数有一个或两个是字符串就做连接运算

 2.4.1算数运算符

注意1: 自加自减

假如x=2,那么x++表达式执行后的值为3,x--表达式执行后的值为1;i++相当于i=i+1,i--相当于i=i-1;
递增和递减运算符可以放在变量前也可以放在变量后:--i

var i=10;
console.log(i++);
console.log(i);
console.log(++i);
console.log(i);
console.log(i--);
console.log(--i);

 注意2: 单元运算符

- 除了可以表示减号还可以表示负号  例如:x=-y
+ 除了可以表示加法运算还可以用于字符串的连接  例如:"abc"+"def"="abcdef"

注意3:

var d="yuan";
    d=+d;
    alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
    alert(typeof(d));//Number

    //NaN特点:
    
    var n=NaN;
alert(n>3); alert(n<3); alert(n==3); alert(n==NaN); alert(n!=NaN);//NaN参与的所有的运算都是false,除了!=

 2.4.2比较运算符

>   >=   <    <=    !=    ==    ===   !==

 用于控制语句时:

        if (2>1){
            console.log("条件成立!")
        }

 等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同,只是它们在检查相等性前,不执行类型转换。

console.log(2==2);
console.log(2=="2");
console.log(2==="2");
console.log(2!=="2");

 注意1:

技术分享
var bResult = "Blue" < "alpha";
alert(bResult); //输出 true  
在上面的例子中,字符串 "Blue" 小于 "alpha",因为字母 B 的字符代码是 66,字母 a 的字符代码是 97。

比较数字和字符串

另一种棘手的状况发生在比较两个字符串形式的数字时,比如:

var bResult = "25" < "3";
alert(bResult); //输出 "true"
上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串,所以比较的是它们的字符代码("2" 的字符代码是 50,"3" 的字符代码是 51)。

不过,如果把某个运算数该为数字,那么结果就有趣了:

var bResult = "25" < 3;
alert(bResult); //输出 "false"

这里,字符串 "25" 将被转换成数字 25,然后与数字 3 进行比较,结果不出所料。

总结:

比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.
比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.
View Code

注意2:

技术分享
等性运算符:执行类型转换的规则如下:

如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。 
如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。 
如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。 
如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。 
在比较时,该运算符还遵守下列规则:

值 null 和 undefined 相等。 
在检查相等性时,不能把 null 和 undefined 转换成其他值。 
如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。 
如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。
View Code

2.4.3逻辑运算符

if (2>1 && [1,2]){
    console.log("条件与")
}

console.log(1 && 3);//3
console.log(0 && 3);//0
console.log(0 || 3);//3
console.log(2 || 3);//2

 2.5流程控制

  • 顺序结构(从上向下顺序执行)
  • 分支结构
  • 循环结构

2.5.1顺序结构

    <script>
        console.log(“星期一”);
        console.log(“星期二”);
        console.log(“星期三”);
    </script>

 2.5.2分支结构

if-else结构:

if (表达式){
   语句1;
   ......
   } else{
   语句2;
   .....
   }

 功能说明:如果表达式的值为true则执行语句1,否则执行语句2

示例:

技术分享
var x= (new Date().getDay());
//获取今天的星期值,0为星期天
var y;
if ((x==6) || (x==0)){
    y="周末";
}else{
    y="工作日"
}
console.log(y);
// 等价于
y="工作日"
if ((x==6) || (y==0)){
   y="周末";
}
console.log(y);
View Code

 if-elif-else结构:

if (表达式1) {
    语句1;
}else if (表达式2){
    语句2;
}else if (表达式3){
    语句3;
} else{
    语句4;
}

 示例:

技术分享
var score=window.prompt("您的分数:")
if (score>90){
    ret="优秀"
}else if (score>80){
    ret="优良"
}else if (score>60){
    ret="及格"
}else {
    ret="不及格"
}
alert(ret)
View Code

 switch-case结构

switch基本格式
switch (表达式) {
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}

 技术分享

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script>
function myFunction(){
	var x;
	var d=new Date().getDay();
	switch (d){
  		case 0:x="今天是星期日";
    	break;
 		case 1:x="今天是星期一";
        break;
  		case 2:x="今天是星期二";
        break;
        case 3:x="今天是星期三";
   	 	break;
  		case 4:x="今天是星期四";
    	break;
  		case 5:x="今天是星期五";
        break;
  		case 6:x="今天是星期六";
    	break;
 	}
	document.getElementById("demo").innerHTML=x;
}
</script>
</head>
<body>
    <p>点击下面的按钮,会显示出基于今日日期的消息:</p>
    <button onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
</body>
</html>

 switch比else if结构更加简洁清晰,使程序可读性更强,效率更高。

2.5.2循环结构

技术分享

for循环:

语法规则:

    for(初始表达式;条件表达式;自增或自减)
    {
            执行语句
            ……
    }

 功能说明:实现条件循环,当条件成立时,执行语句1,否则跳出循环体。

for循环的另一种形式:

for( 变量 in 数组或对象)
    {
        执行语句
        ……
    }

while循环:

语法规则:

while (条件){
    语句1;
    ...
}

 功能说明:运行功能和for类似,当条件成立循环执行语句花括号{}内的语句,否则跳出循环;同样支持continue与break语句。

示例:

var i=1;
while (i<=7) {
    document.write("<H"+i+">hello</H "+i+"> ");
    document.write("<br>");
    i++;
}
//循环输出H1到H7的字体大小

 2.5.3异常处理

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

 注:主动抛出异常 throw Error(‘xxxx‘)

前端基础之JavaScript

标签:如何   image   划线   大小   检查   nbsp   sed   原型   charset   

原文地址:http://www.cnblogs.com/Crazy-lyl/p/7261000.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!