1. 首页
  2. JAVASCRIPT
  3. javascript入门

javascript入门

•javascript•阅读 4230

一、 JavaScript概述

1、 JavaScript是什么。有什么作用？（了解）

*JavaScript是因特网上最流行的脚本语言。

*脚本语言不能单独使用，必须嵌入到其它语言中组合使用

*JavaScript不能单独使用，必须和其它语言（HTML）结合使用

*浏览器解释运行

*作用是：能够控制前端页面的逻辑操作

比如：JS能够控制CSS的样式。（一般）

JS能够对表单项进行校验（重点）

JS能够对HTML元素进行动态控制（使用较多）

*特点：

安全性（没有訪问系统文件权限，无法用来做木马病毒）

跨平台性（浏览器有JS的解析器，仅仅要有浏览器就能执行JS代码，和平台无关）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
        
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <script type="text/javascript">
                var sum=0;// int sum=0;
                for(var i=1;i<=9;i++){// int i=1;
                        sum+=i;
                        alert(sum); //System.out.print(sum);
                }
                
        </script>
  </head>
        
  <body>
        
        
  </body>
</html>

2、 JavaScript和Java的关系（了解）

ECMAScript

*JavaScript和Java一点关系都没有（雷锋和雷峰塔）

*JavaScript和Java的差别：

>JavaScript代码能够直接在浏览器运行，而Java必须先经过编译才干运行

>JavaScript是弱类型语言，Java是强类型语言

强类型语言：要求变量的使用严格符合定义。（比如：变量声明后都有一个固定的区域，int区域大小是32位）。编程时痛苦，调BUG时舒服

弱类型语言：不要求变量的使用严格符合定义。

（比如：变量声明后没有一个固定的区域，不论什么类型的值都能放在该区域）。编程时舒服，调BUG时痛苦

<html>

<head>

<script>

var sum = 0;

for(var i = 1; i <= 100; i++) {

sum += i;

}

alert(sum);

</script>

</head>

<body>

</body>

</html>

二、JavaScript语法及使用(重点)

凝视

*单行凝视

//

Myeclipse快捷键 ctrl+shift+c

*多行凝视

/* */

Myeclipse快捷键 ctrl+shift+/

变量

*标示内存中的一块空间，用于存储数据，数据是可变的

*格式：

var 变量名 = 变量值;

JavaScript中的变量声明都用varkeyword

变量值的数据类型（原始数据类型和引用数据类型）

>原始数据类型:

string 字符串类型

“”和’’都表示字符串

boolean 布尔类型

true,false

number 数字类型

整数和小数

null 空。表示引用类型的对象不存在

undefined 没有定义

变量声明未赋值时使用/对象的属性未赋值时使用

注：变量就像一个盘子，什么都能盛装。

变量的类型能够用typeof()来推断。

比如:var str=”aa”;alert(typeof(str));//string

变量的大写和小写是敏感的，yy和YY不是一个变量。

为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。

如今，null 被觉得是对象的占位符。从而解释了这一矛盾，但从技术上来说。它仍然是原始值。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
        
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <script type="text/javascript">
                /* 
                        var 变量名=变量值;
                
                        原始数据类型：
                        string  字符串
                                        ""  ''都表示字符串
                                        
                        boolean 布尔类型
                                        true , false
                                        
                        number  数字
                                        整数和小数
                        
                        null    空。对象为空（引用为空）
                        
                        undefined       没有定义  变量没有赋值就使用/使用 对象.属性 的时候，属性没有赋值就使用
                        
                        //变量就是一个盘子，装什么东西都能够
                        
                        引用数据类型：
                        typeof()  帮咱们推断变量是什么类型的
                        
                        变量名命名是大写和小写敏感的（区分大写和小写）
                */
                /* var str = "aa";
                var str2 = 'aa';
                var str3 = true;//false
                var str4 = 15;
                var str5 = 15.55;
                var date = null;
                var aa;
                str =15;
                str = true;
                str = "aa";
                
                alert(str);//aa 15 */
                
                /* var str = "aa";
                str =15;//number
                //str = true;//boolean
                var ss;
                var obj= null;
                alert(typeof(obj)); */
                
                /* var sf="aa";
                alert(Sf); */
                
                /* 
                        引用数据类型
                        
                        经常使用对象：
                        String,Array,Date,Math,RegExp
                        
                        Object 全部对象的父对象
                        
                        
                */
                var date = new Date();
                alert(date instanceof Object);
        </script>
  </head>
        
  <body>
        
        
  </body>
</html>

>引用数据类型（了解）

即对象

比如：var obj = new Object();

经常使用对象：

String,Array,Date,Math,RegExp

注：instanceof能够用来推断对象是否属于某类型。

返回true和false .比如：

Var str = new String();

Alert(str instanceof String);//true

*两种变量：

>全局变量

就是在<script>标签中定义的变量，在整个页面都有效

>局部变量

就是在函数体内定义的变量

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
        
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <script type="text/javascript">
                /* 
                        全局变量
                        就是在script标签中的变量，对整个页面都有效
                
                        局部变量
                        就是在函数体中定义的变量
                */
                /* var str =10;
                
                for(var i=1;i<=3;i++){
                        
                }
                alert(i);//4 */
                
                /* function aa(){
                        var a=5;
                        alert(a);
                } */
                var x = 4;
                function show(x){
                x = 8;
                }
                show(x);
                alert("x = "+x);
                /* A.8   
                B.4   
                C.undefined */

        </script>
  </head>
        
  <body>
        
        
  </body>
</html>

练习：例如以下代码显示X值是多少？

var x = 4;

function show(x){

x = 8;

}

show(x);

alert("x = "+x);

A.8

B.4

C.undefined

函数（方法）

*用于代码封装，提高复用性

*格式 function 函数名(參数列表){

函数体;

return ;

}

*函数定义。keyword function

*定义參数列表时。不必使用varkeyword。否则报错

*假设没有须要返回的參数。return能够不写

*函数须要调用才干运行，和Java一样。

*JavaScript不存在重载形式：

>每一个JavaScript中。都存在一个数组arguments。用于存储參数列表

思考：例如以下调用方法会打印输出什么效果？

function getSum(){

return 100;

}

var sum = getSum;

alert(sum);

A. 100

B. undefined

C. function getSum(){return 100;}

*假设调用方法时忘记加()，那么会把函数对象的引用传给变量

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>函数.html</title>
        
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <script type="text/javascript">
                //用来做加法的方法  a b  a+b
                
                /* public int sum(int a,int b){
                        return a+b;
                        
                } */
                //JavaScript不定义返回值的类型
                //javascript 方法不存在重载
                        //由于在JavaScript方法中存在arguments隐藏对象（数组）。就是用来获取传进来的參数列表的
                //JavaScript中假设调用方法不加括号。那么会把方法（对象）的引用传出来
                /* function sum(a,b){
                        alert(arguments.length);
                        alert(arguments[0]);
                        alert(arguments[1]);
                        alert(arguments[2]);
//                      alert(a);
//                      alert(b);
                }
                sum(5,6,7); */
                function getSum(){
                        return 100;
                }
                        var sum = getSum;
                        alert(sum);

        </script>
  </head>
        
  <body>
    
  </body>
</html>

*两种扩展函数：

>动态函数（了解会用）

通过JS的内置对象Function来动态创建

格式： new Function(參数一,參数二);

參数一是函数形參列表

參数二是函数体

>匿名函数（较经常使用）

没有名称的函数。函数的简化形式

格式：var str = function(參数列表){

函数体;

return;

};

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
        
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <script type="text/javascript">
                /* 
                        动态函数(使用比較少)
                                Function 对象
                        匿名函数
                
                */
                /* var par = "a,b,c";
                var par2 = "return a+b+c";
                var str =new Function(par,par2);
                alert(str(1,2,3)); */
                
                var str=function(a,b){
                        return a+b;
                };
                alert(str(1,2));
        </script>
  </head>
        
  <body>
        
        
  </body>
</html>

运算符

算术运算符（经常使用）

+号除了运算外。能够作为连接符

-号除了运算外。能够作为转换符

alert(true + 1); // 2

比較运算符（经常使用）

== 比較值

=== 又比較值和类型语句（流程控制语句）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
        
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <script type="text/javascript">
                /* 
                        算术运算符
                        +       连接符
                        -       转换符
                        
                                NaN意思是不是数字
                        比較运算符
                        ==      仅仅是比較值。即使类型不同也没关系
                        ===     不仅比較值，也同一时候比較类型
                        
                */
                /* var str=15;
                var str2="1";
                alert(str+str2);//151 */
                /* var str =15;
                var str2 = "1";
                alert(str-str2);//14 151 */ 
                /* var str= 15;
                var str2="a";
                alert(str-str2);//NaN */
                /* var str=8;
                //alert(str==8);//true
                //alert(str=="8");//true
                alert(str===8);//true
                alert(str==="8");//false */
                /* var str = (8==8)?
8:0;
                alert(str); */
                
        </script>
  </head>
        
  <body>
        
        
  </body>
</html>

流程控制语句

对程序执行流程控制的表达式

n 推断语句

IF

if(8 == num){

赋值的问题。须要注意。

}else{

}

0、-0、null、""、false、undefined 或 NaN。为false

否则为true

和Java中一样。

switch(n)

{

case 1:

运行代码块 1

break

case 2:

运行代码块 2

break

default:

假设n即不是1也不是2，则运行此代码

}

练习：下面代码输出结果为：

var a=15;

if(a=15){

alert(15);

}else{

alert(“else”);

}

A. 15

B. Else

n 循环语句

For循环（较经常使用）

for(var i=0;i<=8;i++){

// 循环体

}

增强FOR循环（不灵活，使用少。但开发中会有使用）（了解会用，工作中自己进行尝试就可以）

for(变量 in 对象){

// 循环体

}

*里面的变量代表下标

*使用 inkeyword

*遍历数组（或对象），里面要用数组[下标]

* 比如：

Var s= new Array();

s[0]=1;

s[1]=2;

for(x in s){

alert(s[x]);

}

while(表达式){

// 循环体

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
        
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <script type="text/javascript">
                /* 
                        推断语句
                        IF
                        0、-0、null、""、false、undefined 或 NaN。为false
                        否则为true 
                        
                        FOR循环   var 
                                        99乘法表
                        while do while
                                
                        增强for
                */
                /* function str(){
                        return null;
                }
                var x=8;
                var aaaa=str();
                if(aaaa){
                        alert(1);//1
                }else{
                        alert("else");
                } */
                /* for(var i=0;i<3;i++){
                        
                } */
                /* if(-0){
                        alert(1);
                }else{
                        alert("eeee");
                } */
                
                var i=new Array();
                i[0]=1;
                i[1]=2;
                for(x in i){
                        alert(i[x]);
                }
        </script>
  </head>
        
  <body>
        
        
  </body>
</html>

对象

l String对象（了解会用）

* var str = "abc";

* var str = new String("abc");

* 属性：length 字符串的长度

* 方法

* 和java中String对象类似的方法（基本同样，须要练习）

* charAt(index) 返回指定位置的字符（经常使用）

* indexOf(searchvalue,fromindex) 检索字符串

* lastIndexOf() 从后向前的

* replace() 替换字符串（较经常使用）

* substring(start,stop) 从哪開始，到哪结合（包括開始不包括结束）

* substr(start,length) 从哪開始，截取长度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
        
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <script type="text/javascript">
                /* 
                        String对象
                        
                        var s = new String("aaa");
                        var s = "aaa";
                        
                        document.write();//会把值输出到浏览器页面上
                */
                /* var str ="abc";
                var str2 ="你好么";
                document.write(str2.blink());
                document.write(str2);
                document.write(str.charAt(1)); */
                var str = "ABC";
                document.write(str.toLowerCase());
                
        </script>
  </head>
        
  <body>
        
        
  </body>
</html>

l Array对象（重要）

* js的数组

* var arr = [1,2,3];

*var arr = new Array();数组长度默觉得0

* var arr = new Array(4); 数组长度是4

* var arr = new Array(1,2); 数组元素是1,2

* 数组的长度

* length

* 数组的长度是可变的

* 数组元素能够是随意类型（注意）

* 方法

* concat() 链接数组或者元素都能够（较少）

* join(separator) 转化成字符串

* push() 向末尾加入一个元素。返回新的长度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
        
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <script type="text/javascript">
                /* 
                        Array对象
                        var str = [1,2,3]; 长度是3，长度可变
                        var str = new Array();长度默认是0，长度可变
                        var str = new Array(5);长度默认是5，长度可变
                        var str = new Array(1,2);长度是2，长度可变
                        
                        join(分隔符)  默认是 
                        push   就是把元素加入进数组末尾
                */
                /* var str=[1,2,3];
                var str2=[4,5,6];
                alert(str.concat(str2)); */
                
                /* var str2=[1,2,3];
                var str=str2.join();
                alert(str); */
                var str2=[1,2,3];
                var str=5;
                str2.push(str);
                alert(str2);//
                
                
        </script>
  </head>
        
  <body>
        
        
  </body>
</html>

l Date对象（比較经常使用）

* var date = new Date(); 当前的时间

* toLocaleString() 依据本地的日期格式转化成字符串（了解）

* getDate() 返回一个月中的某一天（了解）

* getMonth() 获取月份（0-11）（了解）

* getFullYear() 获取年（了解）

* getTime() 获取毫秒数（比較重要）

* setTime() 通过毫秒数设置日期（比較重要）

同一时候也能够通过构造器设置 new Date(毫秒数);

* Date.parse(datestring) 解析字符串。返回毫秒数（重要的）

* 2015-4-29 解析不了

* 2015/4/29 是能够解析的

l Math对象（了解）

round(x) 四舍五入

random() 随机生成0~1数字

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
        
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <script type="text/javascript">
                /* 
                        Date对象
                        var aa = new Date();
                */
                var aa = new Date();
//              alert(aa.toLocaleDateString());
                /* alert(aa.getDate());
                alert(aa.getMonth());
                alert(aa.getFullYear()); */
                /* var long1 = aa.getTime();
                var long2=long1-(1000*60*60*24);
                
                aa.setTime(long2);
                alert(aa.toLocaleString()); */
                
                var bb = Date.parse("2015/5/21");
                //aa.setTime(bb);
                var cc = new Date(bb)
                alert(cc.toLocaleString());
        </script>
  </head>
        
  <body>
        
        
  </body>
</html>

l RegExp对象（重要）

*正则对象 正确的规则

* var reg = new RegExp("表达式"); （开发中基本不用）

* var reg = /^表达式$/ 直接量（开发中经常使用）

直接量中存在边界。即^代表開始，$代表结束

* test(string) （常常使用）符合规则返回true，不符合返回false

比如：

if(reg.test("12345")){

//

}else{

//

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
        
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <script type="text/javascript">
                /* 
                        RegExp对象
                        var s = new RegExp("表达式");
                        var s = /^表达式$/;
                        
                        test()
                */
                var reg = /^\s*$/;//验证空
                var checkText = "";
                alert(reg.test(checkText));
                
        </script>
  </head>
        
  <body>
        
        
  </body>
</html>

练习：推断字符串是否为空

var msg=””;

var reg = /^\s*$/;

alert(reg.test(msg));

l 全局函数

Global

浏览器内存中游离的函数，直接拿过来用。

eval() 能够解析字符串，运行里面的javascript的代码（学习JSON）（最经常使用）

isNaN() 是否 不是 数字 （经常使用）

encodeURI() 编码

decodeURI() 解码

（不用看）escape不编码字符有69个：*。+。-。.，/，@，_，0-9，a-z。A-Z

（了解）encodeURI不编码字符有82个：!，#，$，&，'。(，)，*，+，,，-，.，/。:，;，=，?

，@。_，~。0-9，a-z，A-Z

（了解）encodeURIComponent不编码字符有71个：!， '，(，)。*。-。.，_，~，0-9，a-z，A-Z

三、JavaScript和HTML的结合方式（了解）

l 两种使用方式

>内部使用

*<script type=”text/javascript”>JavaScript的代码</script>

>外部引用

*<script type=”text/javascript” src=”javascript文件路径”></script>

*外部引用时script标签内不能有script代码。即使写了也不会运行

注意：<script>标签写在随意地方都能够，可是要注意HTML和JAVASCRIPT的载入顺序

<body onload=””> 在网页载入完成后 做什么事

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
        
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <script type="text/javascript" >
                function aa(){
                        alert(document.getElementById("a").innerHTML);//打印 你好啊
                        alert("1");
                        alert("2");
                }
                
                
        </script>
  </head>
        
  <body onload="aa();">
        <span >你好啊</span>
        
  </body>
</html>

四、JavaScript的组成(了解)

JavaScript的组成

*ECMAScript (核心)

*DOM 文档对象类型

*BOM 浏览器对象类型

练习：

1、99乘法表

2、2015-01-01到2015-09-01有多少天

1、答案

<script type="text/javascript">

for(var i=1;i<=9;i++){

for(var j=1;j<=i;j++){

document.write(j+"*"+i+"="+j*i+"\t");

}

document.write("<br/>");

}

</script>

2答案：245

<script type="text/javascript">

var dlong1=Date.parse("2015/01/01");

var dlong2=Date.parse("2015/09/03");

alert((dlong2-dlong1)/1000/60/60/24);

</script>

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。