JavaScript

  • HTML:搭建页面的结构的内容
  • CSS用于美化页面
  • JavaScript给页面添加动态效果和内容的

  • 历史:1995年由网景公司发布LiveScript同年更名为JavaScript,简称JS

JS的特点

  • JS属于脚本语言,不需要编译,由浏览器解析执行
  • JS可以嵌入到HTML代码中
  • JS基于面向对象,属于弱类型语言

JS的优点

  • 交互性:可以直接和用户进行交互
  • 安全性:JS语言只能访问浏览器内部的数据不能访问浏览器之外的内容(电脑磁盘中的各种数据)

如何引入JS代码

  1. 在元素的事件中书写JS代码

    <input type="button" value="点我吧!!!!" onclick="alert('try and try')">
    
  2. 通过script标签引入

    <script type="text/javascript">
        alert("第二种引入方式--通过script标签引入");
    </script>
    
  3. 把JS事件单独写在JS文件中,通过script标签中的src属性,引入JS文件

    <script type="text/javascript" src="first.js"></script>
    

JS的数据类型

  • 数值类型(number)
  • 字符串类型(string)
  • 布尔值类型(boolean)
  • undefined(未定义类型)--只声明不赋值
  • 对象类型(object)

变量的声明及赋值

  • 由于JS语言属于弱类型语言,声明变量时不需要指定类型(在浏览器中进行测试)

    var x = 18;
    var name="小明";
    var isBoolean=true;
    x = "abc";
    var m;(只声明不定义,,则该类型为undefined,值也为undefined)
    

数值类型

  • JS语言中底层都是浮点型,在使用过程中会自动转换整数或者小数

    int x = 5 / 2 ; //x=2 (java)
    var x = 5 / 2 ;//x = 2.5(javascript)  4/2=2(自动转换为整数)  5.0/2=2.5
    
  • NaN:not a number用来判断某个变量是不是一个数,通过isNaN()函数进行判断

    var age = 18;
    var name="xiaohu";
    isNaN(age);//false
    isNaN(name);//true
    

字符串类型

  • 通过单引号或者双引号修饰字符串

    var s1 = "abd"; var s2 = 'absd';

布尔值类型

var b1 = true;
var b2 = false;

数据类型转换

var z = "abc" + 18;(18转换成字符串,隐式转换)//abc18
var z = "100" - 18;(字符串转数字)//82
    • - * % :只有+会把数字转字符串

    z = "abc" - 10;//NaN,"abc"转不了数字 任何数字和NaN进行运算,结果都是NaN

数值类型

  1. 转字符串:直接转:18->"18"
  2. 转布尔值:0和NaN转为false,其他为true

    if(10){
        alert("aa");//弹窗显示
    }
    if(0){
        alert("aa");//不显示
    }
    

在if中,如果不是布尔类型,则会自动转化为布尔类型

字符串类型

1.转数值:能转直接转,不能转转换为NaN "100"->100 "ad"-->NaN 2.转布尔值:空字符("")串转成flase,其他转成true, ""->false "ads"->true

布尔值使用Number转换

1.转数值:true->1 false->0 20 + true -> 21 2.转字符串:true->"true" false->"false" "abc" + false -> "abcfalse"

undefined

  1. 转数值:undefined->NaN
  2. 转字符串:undefined -> "undefined"
  3. 转布尔值:undefined->false

null 是对象类型的值

  1. 转数值:null-> 0
  2. 转字符串:null->"null"
  3. 转布尔值:null->false

JS的运算符

  • 和Java中的运算符基本相同

  • ==和===:

    ==:先将等号两边的变量类型统一,统一完后再比较内容  "66" == 66 //true
    
    ===:会先比较类型是否相同,类型相同后再比较内容 "66" === 66 //false
    
  • 两数相除会自动转换小数和整数

    5 / 2 = 2.5; 4 / 2 = 2;
    
  • type of:

    typeof 18;//"number"
    typeof "asdf";//"string"
    typeof "";//"string"
    typeof undefined;//"undefined"
    typeof null;//"object"
    typeof true;//"boolean"
    typeof 66 + 6;//"number6"
    typeof (66 + 6);//"number"
    

JS的语句

  • 包括:if else ;while ; do while; for; switch casel;
  • 需要布尔值的地方如果不是布尔值会自动转成布尔值;
  • for循环中把只需要把java中的int i 改成 var i;不支持增强for循环(for each)

JS函数相关

  • 第一种,相对于java而言没有返回值类型,如果需要返回值,直接return

    function 函数名(参数列表){
        return...;
    }
    
    //1.无参无返回
    function fn1() {
        alert("我是无参无返回的函数")
    }
    fn1();
    
    //2.无参有返回
    function fn2() {
        return "abc";
    }
    var s = fn2();
    alert(s);
    
    //3.有参无返回
    function fn3(name){
        alert(name);
    }
    fn3("Mr.Zhou");
    
        //4.有参有返回
        function fn4(i,j) {
            return i + "*" + j + "=" + i * j;
        }
        var result = fn4(2,7);
        alert(result);
    
  • 第二种

    var 函数名 = function(参数列表) {
    
    }
    
    
    var fn5 = function(){
        alert("第二种函数声明的方式");
    }
    fn5();
    

页面元素相关的函数

    <body>
        <input type="text" id="myinput">
        <input type="button" value="Try!!!">
        <div id="d1"></div>
    </body>
  1. 获取页面中的元素对象

    var input = document.getElementById("id");
    
  2. 给文本元素(文本框)赋值和取值的两种方式

    intput.value="abc";//赋值
    var s = input.value;//取值
    
  3. 给元素添加文本内容 =:直接替换 +=:追加 元素对象.innerText = "内容";

    <h1>abc</h1>
    
  4. 给元素添加html代码

    元素对象.innerHTML = "HTML代码";

js中常用的API

string相关

1.创建string的两种方式

var s1 = "abc";
var s2 = new String("abc");

2.转大小写

"avC".toUpperCase();//"AVC"
"avC".toLowerCase();//"avc"

3.获取某个字符串在另外一个字符串中出现的位置

"java hellow".indexOf("a");//1 ;第一次出现的位置
"java hellow".lastIndexOf("a");//3;最后一次出现的位置

4.截取字符串

str.substring(start,[end]);//end可以省略,只写start截取到最后,写end,截取到end的位置,不包含end
"hello java".substring(0,3);//"hel"
"hello java".substring(3);//"lo java"

4.替换字符串-->并没有把源字符串替换掉,需要接收返回值

"java hello".replace("hello" , "hello world");//"java hello world"

5.拆分字符串

/*此时names就是数组*/
var names = "刘德华,张学友,若曦,赵四".split(",");//["刘德华", "张学友", "若曦", "赵四"]
        0:"刘德华"
        1:"张学友"
        2:"若曦"
        3:"赵四"
        length:4

/*遍历*/
for(var i = 0 ; i  < names.length ; i++){
    var name = names[i];
    alert(name);
}

number相关函数

  • 四舍五入 toFixed(2);//保留两位小数

    var x = 3.1415926; x.toFixed(3);

数组

  1. 创建数组的两种方式

    • var arr1 = ["0","true","刘德华"];
    • var arr2 = new Array("0","true","刘德华");
  2. 数组中添加数据

    • arr2.push("周杰伦")//返回值为添加元素之后的数组长度
  3. 数组长度可变.arr2.length = 2,会删除后面的元素

  4. 数组中获取数据 [数组不会存在数组下标越界.如果没有就是undedined]

  5. 数组反转

    var arr3 = [1,2,3];
    arr3.reverse();
    
  6. 数组排序

    /*默认排序规则,按照字符串的形式进行排序,通过Unicode编码,比较第一个字符比较完比较第二个依次类推*/
    var arr4 = [4,6,2,6,4,3];
    arr4.sort();//[2, 3, 4, 4, 6, 6]
    var arr5 = [23,15,2,100,30,8];
    arr5.sort();//[100, 15, 2, 23, 30, 8]
    =================================================================
    /*自定义排序规则*/===?为什么要这么设计:如果数组中保存的是对象,如Person对象,可以按照java中的comparator
    var arr = [ 23, 15, 2, 100, 30, 8 ];
    //声明自定义排序函数
    function mysort(a,b){
        //升序
        return a-b;
        //降序
        //return b-a;
    }
    arr.sort(mysort);
    

日期相关(客户端时间,服务器时间===>服务器时间用的更多)

  1. 如何获得客户端时间

    var d1 = new Date();

  2. 指定时间创建时间对象,通常时间来自服务器

    var date = new Date("2018/08/04 18:36:02");

  3. 获取和设置时间戳(距离1970/1/1 8:00:00的毫秒数)

    //获取 date.getTime();//1533378962000 //设置 date.setTime(1000);//Thu Jan 01 1970 08:00:01 GMT+0800 (中国标准时间)

  4. 从Date对象中单独获取年月日时分秒星期几

    var date = new Date();//Fri Aug 31 2018 11:45:38 GMT+0800 (中国标准时间)
    date.getFullYear();//年;2018
    date.getMonth()+1;//月;8
    date.getDate();//日;31
    date.getHours();//时
    date.getMinutes();//分
    date.getSeconds();//秒
    date.getDay();//星期几
    
  5. 从Date中获取年月日 和 获取时分秒

    date.toLocaleDateString();//"2018/8/31"
    date.toLocaleTimeString();//"上午11:49:54"
    

正则

  • 创建正则的两种方式

    1. var reg = /规则/模式;
    2. var reg = new RegExp("规则","模式可省略");
  • 正则相关的函数

    1. reg.exec(str);查找内容,如果模式为g,全局查找,执行依次查询一个,
    2. reg.test(str);校验文本
  • 字符串相关的正则函数

    1. str.match(reg);查找,返回值为一个数组
    2. str.replace(reg,替换的内容);//查找并替换

创建元素对象

var  h = document.createElement("h1");
document.body.appendChild(h);

js中的自定义对象

  • 两种声明对象的方法

  • 第一种方式

    //1:有参
    function Person(name , age){
        this.name = name;
        this.age = age;
        this.run = function(){
            alert("name:" + this.name + ",age:" + this.age);
        }
    }
    //创建对象
    var p = new Person("黄志宏",23);
    //调用对象的方法
    p.run();
    
    
    //2.无参--创建一个空的Person
    function Person(){}
    //创建Person对象
    var p = new Person();
    //后续给对象添加属性和方法
    p.name = "刘备";
    p.age = 28;
    p.run = function(){
        alert("name:" + this.name + ",age:" + this.age);
    }
    
    //调用方法
    p.run();
    
  • 第二种声明对象的方式

    /*第二种方式*/
    var student = {
            "name": "曹操",
            "age":23,
            "run":function(){
                alert("name:" + this.name + ",age:" + this.age);
            }
    }
    //调用的方式
    student.run();
10-07 10:31