web 学习笔记3-JavaScript

最新推荐文章于 2024-08-15 09:17:35 发布

pin-csdn

最新推荐文章于 2024-08-15 09:17:35 发布

阅读量541

点赞数 3

分类专栏： Web 文章标签： web

本文链接：https://blog.csdn.net/gaopinqiang/article/details/70552994

版权

Web 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1、Javascript概述：

a.一种基于对象和事件驱动的脚本语言
b.作用： 给页面添加动态效果
c.历史： 原名叫做livescript.W3c组织开发的标准叫ECMAscipt.
d.特点：
    1). 弱势语言
    2). 由浏览器直接解析执行。（函数不能直接执行）
    3). 是一个解释性语言
    4). 交互性（它可以做的就是信息的动态交互）
    5). 安全性（不允许直接访问本地硬盘）
    6). 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关
e . javascript和java的一些区别：
    1). javascript是一个解释性语言,java是编译解释性语言
    2). javascript是一个弱势语言，Java是一个强势语言
    3). 在页面上引入的方式不同javascript代表用<script>引入，Java代码<%>
    4). JS是基于对象，Java是面向对象。
基于对象就是已经存在对象，面向对象就是需要自己创建对象。

2、JavaScript语言组成：

EcMAScript  + BOM + DOM 
    ECMAScript: 规定了一些语法，变量，for循环等等结构
    BOM: Browser  object  Model 浏览器对象模型
    DOM: Document  object  Model 文档对象模型

3、JavaScript与Html的结合方式：

Javascript与HTML的结合方式有三种：
    1.采用事件来调用，代码写在字符串中
        <button onclick = "alert('大家好')">点击</button>
    2.采用定义函数的方式: 用function来定义函数 
        function fun(){ alert('你好')} ;
    3.采用外部js文件.
        利用<script src = "a.js"></script>引入  

例如：
<!doctype html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus?">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script type="text/javascript" src = "a.js"> </script>
    <title>Document</title> 
    </head>

    <body>
        <p onclick = "alert('你好')" id  = "p">大家好</p>
    </body>
</html>

4、JavaScript基本语法：

定义变量：采用var关键字来定义.定义的变量的类型是由给定的值来决定的。
数据类型： 
    undifined,表示未定义类型。
    Number类型。代表了一切数字类型
    String类型。字符串类型
    Boolean类型。布尔类型
    Function类型。函数类型
    Null类型。   
    object ：对象类型.

判断变量的类型 : 
    1. 采用typeof函数判断 :typeof(a) == "string"
    2. 采用instanceof运算符： a instanceof String

类型的转换：
    1. Number转String : 3 + ""
    2. Number转Boolean ：在javascript中，非0为真，0为假。如果变量为null或者undefined，也为假.
    3. String转Number:
            a. parseInt,parseFloat
            b. 乘以1即可
    注意：乘以1比较少的一种写法

例如：
<!doctype html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus?">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>javascript基本语法</title>
    </head>
    <script type="text/javascript">
    <!--
            /*
                javascript中的数据类型：
                     a. 基本类型
                        1. undefined: 没有给变量赋值时的类型
                        2. String：
                        3. Boolean
                        4. Number:
                        5. function:
                        6. null
                    b. 引用类型
                        Object
                        判断变量的类型有两种方式：
                            1. 采用typeof(): 打印的是所有类型的toString方法(所有类型的小写)
                            2. 采用instanceof关键字判断： 是判断变量是不是由某种类型new出来的
            */
            /*var a ;
            a = 10 ;
            a = "abc" ;
            a = true;
            a = function(){
                alert("aaa");
            }
            alert(typeof(a)) ;*/
            a = 10 ;
            a = new Number(10) ;
            //alert(a instanceof Number) ;

            //alert(typeof(a) == "number") ;
    //-->
    </script>
    <body>
    </body>
</html>

5、JavaScript 函数的定义：

函数的定义有三种方式： 
    1.采用function关键字来定义
    2.采用匿名的方式来定义
    3.采用new Function()的方式(了解,不推荐)

function fun(){
    alert("大家好") ;
}
var a = function(){
    alert("我是匿名函数") ;
}
var b = new Function("x","y","z","alert(x+y+z)") ;

函数的调用：
    1.函数调用的时候参数可以传递多个，可以和函数定义的形参个数不符合
    2.如果函数重名了，那么调用的时候一定是调用最后一个，与参数无关。
定义函数的不要重名。

函数劫持：改变函数本身的作用.
劫持例如：
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="Generator" content="EditPlus?">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
    </head>
    <body>
        <script type="text/javascript">
        <!--
            //函数劫持:改变javascript的预定义的函数预定义好的功能
            window.alert = function(x){
                document.write(x) ;
            }
                alert("abc") ;
        //-->
        </script>
    </body>
</html>

6、JavaScript 全局函数：

全局函数：
    1.isNaN：用来判断变量是否是数字类型的字符串
        NaN: not a Number ,不是一个数字
    2.parseInt,parseFloat
    3.eval: 把字符串转换成数字
    4.escape(): 编码
    5.unescape(): 解码
    6.encodeURI(): 对网址（URL）进行编码
    7.decodeURI(): 对网址（URL）进行解码
例如：
var a = "100" ;
if(isNaN(a)){
    alert("不是数字") ;
}else
    alert("是数字") ;
运行的结果是：数字

7、JavaScript常用对象介绍：

a、Array对象 数组对象，进行数组操
    定义方式
        1.采用new的方式
        2.采用中括号[]来定义
            数组的长度可以随时改变
    特点： 
        1.javascript中数组的大小可以随时改变
        2.javascript中数组的下标可以是任意对象。
    方法： 
        1.join() : 把数组的所有元素放入一个字符串. 默认用逗号连接
        2.push() : 向数组的末尾添加一个元素
        3.reverse() :反转
        4.shift() : 删除并返回数组的第一个元素
        5.sort() ; 排序 .默认同类型的数据相比较.
    例如：
    <script type="text/javascript">
    <!--
        var arr = new Array() ;  //定义一个数组arr,初始长度为0
        var arr1 = new Array(4) ;  //定义一个数组arr1,初始长度是4

        arr1[0] = 1 ;
        arr1[1] = 10 ;
        alert(arr1[2]) ;//弹出来undefined,没有初始化

        var arr2 = new Array(1,2,3,4,5) ; //定义一个数组arr2，初始化数据是1,2,3,4,5

        var arr3 = [] ;  //定义了一个数组，里面是空的
        var arr3 = [3,2,4,5] ;  //定义了一个数组，同时初始化数据

        //注意：
        var arr4 = [1,2,"4",true,45.8,false,"abc"] ;//数组里面可以存放不同类型的数据
        //alert(arr4[3]) ;

        alert(arr4.length) ;
        arr4.length = 2 ;   //将数组的长度变为2，多于的数据将消失了
        //alert(arr4[2]) ;   //弹不出原来的数据了，弹出来undefined

        var arr5 = ["中国","美国","日本"] ;
        arr5["中国"] = ["北京","上海","天津"] ;
        alert(arr5["中国"][0]) ;

        alert(typeof(arr5)) ;//弹出 object
    //-->
    </script>
一个简单的例子：
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>hello</title>
 </head>
 <body onload = "init()">
    <script type="text/javascript">
    <!--
         //示例：标题栏的滚动
         function init(){
              //1.拿到标题栏的文本
              var title = document.title ;
              //alert(title) ;
              //2.将文本字串转换为数组
              var arr = title.split("") ;
              //3.拿到数组的第一个元素，并从数组中删除
              var first = arr.shift() ;
              //4.将第一个元素添加到数组的最后
              arr.push(first) ;
              //5.将数组再组合成一个字符串
              title = arr.join("") ;
              //6.将字符串再赋值回标题栏
              document.title = title ;
              //7.每隔1秒做一遍前6步
              setTimeout("init()",1000) ;
         }
    //-->
    </script>
 </body>
</html> 

b、String对象 ----- 字符串类型的引用类型
    substr: 截取字符串 两个参数第一个是下标，第二个是长度
    substring: 截取字符串 两个参数第一个是下标，第二个是下标
    toUppercase:
    toLowercase:
    indexOf:
    charAt() :
    replace():

var s = "abcdefg" ;
alert(s.substring(2,3)) ;//结果是：c
alert(s.substr(2,3)) ;   //3是i长度，不是索引，结果是：cde

c、Number对象 ---- 数字原始类型引用类型
    1. random() : 获得随机数[0,1)
    2. ceil() : 返回大于等于次数的最大整数
    3. floor() : 返回小于等于次数的最大整数
    4. round(): 返回四舍五入后的整数

d、Boolean对象 ---- 布尔原始类型引用类型 
e、Math对象 执行数学任务
    1.floor(x): 取得小于等于x的最大整数
    2.ceil(x) :取得大于于等于x的最大整数
    3.random(): 取得0~1之间的随机数(可以等于0，永远不能取得1)
    4.round(): 四舍五入为整数

    <script type="text/javascript">
    <!--
        var a = 3.1;
        alert(Math.floor(a)) ;//3
        alert(Math.ceil(a)) ;//4
        alert(Math.round(a))//3
    //-->
    </script>

f、Date对象 用于处理日期和时间
    <script type="text/javascript">
    <!--
        /*
            Date对象：1.拿到当前时间：new Date() ;
                      2.拿到年月日，时分秒： getXXX() ;
        */
        var d = new Date() ;
        alert(d.toLocaleString()) ;
        alert(d.getYear()) ;
        alert(d.getMonth());
        alert(d.getDate()) ;
        alert(d.getDay()) ;
    //-->
    </script>

g、RegExp 对象正则表达式对象
    写法： 
    1. new的方式   var r = new RegExp("ab") ;
    2. 采用/正则表达式/ (推荐)  var r = /ab/ ;
    例如：
        <script type="text/javascript">
        <!--
             var reg = /(..)./ ;  //括号表示子匹配，就是对结果进一步匹配
             var s = "abcde" ;

             alert(reg.test(s)) ;  //测试字符串中是否包含正则表达式中所匹配的字符串,返回的是boolean类型的，结果：true
             alert(reg.exec(s).length) ;  //以数组的形式返回匹配的正则表达式的字符串，结果：2
             alert(reg.exec(s)[0] + ":" + reg.exec(s)[1]) ;//结果  abc:ab
             alert(/(.)./.exec(s));//结果 ab,a
        //-->
        </script>

pin-csdn

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
web 学习笔记3-JavaScript

1、Javascript概述：2、JavaScript语言组成：3、JavaScript与Html的结合方式：4、JavaScript基本语法：5、JavaScript 函数的定义：6、JavaScript 全局函数：7、JavaScript常用对象介绍：
复制链接

扫一扫

专栏目录