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

JavaScript基础介绍

时间:2018-10-18 10:56:02      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:spl   rip   列表   面向对象   boolean   规范   lag   join   文件路径   

JavaScript简单介绍

 技术分享图片
1、JavaScript的简介
是基于对象和事件驱动的语言,应用与客户端。
- 基于对象:提供的对象可直接拿过来使用
- 事件驱动:html做网站静态效果,JavaScript动态效果
- 客户端: 专门指的是浏览器
JavaScrip的特点
(1)交互性:信息的动态交互
(2)安全性:js不能访问本地磁盘
(3)跨平台性:支持JavaScript的浏览器都可运行
JavaScrip和Java的区别
(1)Java是sun公司,被oracle收购;js是网景公司
(2)JavaScript是基于对象,Java是面向对象
(3)Java是强类型的语言,JavaScript是弱类型的语言
 - java int i = 10;
 - js var i = 10; var m = "10";
(4)JavaScript只需要解析就可以执行,而Java需要先编译成字节码文件在执行
JavaScrip组成(三部分)
(1)ECMAScript
 - ECMA:欧洲计算机协会
 - 有ECMA组织制定的js的语法,语句...
(2)BOM
 - broswer object model:浏览器对象模型
(3)DOM
 - document object model:文档对象模型
script标签放在的位置
建议把script标签放到 </body>后面,这是一种默认的规范。
如果现在有这样一个需求:
 在js里面需要获取到input里面的值,如果把script标签放到head里面会出现问题。
html解析是从上到下解析的,script标签放到的是head里面,直接在里面取input里面的值,因为页面还没有解析到input那一行,肯定取不到。

2、js和html结合方式(两种)
第一种:使用一个<script >标签【通常放在body标签后】
<script type="text/javascript">
  JavaScript代码;
</script>
技术分享图片

第二种:使用script标签,引入一个外部的js文件
<script type="text/javascript" src="JavaScript文件路径" ></script>【使用第二种就不需要再script标签里写代码,不会被执行】
技术分享图片

3、js的原始类型和声明变量
java:byte short int long float double char boolean
js原始类型(五个)
- string:字符串
 var str = "abc";
- number:数字类型
 var m = 132;
- boolean:true or false
 var flag = true;
- null
 var date = new Date();
 获取对象的引用,null表示对象引用为空,所有对象的引用也是object
- undifined
定义一个变量没有被赋值
var aa;
 typeof(变量名称);查看变量数据类型

<script type="text/javascript">
    // 定义一个字符串
    var str="132";
    alert(str);

    // 定义数字
    var mm=123;
    alert(mm);

    // 定义boolean
    var flag=true;

    alert(typeof(flag));
</script>

4、js语句
if判断语句
switch语句
循环语句 for while do-while

技术分享图片
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8     </body>
 9     <script type="text/javascript">
10         // if语句
11         /*var a = 7;
12         if (a == 5) {
13             alert(a);
14         } else{
15             alert("6");
16         }*/
17         
18         // switch语句
19         /*var b=8;
20         switch (b){
21             case 5:
22                 alert(b);
23                 break;
24             case 8:
25                 alert(b);
26                 break;
27             default:
28                 alert("other");
29         }*/
30         
31         // while循环
32         /*var i = 5;
33         while (i>1){
34             alert(i);
35             i--;
36         }*/
37         
38         //for循环
39         for (var i=0;i<=3;i++) {
40             alert(i);
41         }
42         
43     </script>
44 </html>
View Code

练习 实现99乘法表输出到页面上

技术分享图片
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8     </body>
 9     <script type="text/javascript">
10         document.write("<table border=‘1‘ bordercolor=‘blue‘>");
11         // 循环行
12         for (var i=1;i<=9;i++) {
13             document.write("<tr>");
14             // 循环列
15             for (var j=1;j<=i;j++) {
16                 document.write("<td>");
17                 // 运算
18                 document.write(j+"*"+i+"="+i*j);
19                 document.write("</td>");                
20             }
21             document.write("</tr>");
22         }
23         document.write("</table>")
24     </script>
25 </html>
View Code

技术分享图片

5、js的运算符
不区分整数和小数

1 var j = 123;
2 alert(j/1000*1000);//123
3 // j/1000*1000   在Java里得到结果0
4 // 在js里不区分整数和小数,123/1000=0.123*1000=123

字符串相加减操作

1 // 字符串的操作
2 var str="abc";
3 alert(str+1); //abc1 相加时做字符串连接操作
4 alert(str-1);   //NaN(表示不是一个数字) 相减时做减法运算 

boolean操作
设置成true,相当于这个值是1
设置成false,相当于这个值是0

// boolean操作[true=1,false=0]
var flag = true; 
alert(flag+1);//1+1=2
var flag = false; 
alert(flag+1);// 0+1=1

== 和 === 区别
===:先比较数据的类型再比较数据的值,若数据类型不一致,则为false
==:先比较数据的类型再比较数据的值,若数据类型不一致,如果发现类型不一致都会向number转型再比较
测试数据:

1 var a = 1;
2 var b = true; 
3 var c = ‘true‘;
4 var d = "true";
5 var e = "1";

测试结果:

 1 alert(a===b); //false
 2 alert(a===c); //false
 3 alert(b===c); //false
 4 alert(c===d); //true
 5 alert(a===e); //false
 6 
 7 alert(a==b); // true
 8 alert(a==c); // false
 9 alert(b==c); // false
10 alert(c==d); // true
11 alert(a==e); // true

字符串和数字布尔相加
1:字符串和其他类型相加都会同化成字符串
2:数字和boolean类型相加都会同化成数字

1 var varstr = "abc";
2 var varnum = 123;
3 var varbool = true;
4 alert(varstr+varnum+varbool); //abc123true
5 alert(varnum+varbool+varstr); //124abc
6 alert(varbool+varnum+varstr); //124abc

++ --

1 var a = 100;
2 alert(a++); //100
3 alert(a--); //101
4 alert(++a); //101
5 alert(--a); //100
6 alert(a);//100    

** 引入知识
直接向页面输出的语句(可把内容显示在页面上)
document.write("aaaa");
document.write("<br/>");
document.write("bbbb");
document.write("<hr/>");
*可以向页面输出固定值和html代码

6、js数组 [数组可存放不同数据类型的数据]
1:定义数组方式(三种)
第一种:var arr=[1,2,3]; var arr=[1,"2",true];

1 var arr=[1,2,"3",new Date];
2 alert(arr);

第二种:使用内置对象 Array对象

1 var arr = new Array(3);//定义长度为3的数组
2 arr[0]="a";
3 arr[1]="b";
4 arr[2]="c";
5 alert(arr);

第三种:使用内置对象 Array

1 var arr = new Array(2,4,5);//定义数组并直接赋元素
2 alert(arr);

2:数组的属性 length 长度

1 var array01 = new Array(10);
2 var array02 = [123,"abc",new Date(),true];
3 var varlength1 = array01.length;
4 var varlength2 = array02.length;
5 alert(varlength1);//10
6 alert(varlength2);//4

3:可以通过修改数组的长度来达到删除数组的目的

1 var array = [123,"abc",new Date(),true];
2 array.length = 2;
3 alert(array);//123,abc /*new Date(),true被删除*/
4 array.length = 4;//当长度指定为4时候,不够以,,补齐
5 alert(array);//123,abc,,

4:数组的方法 
 数组名.push("新添加的元素");//数组末尾添加一个新元素 

1 var array = [123,"abc",true];
2 array.push("hello");
3 alert(array);//123,abc,true,hello

 数组名.pop(); //删除数组最后一个项  

1 var array = [123,"abc",true];
2 array.pop();
3 alert(array);//123,abc

 数组名.unshift("添加的元素");//在数组第一个元素位置添加元素 

1 var array = [123,"abc",true];
2 array.unshift("aa");
3 alert(array);//aa,123,abc,true

 数组名.shift();//删除数组第一个元素 

1 var array = [123,"abc",true];
2 array.shift();
3 alert(array);//abc,true
4 //数组名.join();//连接所有   
5 alert(array.join("-"));//abc-true

5:遍历数组的两种方式

1 //for
2 var array = [123,"abc",true];
3 for(var i=0;i<array.length;i++){
4 alert(array[i]);
5 }    
6 //for in
7 for(var i in array){
8 alert(array[i]);
9 }

可参照W3school:Array对象方法进行详细参照学习

7、js函数(三种方式)
函数的参数列表里不需要写var,直接写参数名称
第一种:使用关键字function
function 方法名(参数列表){
 //方法体;
 返回值;//可有可无(根据实际需求)
}

技术分享图片
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <input type="button" value="test01" onclick="test01()"/>
 9         <input type="button" value="test02" onclick="add(2,3)"/>
10     </body>
11     <script type="text/javascript">
12         // 定义一个无参的方法
13         function test01(){
14             alert("function")
15         }
16         // 定义一个有参的方法,实现两个数相加
17         function add (a,b) {
18             var sum = a + b;
19             alert(sum);//5
20         }
21         //定义一个有参的方法:有返回值得效果
22         function add3 (a,b,c) {
23             var sum = a + b + c;
24             return sum;
25         }
26         alert(add3(1,2,3));//6
27     </script>
28 </html>
View Code

第二种:匿名函数【函数相当于匿名函数,add指向对象】
var add = function(参数列表){
  方法体和返回值;
}

1 <body>
2     <input type="button" value="test" onclick="add(1,5)" />
3 </body>
4 <script type="text/javascript">
5     var add = function(m,n){
6     alert(m+n);
7     return add;
8     }
9 </script>

第三种:(几乎不用,了解。为了说明函数也是对象 (形参,形参,代码块)
*** 使用到js里面的一个内置对象 Function
var add = new function("参数列表","方法体和返回值");
// 第三种方式创建
var add = new Function("x,y","var sum;sum=x+y;return sum;");
技术分享图片

8、js全局变量和局部变量
全局变量:在script标签里定义一个变量,这个变量在页面中js部分都可以使用
 - 在方法外部使用,在方法内部使用,在另一个script标签使用
技术分享图片

局部变量:在方法内部定义一个变量,只能在方法内部使用
 - 如果在方法外部调用这个变量,提示出错
 - SCRIPT5009:"n"未定义
 - 调试工具,F12
技术分享图片
9、函数的重载

 1 function add (a,b) {
 2     return a+b;
 3 }
 4 function add (a,b,c) {
 5     return a+b+c;
 6 }
 7 function add (a,b,c,d) {
 8     return a+b+c+d;
 9 }
10         
11 alert(add(2,2));// NaN
12 alert(add(3,2,2));// NaN
13 alert(add(2,3,2,2));// 9

 

JavaScript基础介绍

标签:spl   rip   列表   面向对象   boolean   规范   lag   join   文件路径   

原文地址:https://www.cnblogs.com/cao-yin/p/9806247.html

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