javascript学习-基础语法和结构的使用

Web前端有三层：

• HTML：从语义的角度，描述页面结构

• CSS：从审美的角度，描述样式（美化页面）

• JavaScript：从交互的角度，描述行为（提升用户体验）

JavaScript和ECMAScript的关系

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定的标准。

JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。

简单来说，ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。就是说，你JavaScript学完了，Flash中的程序也就轻而易举了。

ECMAScript在2015年6月，发布了ECMAScript 6版本，语言的能力更强（也包含了很多新特性）。但是，浏览器的厂商不能那么快去追上这个标准。

 

ECMAScript 6 是现行常用版本:学习地址如下:

http://es6.ruanyifeng.com/

 

JavaScript的组成

JavaScript基础分为三个部分：

• ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

• DOM：操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

• BOM：操作浏览器部分功能的API。比如让浏览器自动滚动。

PS：JS机械重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动。

 

JavaScript的特点

（1）简单易用：可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。

（2）解释执行（解释语言）：事先不编译、逐行执行、无需进行严格的变量声明。

（3）基于对象：内置大量现成对象，编写少量程序可以完成目标

 

语法规则

 

学习程序，是有规律可循的，就是程序是有相同的部分，这些部分就是一种规定，不能更改，我们成为：语法。

（1）JavaScript对换行、缩进、空格不敏感。

      备注：每一条语句末尾要加上分号，虽然分号不是必须加的，但是为了程序今后要压缩，如果不加分号，压缩之后将不能运行。

（2）所有的符号，都是英语的。比如括号、引号、分号。

（3）JavaScript的注释：

单行注释：

// 我是注释

　　多行注释：　

/*
    多行注释1
    多行注释2
*/

备注：sublime中，单行注释的快捷键是ctrl+/，多行注释的快捷键是ctrl+shift+/。

 

 

javascrip代码:

具体使用就是在html的body标签里面加入

<script type="text/javascript">

//这里面写入js的代码.

</script>

 1.alert使用(就是让浏览器弹出一个警告框,弹出的内容是alert()里面的输入.)

示例如下:

    <script type="text/javascript"> 
    alert("你好,很高兴认识你")
        </script>

运行效果如下:

2.js的输出语句(console.log()):

console.log("这是输出,相当于python里的print")

使用示例:

    <script type="text/javascript"> 
    // alert("你好,很高兴认识你")
    console.log("nihao");

    </script>

 

3.js的用户输入语句prompt()相当于python的input:

语法是

a = prompt("帅哥,请输入你的内容:")

console.log(a)

//上面的语句是用户输入后并在控制台输出的.

    <script type="text/javascript"> 
    // alert("你好,很高兴认识你")
    // console.log("nihao");
    a = prompt("帅哥,请输入吧:");
    console.log(a);

    </script>

 

 

直接量：数字和字符串

直接量”即常量，也称为“字面量”。看见什么，它就是什么。

简单的直接量有2种：数字、字符串。

（1）数值的直接量的表达非常简单，写上去就行了，不需要任何的符号。例如：

alert(886);  //886是数字，所以不需要加引号。

（2）字符串也很简单，但一定要加上引号。可以是单词、句子等。

 

 

变量:

变量的定义和赋值

 

var是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”，

• 定义变量：var就是一个关键字，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。

• 变量的赋值：等号表示赋值，将等号右边的值，赋给左边的变量。

• 变量名：我们可以给变量任意的取名字。

 PS：在JavaScript中，永远都是用var来定义变量，这和C、Java等语言不同(有兴趣的同学可以看一下es6)

变量要先定义，才能使用。比如，我们不设置变量，直接输出：

 

 <script type="text/javascript">
        console.log(a);
  </script>

控制台将会报错：

正确写法：

  var a;   // 定义
    a = 100;  //赋值
    console.log(a);  //输出100

有经验的程序员，会把定义和赋值:

var a = 100;    //定义，并且赋值100
console.log(a);  //输出100

变量的命名规范

变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。

下列的单词，叫做保留字，就是说不允许当做变量名，不用记：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

大写字母是可以使用的，并且大小写敏感。也就是说A和a是两个变量。

    var A = 250;    //变量1
    var a = 888;    //变量2

变量的类型:

变量里面能够存储数字、字符串等。变量会自动的根据存储内容的类型不同，来决定自己的类型。

1. 数值型:

如果一个变量中，存放了数字，那么这个变量就是数值型的.下面是示例:

    <script type="text/javascript"> 
    // alert("你好,很高兴认识你")
    // console.log("nihao");
    var a ;
    a = prompt("帅哥,请输入吧:");
    console.log(a);

    var b = 100;
    console.log(b);
    console.log(typeof b)
    </script>

查看变量的类型是typeof 加变量

typeof 变量

在JavaScript中，只要是数，就是数值型(number)的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是number类型的。

2.字符串类型 string

用双引号扩起来的都是字符串类型.

示例如下:

    <script type="text/javascript"> 
    // alert("你好,很高兴认识你")
    // console.log("nihao");
/*    var a ;
    // a = prompt("帅哥,请输入吧:");
    console.log(a);

    var b = 100;
    console.log(b);
    console.log(typeof b);
    c = typeof b ;
    console.log(c)*/
    var a = "leon";
    var b = "roy";
    var c = "ben";
    console.log(typeof a)
    console.log(typeof b)
    console.log(typeof c )
    </script>

3. 连字符和加好的区别

 键盘上的+可能是连字符，也可能是数字的加号。如下：

    var a = "123";
    var b = "456";
    var c = 123;
    d = a + b;
    console.log(d);
    e = a + c ;
    console.log(e);
    var f = 200;
    i = f + c;
    console.log(i)

    </script>

总结:如果加号两边都是数值，此时是加。否则，就是连字符（用来连接字符串）。

如果一边是数值一边是字符,那么最后是字符.

 

4.赋值

语句:

a = b ;

把b的值赋值给a.b的值不变化.

如下有个特殊的例子:

    var a = "100";
    var b = 12;
    c = a -b 
    console.log(c)

效果：（注意，字符串 - 数值 = 数值）

 5. 变量格式转换

把用户的输入转换成整数类型的.

parseInt()

比如如下示例:

    a = prompt("请输入你的值")

    console.log(a,typeof a)
    b = parseInt(a)
    console.log(b,typeof b )
        </script>

上面的代码是把输入的字符转成整数类型.如果输入的是字符型的话,那么转成的b值会为NaN,类型为number

另外:parseInt()还具有以下特性：

1）带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。例如：

直接用上面的代码就可以测试出来.注意必须数字在开头才可以,在其他位置会是NaN.

2）自动带有截断小数的功能：取整，不四舍五入。

比如下面的代码结果是10

    var a = parseInt(5.8 + 4.7);
     console.log(a);

 

 

3.数据类型

数据类型包括：基本数据类型和引用数据类型.

基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象。

当我们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值还是引用类型值

 

1)基本数据类型有以下几种

number ,string ,boolean,null ,undefined

各种数据类型使用说明如下:

<script type="text/javascript">
  var a = 100;
  console.log(typeof a )
  b = 5/0
  console.log(b,typeof b )
    
</script>

/*
注意这里面的b的值,b的值为Infinity ,这个表示无穷大的意思.


*/

 

string类型:

<script type="text/javascript">
    var s  = "leon";
    console.log(s,typeof s);
    
</script>

boolean类型.

注意所有的空类型都为false,并且js里的true和false是小写.

<script type="text/javascript">
    var s  = false;
    console.log(s,typeof s );

</script>

null类型

<script type="text/javascript">
    var s  = null ;
    console.log(s,typeof s );

</script>

undefined 表示变量没有定义.

<script type="text/javascript">
    var s  ;
    console.log(s,typeof s );

</script>

注意这里是值未定义和类型也是未定义.

 

2.引用数据类型

包括以下几种.

• Function
• Object
• Arrray
• String
• Date

4.运算符

js中的运算符跟python中的运算符有点类似，但也有不同。所谓运算,在数学上，是一种行为，通过已知量的可能的组合，获得新的量。

1.赋值运算符

以var x = 12,y=5来演示示例|

 

 

2.算数运算符

var a = 5,b=2

 

3.比较运算符

 

var x = 5;

 

 

 

05-数据类型转换

语言中我们的数据类型有很多，在某个页面中展示的数据类型也不同，比如说电话号码我就要求number的类型，而输入姓名的时候就要求string类型的。那么在适当的情况下我们可以将数据类型进行转换。

 

1.将数值类型转换成字符串类型

隐式转换

var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隐式转换
console.log(typeof n3);

强制类型转换

用String()来实现的.

示例如下:

    var n1 = 123;
    var str1 = String(n1);
    console.log(str1 ,typeof str1);

也可以这样用:

n1.toString()

示例如下:

    var n1 = 123;
    var str1 = String(n1);
    console.log(str1 ,typeof str1);
    b = n1.toString()
    console.log(b,typeof b)

2.将字符串类型转换成数值类型

可以用Number()这个方法来强转.

注意如果是字符的话,会发现值是NaN,但是类型是"number"

示例代码是:

<script type="text/javascript">
  var strnum = "780walkj"
  var num2 = Number(strnum)
  console.log(num2,typeof num2)
</script>

也可以用parseInt()或者parseFloat()这个来转换.

示例代码如下:

<script type="text/javascript">
  var strnum = "780.123walkj"
  var num2 = Number(strnum)
  console.log(num2,typeof num2)
  console.log(parseInt(strnum),typeof parseInt(strnum) )
  console.log(parseFloat(strnum),typeof parseFloat(strnum));
</script>

3.任何数据类型都可以转换为boolean类型

var b1 = '123';
var b2 = 0;
var b3 = -123

var b4 = Infinity; 
var b5 = NaN;  //这个是false

var b6; //undefined  //这个执行也是false
var b7 = null;

// 非0既真
console.log(Boolean(b7))

 

 

 

06-流程控制

主要有if ,for,while ,do while ,switch ,

1.if 

分为if ,if else ,if elseif elseif  else

示例如下:

if 

    <script type="text/javascript">
        var a = 18;
        if (a > 17){
            console.log("大于17")
        }
        alert("leon is a good boy")

    </script>

 

 if else:

 

    <script type="text/javascript">
        var a = 13;
        if (a > 17){
            console.log("大于17")
        }else{
            console.log("小鱼17")
        }
        alert("leon is a good boy")

    </script>

 

if else if 

    <script type="text/javascript">
        var a = 17;
        if (a > 20){
            console.log("大于20")
        }else if(a < 20 && a> 17 ){
            console.log("大于17小于20")
        }else if(a < 17 ){
            console.log("小鱼17")
        }else{
            console.log("17")
        }
        alert("leon is a good boy")

    </script>

2.逻辑与&&、逻辑或||

//1.模拟  如果总分 >400 并且数学成绩 >89分 被清华大学录入
//逻辑与&& 两个条件都成立的时候 才成立
if(sum>400 && math>90){
    console.log('清华大学录入成功')
}else{
    alert('高考失利')
}

//2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入
//逻辑或  只有有一个条件成立的时候 才成立
if(sum>500 || english>85){
    alert('被复旦大学录入')
}else{
    alert('高考又失利了')
}

 

3.switch

case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，
那么直到该程序遇到下一个break停止.
示例:

    <script type="text/javascript">
        a = prompt("请输入你的值")
        switch(a){
            case "leon":
            console.log("leon is a good boy!")
            break;
            case "ben":
            console.log("ben is a good man")
            break;
            default:
            console.log("i am very sorry")
        }
    </script>

4.while循环

循环三步走：

1.初始化循环变量

2.判断循环条件

3.更新循环变量

示例:

    <script type= "text/javascript">
        var a = 1 ;
        while(a<9){
            console.log(a);
            a++
        }
    </script>

下面是取100以内的偶数:

    <script type= "text/javascript">
        var a = 1  ;
        while(a < 100 ){
            
            
            if(a%2 == 0 ){
                console.log(a);
            }
            a = a +1
        }
    </script>

5. do_while

//不管有没有满足while中的条件do里面的代码都会走一次
var i = 3;//初始化循环变量
do{

    console.log(i)
    i++;//更新循环条件

}while (i<10) //判断循环条件

6.for循环

for循环示例:

    <script type="text/javascript">
        for(var i= 0; i<10;i++){
            console.log(i)
            
        }
    </script>

下面是100以内的数之和:

<script type="text/javascript">
    var sum = 0;
    for (var i = 0 ;i<100;i++){
        sum += i
    }
    console.log(sum)
</script>

双重for循环

    <script type="text/javascript">
        for(var i = 1 ;i<=3 ;i++){
            for(var j = 0 ;j<6 ;j++){
                document.write("*")
            }
            document.write("<br>")
        }
    </script>

用双层for写直角三角形.示例代码如下:

    <script type="text/javascript">
        for(var i =1 ;i<=6 ;i++){
            for(var j=1 ;j<=i;j++){
                document.write("*")
            }
            document.write("<br>")
        }
    </script>

写一个等腰三角形的示例:

    <script type="text/javascript">
        for(var i = 1 ;i<=6;i++){
            for(var s = i;s<6;s++){
                document.write("&nbsp")

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

 

07-常用内置对象

所谓内置对象就是ECMAScript提供出来的一些对象，我们知道对象都是有相应的属性和方法

包括数组,array,字符串string,date日期对象.math内置对象.