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 = "12345";//此时a是String类型
    a = parseInt(a);//利用系统强制转换；此时的a是number型

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

3.运算符

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

注意：

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

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

  1 <script>
  2 var a = 10;
  3 var b = 8;
  4 if(a % b == 0){
  5     alert("我是能够整除的结果！");
  6 }else{
  7     alert("我是不能够整除的结果！");
  8 }
  9 //注意：两个数相取模的结果。
 10 alert(10 % 8);//结果为2
 11 alert(8 % 10);//结果为8
 12 alert(90.6 % 8);//结果为25.9999999
 13 </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.算术运算符

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

大家看案例就明白了

  1 var a = 10;
  2     a += 5;
  3 alert(a);//结果是a = a + 5：是15
  4 
  5 var b = 90;
  6     b -= a;//结果是b = b - a：是75
  7 alert(b);
  8 
  9 //思考？
 10 var a = 56;
 11 var b = 90;
 12 a -= 34;
 13 b %= a;
 14 alert(a);//结果是多少？
 15 alert(b);//结果是多少？

案例

posted on 2016-12-13 21:55 jayafs 阅读(160) 评论(0) 编辑收藏举报

刷新页面返回顶部

手里有糖