JavaScript基本数据类型和基础语法

核心(ECMAScript)
文档对象模型(DOM) Document object model (整合js,css,html)
浏览器对象模型(BOM) Broswer object model(整合js和浏览器)

1.JavaScript的引入方式
直接编写
可以放在head和body标签内,建议放在body里的最后面,将html标签加载完成后加载js。

<script>
	alert('hello')
	/*alert访问网页时会在地址栏出现一个hello框*/
</script>

导入文件

<script src="hello.js"></script> 

2.变量

  • 声明变量时不用声明变量类型,全都使用var关键字 var a
  • 一行可以声明多个变量,并且可以是不同类型
  • 声明变量时不用var,则是全局变量.
  • 变量命名,首字符只能是字母下划线$三选一,且区分大小写
  • 变量还应遵守以下命名规则:
    Camel 标记法
    首字小写,接下来的字母都以大写字符开头 var myTestValue = 0;
    Pascal 标记法
    首字母大写,接下来的字母都以大写字符开头
    Var MyTestValue = 0, MySecondValue = “hi”;
    匈牙利类型标记法
    在以 Pascal 标记法命名的变量前附加一个小写字母或小写字母序列,说明该变量的类型。i 表示整数,s 表示字符串,
    Var iMyTestValue = 0, sMySecondValue = “hi”;
<script>
    var a=1, b=3;
    var s="hello";
    var f=3.2;
    alert(a)
    alert(s)
    alert(f)
    <!--在title中依次显示asf的值,点击确认进行下一个-->
    console.log(a);
    console.log(b);
    console.log(s);
    console.log(f);
    <!--在f12里的console栏中显示-->
    <!--注释方式: // /**/-->
</script>

3.基本数据类型
基本数据类型放在堆内存中,引用数据类型在堆内存中存栈内存中的地址,指向栈内存。
js的五种基本数据类型
1 Number不区分整型数值和浮点型数值
2 String字符串数据类型""或’'构成 unicode类型
3 Boolean : true false 用于条件判断
4 Undefined:undefined
5 null: object占一个对象位置

<script>
    //16进制数据前面加上0x,八进制前面加0
    var i=10;
    var s2="\u4f60\u597d\n欢迎来到\"JavaScript世界\""
    var b=false;
    alert(s2);
    if (true){
        alert("success!");
    }
    var a;  //如果声明了某个变量,但是未对它赋值,则该变量是Undefined类型,值也为undefined
    alert(a);
    var obj1=null //设置占用一个对象 需要的时候进行赋值
    var obj= new Object()

    //数据类型转换 数字加字符串 数字转换为字符串。true表示1 false表示0。字符串加布尔为将布尔直接变为字符串
    alert(1+"hello");
    alert(1+true);
    alert(1+false);
    alert(2==true);//false true为1
    alert("hello"+true);
    alert(parseInt(3.14));//转换为整形
    alert(parseInt("3.14a"));
    alert(parseInt("a3.94"));//NaN: 当字符串转换数字失败时就是NaN;属于Number;
    alert(NaN==0);
    alert(NaN>0);
    alert(NaN<0);
    alert(NaN==NaN);//NaN出现在表达式中结果一定为false,除了!=
    alert(NaN!=0);

    //查看数据类型
    console.log(typeof(s2));
    console.log(typeof(a));
    console.log(typeof(obj1));
    console.log(typeof(i));
    console.log(typeof(b));
    console.log(typeof(obj));
</script>

4.运算符
算数运算符

  • 加(+)、 减(-)、 乘(*) 、除(/) 、余数(% )

  • 加、减、乘、除、余数和数学中的运算方法一样 9/2=4.5,4*5=20,9%2=1

  • -除了可以表示减号还可以表示负号

  • +除了可以表示加法运算还可以用于字符串的连接

  • 递增(++) 、递减(--)

逻辑运算符

  • 等于 ( == ) 、不等于( != ) 、 大于( > ) 、 小于( < ) 大于等于(>=) 、小于等于(<=) 与 (&&)、或(||) 、非(!)

  • 逻辑 AND 运算符(&&)

  • 逻辑 OR 运算符(||)

赋值运算符
关系运算符

<script>
    //先运算还是先赋值
    var x=1;
    alert(x++); //1
    alert(++x); //3
    alert(--x); //2
    alert(x--); //2
    alert(x);   //1

    // 一元加减法
    var a=3;
    var a="3.2"
    var a="123a456"
    b=+a;
    alert(b)//3 3.2 NaN;
    alert(typeof(b))//number number number;

    //&& 逻辑与 两方都为1则为1
    //|| 逻辑或 两方都为0则为0
    //! 逻辑非
    var a=1;
    if(a<10 && a>0){
        ++a;
        alert(a); //2
    }
    if (null && true){
        alert(1); //不响应
    }
    if (true && new Object()){
        alert("hello"); //hello
    }

    //移位运算 & | ^
    3<<2 //3向左移两位 移一位乘2
    // 11<<2-->1100 //12
    // 1100>>1-->110 //6

    //赋值运算符
    alert(2==2);//true
    alert(2=="2");//true 先数据转换
    alert(2==="2");//false 不进行转换处理
    alert(4!="4")//false 先数据转换
    alert(4!=="4")//true

    //等性运算符
    null==undefined
    false==0
    true==1
    "5"==5

    //关系运算符
    alert(25<3);//false
    alert("25"<"3");//两个字符串比较acsii码 true
    alert("25"<3)//false
    alert(true&&3)//3
    //比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.
    //比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续
</script>

5.控制语句
if-else switch for while 异常处理

<script>

    // if else
    var week="Sunday";
    if (week=="Sunday"){
        alert(7);
    }
    else if(week=="周六"){
        alert(6);
    }
    else {
        alert("not 6 7");
    }


    //switch
    var x=3;
    switch(x){
        case 1:y="星期一";
        break; //不加break会继续往下走
        case 2:y="星期二";
        break;
        case 3:y="星期三";
        break;
        case 4:y="星期四"
        break;
        case 5:y="星期五";
        break;
        case 6:y="星期六";
        break;
        case 7:y="星期日";
        break;
        default: y="未定义";//其余所有情况 default放到最下面
        break;
    }
    alert(y);


    // for循环
    var a=[1,"hello",true];
    for (var i in a){
        console.log(i);//i表示索引
        console.log(a[i]);//通过索引拿到值
    }
    //for循环求1-100的和
    var ret=0;
    for (var i=1;i<101;i=i+1){
        ret+=i;
    }
    alert(ret)
    //在浏览器显示不同字体的hello
    for (var i=1;i<=6;i++){
        document.write("<H"+i+">hello</H "+i+">");
        document.write("<br>");
    }

    obj={"11":"111","22":[1,2]};
    alert(typeof(obj)) //object
    alert(obj) //[object Object]
    for (var i in obj){
        console.log(i);//11 22
        console.log(obj[i]);// 111 [1,2]
    }


    //while 循环
    var i=1;
    var ret=0;
    while (i<101){
        ret+=i;
        i++;
    }
    alert(ret)


    //异常处理
    function func1() {
        try{//这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
            var b=123;
            alert(b);
            throw new Error("hello")
        }
        catch(e){// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
            alert(e);
        }
        finally {
            alert("success!")//无论try中代码是否有异常抛出,finally代码块中始终会被执行。
        }
    }
    func1()
</script>

6.对象的概念与分类
object对象:所有对象都由这个对象继承而来;
11种内置对象
Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp(正则表达式) , Object
在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象。
function 对象

<script>
    var s="hello";
    var s2=new String("helloha");//创建字符串对象
    alert(s);
    alert(s2);


    //function 对象
    //function 创建方式1 (推荐)
    function func1() {
        alert(123);
        return 8;
    }
    var ret=func1();
    alert(ret);
    //function 创建方式2
    //var func2=new Function("参数1","参数n","函数体");
    var add=new Function("a","b","alert(a+b)");
    add(1,2);
    alert(add.length);//参数个数
    //function 创建方式3
    var func3=function () {
        alert(123)
    };
    func3();

    //function属性和方法
    function f() {
        return 8;
    }
    alert(void(f())); //void 对返回的值阻拦,输出undefined

    function func1(){
        b=4;//全局变量
        //var b=3;//局部变量
    }
    func1();//先将全局变量缓存到内存中
    alert(b);

    var ret=0
    function func1(a,b) {
        ret=a+b;
        return ret;
    }
    alert(func1(1,5,6,9));//不报错,取前两个参与计算1+5

    function a(a,b){
        alert(a+b);
    }
    var a=1;//对a重新赋值
    var b=2;
    a(a,b);//报错 此时a不是一个函数


    //arguments对象 实现所有参数的加减
    var ret=0;
    function add() {
        console.log(arguments.length);//5
        console.log(arguments);//arguments对象
        for (var i in arguments){
            ret+=arguments[i];
        }
        return ret;
    }
    alert(add(1,2,3,4,5));

    function func2() {
        if (arguments.length!=3){
            throw new Error("param should be 3");//抛出异常
        }
    }
    func2(1,2,3,45);


    //自执行函数
    (function(arg){
        console.log(arg);
    })('123')

    dic={"1":"111"};
    console.log(dic);//Object {1: "111"}
    ret=dic.toString();
    console.log(ret);//[object Object]
    console.log(typeof(ret));//string
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值