javascript学习

代码放在E:\JS\js学习

学习中要学会多查手册

javascript基本介绍

js是用于web开发的脚本语言。
后面统称为 js

脚本语言是什么？

脚本语言不能独立使用，它和html/jsp/php/asp/asp.net等配合使用。
脚本语言有自己的变量，函数，控制语句(顺序，分支，循环)。
脚本语言实际上是解释性语言(说白了：在执行的时候直接对源码进行执行，不用对源码进行转化)。
javascript执行引擎：-->浏览器(js引擎来解释执行的)。

解释性语言和编译语言的区别？

编译语言执行效率高。

js 在客户端与浏览器之间的执行原理：

总结：

js会随着请求返回的页面一起返回，在本地计算机上的浏览器上执行。

第一个程序hello world(万变不离其宗；学语言的基本)

案例一：

需求：打开网页后；显示 hello world！

<!DOCTYPE html><!-- 开头声明文档类型(为html文档：html5的写法) -->

<html>

<head>

<meta charset="utf-8"><!-- 设置编写代码格式，不写容易被浏览器解析的时候乱码 -->

<!-- js代码一般是放在head标签间，单实际上也可以放在别的位置 -->

<script type="text/javascript">

    window.alert("hello world");

</script>

</head>

<body>

</body>

</html>

问题：

1. js的位置？

js的位置可以随意；我们在页面中的代码；一般对应js功能写在对应代码后面；外部引入的一般加在最后面。这样利于页面的加载。

2. js代码要包含在<script></script>标签里面；

问题：如果不包含在里面结果会怎样？

代码会被当做文本输入。

3. 当页面中有多个<script></script>标签包含的代码的时候；会按从上到下的顺序依次执行

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<script type="text/javascript">

    window.alert("hello world1");//我第一个先执行

</script>

<script type="text/javascript">

    window.alert("hello world2");//当第一个执行完了我第二个执行

</script>

<script type="text/javascript">

    window.alert("hello world3");//当第二个执行完了我第三个执行

</script>

</body>

</html>

案例二：

需求：对程序改进，让程序成为一个简单的加法运算。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<script>

    //js中变量的表示 var，不管实际类型；

    var num1 = 45;

    var num2 = 89;

    var result = num1 + num2;

    window.alert("结果是：" + result);

</script>

</body>

</html>

总结：

在js中所有的变量都是有 var 表示的；不管实际类型。

从结果我们直到；字符串和数字相加(" + ")；会自动将数字转换成字符串然后字符串间进行拼接。

alert:属于window对象；我们查手册；对其的描述

问题：为什么需要变量？js中变量的数据类型是由什么决定的那？

1. 不论那种语言；都有变量。变量是程序的基本组成单位；
2. js是弱数据类型语言。-->针对强数据类型而言的；比如 java；

问题：什么是弱数据类型语言？

解释：在定义变量的时候；统一由 var 表示；甚至可以去掉 var 这个关键字。

<script>

    num1 = 45;

    num2 = 89;

    result = num1 + num2;

    window.alert("结果是：" + result);

</script>

上面这段代码，在html页面中的执行结果和上面加了 var 的代码执行结果一样；但是他们还是有区别的；后面在分析。

3. 那是不是说明js没有数据类型那？如果有的话；由什么决定的那？

a. 是有数据类型的。

b. 数据类型的决定是由 js 引擎决定的。

var name = "haha";//此时js引擎会认为name是字符串类型

    var kk = 2；//此时js引擎认为kk是数字类型

    var yy //js引擎会认为yy是undefined

    //如果此时重新定义name

    name = 123;//这时name会自动变成数字类型。

    //不声明变量直接使用

    x = 64；//这样定义也可以使用

js的基本语法

一 js标识符

js中定义的符号：如变量名，函数名，数组名等；
标识符由任意顺序的大小写字母，数字，下划线(_)和美元符($)组成。
但那时不能以数字开头。
不能使用js中的保留，关键字。可查文档；javascript保留字，javascript关键字。关键字-->现在已经在用的；保留字-->现在没用以后可能用而保留起来的。
js中是严格区分大小写的。num = 2 和 Num = 2；不是同一个变量。(html标签不区分大小写)
每条功能执行语句的最后必须用分号(英文输入法下的分号" ; " )结束。
每个词之间用空格，制表符，换行符或者大括号，这样的分隔符隔开。
语句块用 { } 来表示。
为了美观注意js的书写格式。保证代码的可读性和实用性。

二 js注释

1. 单行注释： // 要注释的单行注释代码

2. 多行注释： /* 要注释的多行代码 */

三 js数据类型

问题：既然js是弱数据类型，能不能查看它的类型那？

通过 typeof 可以看到变量的具体数据类型是什么。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script>

    var v1 = "abc";

    var v2 = 89;

    window.alert("v1的数据类型：" + typeof v1); //结果在浏览器弹出：v1的数据类型：string

    window.alert("v2的数据类型：" + typeof v2); //结果在浏览器弹出:v2的数据类型：number

    v1 = 33;//体现js动态语言；变量随时可以变的

    window.alert("v1的数据类型：" + typeof v1); //结果在浏览器弹出:v1的数据类型：number

</script>

</head>

<body>

</body>

</html>

基本数据类型

1. Number:数字类型

整数常量(10进制/8进制/16进制)

16进制以0x或0X开头，如：0x8a = 8*16+10;那么0x28a = 2*16*16(16的2次方表示)+8*16+10
8进制必须以0开头，如：0123 = 3+2*8+1*8*8(8的2次方表示)
10进制的第一位不能是0(数字0除外)，如：123

var a = 10;

var b = 010;//当我们在10进制前面加0；看运算结果。 结果会将其转化为8进制再进行计算

var c = a+ b;

window.alert(c);//结果弹出18；这是转换为8进制的结果。

2. 实数类型(小数)

12.32，1.2，5E3(这个相当于5*10的3次方)等。

3. 特殊数值

NaN(not a number: 不是数值)，Infinity(无穷大)，isNaN()，isFinite()

var a ="abc";

alert(parseInt(a));//会弹出NaN

alert(6/0);//会弹出Infinity

说明：

isNaN()：判断一个值是不是数字：如果是数字；则返回 false；如果不是数字：则返回 true

isFinite()：判断一个值是不是无穷大，如果是返回 false，如果不是则返回 true

4. 布尔型

true/false

5. String字符串型

用英文输入法下单引号或者双引号包起来的。如："abc"，'javascript'，'123'，" "；如果字符串中有特殊字符，怎需要用反斜杠(\)后跟一个普通字符来表示，如：\r, \n, \b, \", \xxx；反斜杠(\)：转义字符

6. 复合数据类型

7. 特殊数据类型

针对特殊数据类型举例：

1. null： var a = null; // 浏览器会弹出对话框-->内容显示null

2. undefine:

window alert(tt); // 页面不声明 tt，直接使用 tt，浏览器会报错，控制台显示 tt is not undefine

var tt;

window.alert(tt);// 结果浏览器会弹出提示框-->提示框内容为 undefine

四、数据类型转换

问题：定义变量，初始化变量，赋值：

定义变量：var a; 这就是定义一个变量；变量名是 a

初始化变量：var a = 45；这就是初始化变量；在定义的时候；就给值

赋值：var a; a = 12; 先定义一个变量；然后给其值；这个然后的给值过程就叫赋值。

1. 自动转换

2. 强制转换

parseInt(要转化的值)：强制转换成整数；parseFloat(要转换的值)：强制转换成小数。

这个要转换的值必须数字开头。

var a = "";//此时a是String类型

    a = parseInt(a);//利用系统强制转换；此时的a是number型

var b = ;//表示number型

    b = b + "";//此时b是String型。这也是数值转换字符串的一种方式

3.运算符

+；-；*；/；%(取模，两个数相除后的余数)

注意：

+：如果是两个数之间用则是加法运算；如果其中含有字符串则是拼接(就是直接将将第二个数接在第一个后面)

练习：编写一个js程序判断2个数是不是能够整除？

 <script>

 var a = 10;

 var b = 8;

 if(a % b == 0){

     alert("我是能够整除的结果！");

 }else{

     alert("我是不能够整除的结果！");

 }

 //注意：两个数相取模的结果。

 alert(10 % 8);//结果为2

 alert(8 % 10);//结果为8

 alert(90.6 % 8);//结果为25.9999999

 </script>

练习

注意：

取模主要用于整数；从上面的例子可以看出；用在小数上没什么意义。

4. 算数运算符

++(自加) ； --(自减)

++：a ++ 等价于 a = a + 1
--：b -- 等价于 b = b - 1

思考：

var a = 50;

 var b = ++a; //等价于 a = a+1; b = a

 alert(a);//结果是多少？

 alert(b);结果是多少？

var c = 50;

 var d = c++; //等价于 d = c; c = c+1

 alert(c); //结果是多少？

 alert(d);//结果是多少？

总结：

b = a++ 和 b = a--：是a先赋值然后在自身加或者减；b = ++a 和 b = --a：是a先自身加或者减了；在赋值。

5.算术运算符

+=(左加)；-=(左减)；/=(左除)；%=(左取模)

大家看案例就明白了

 var a = 10;

     a += 5;

 alert(a);//结果是a = a + 5：是15

 var b = 90;

     b -= a;//结果是b = b - a：是75

 alert(b);

 //思考？

 var a = 56;

 var b = 90;

 a -= 34;

 b %= a;

 alert(a);//结果是多少？

 alert(b);//结果是多少？

案例