前端学习日记js1:组成-变量-数据类型

「爱情、让人受尽委屈。」 2023-06-11 09:26 127阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <script>
        //输出流3种
        // alert(1);
        //1.阻塞网页执行效果，2.只有一个确定按钮，3.只有输出信息
        // prompt("haha","heihei");
        //1.阻塞网页执行效果，2.两个按钮（确定&取消），3.提示信息和带值的输入框
        // console.log("hiahia",123,"hehe",'嘻嘻',"哈哈",true);
        //1.不会阻塞网页执行效果，2.一次输出多个值，3.在控制台输出，4.颜色区分数据类型
    
        //拓展
        // console.dir('嘻嘻');
        //输出对象的属性与内容
    
    
        //变量
        //变量规范
        //强制：
        //1.不能以数字，关键字，保留字开头
        //2.只能以英文字母，_，$开头
        //建议：
        //1.变量名语义化（如：message）
        //2.多单词命名使用小驼峰式（如：userName）
    
        //变量特点
        //1.重复赋值，变量覆盖
        //2.一次性定义多个变量，用逗号隔开，结尾用分号
        // var num=123,num1=123,nu1m=123,_n_um$$=123,num-1=123,num 1=123,_=123,$=123,#=123,var=123;
    
        //变量原理
        //内存中开辟一小块空间，变量名指向该空间的地址，地址再指向数值
    
        //debugger：debugger 语句用于停止执行 JavaScript，并调用 (如果可用) 调试函数。
        //debugger跟打断点是同一个作用
        // var num1=123;
        // debugger;
        // console.log(num1);
        // //调试的断点
        // debugger;
        // var num=123;
        // console.log(num);
    
        //数字交换
        //1.三变量法
        // var num1=20,num2=10,num3=num1;//num3=20
        // console.log("交换前：num1："+num1+" num2:"+num2);
        // num1=num2;//num1=10
        // num2=num3;//num2=20
        // console.log("交换后：num1："+num1+" num2:"+num2);
    
        //2.数轴加减法
        // var num1=20,num2=10;
        // console.log("交换前：num1："+num1+" num2:"+num2);
        // num1=num1+num2;//num1=20+10=30
        // num2=num1-num2;//num2=30-10=20
        // num1=num1-num2;//num1=30-20=10
        // console.log("交换后：num1："+num1+" num2:"+num2);
    
    
        //数据类型
        //1.字符串类型String：""和''之中的就是字符串
        // var str="张三";
        // console.log(str);
    
        //2.数值类型Number：整数，小数，正负数，NaN：非数字
        //当数据无法转换为数值类型时，就会得到NaN
        //当非数字字符进行运算时，就会得到NaN
        // var num=123;
        // console.log(num);
        // var num1="nihao"+3;
        // var num2=Number("nihao"+3);
        // console.log(num1);//nihao3
        // console.log(num2);//NaN
    
        //3.布尔类型boolean：true/false（"",false,null,undefined,0,NaN）
        // var boo=true;
        // console.log(boo);
    
        //4.空类型null
        // var kong=null;
        // console.log(kong);
    
        //5.未定义类型undefined
        //定义了变量却没有初始化/赋值
        //函数没有返回值
        // var wei;
        // console.log(wei);
    
        //6.对象类型Object
        // var obj1=new Date();
        // console.log(obj1);
    
        //typeOf：判断变量的数据类型
        //判断null时结果为object类型，这是一个bug
        //这其实只是语言本身的一个 bug，即对 null 执行typeof null 时会返回字符串 "object"。实际上，null 本身是基本类型。
        //原理是这样的，不同的对象在底层都表示为二进制，在 JavaScript 中二进制前三位都为 0 的话会被判断为 object 类型，
        // null 的二进制表示是全部位数为0，自然前三位也是 0，所以执行 typeof 时会返回“object”。
    
        // var obj1=new Date();
        // console.log(typeof(obj1));//object
        // console.log(typeof obj1 );//object
        // console.log(typeof function(){} );//function
        // var wei;
        // console.log(typeof wei);//undefined
        // var kong=null;
        // console.log(typeof kong);//object
        // var num=123;
        // console.log(typeof num);//number
        // var num1="nihao"+3;
        // var num2=Number("nihao"+3);
        // console.log(typeof num1);//string
        // console.log(typeof num2);//number
        // var boo=true;
        // console.log(typeof boo);//boolean
    
    
        //数据类型转换
        //1.转为数值类型：
        //1.1 Number(变量)
        //1.保留小数点后数值，
        //2.全为数字才能转换成功
        // var str="123";
        // var num=Number(str);
        // console.log(num);//123
        // var str="123.3";
        // var num=Number(str);
        // console.log(num);//123.3
        // var str="234aa";
        // var num=Number(str);
        // console.log(num);//NaN
        // console.log("");//换行
    
        //1.2 parseInt(变量)
        //不保留小数点后的数值
        //数字开头的就转换开头的那部分数字
        // var str="123";
        // var num=parseInt(str);
        // console.log(num);//123
        // var str="456.664";
        // var num=parseInt(str);
        // console.log(num);//456
        // var str="234aa";
        // var num=parseInt(str);
        // console.log(num);//234
        // var str="234a1a2";
        // var num=parseInt(str);
        // console.log(num);//234
        // var str="a1234a2";
        // var num=parseInt(str);
        // console.log(num);//NaN
        // console.log("");//换行
    
        //1.3 parseFloat(变量)
        //保留小数点后的数值
        //数字开头的就转换开头的那部分数字
        // var str="123";
        // var num=parseFloat(str);
        // console.log(num);//123
        // var str="456.664";
        // var num=parseFloat(str);
        // console.log(num);//456.664
        // var str="234aa";
        // var num=parseFloat(str);
        // console.log(num);//234
        // var str="234a1a2";
        // var num=parseFloat(str);
        // console.log(num);//234
        // var str="a1234a2";
        // var num=parseFloat(str);
        // console.log(num);//NaN
    
    
        //2.转为字符串类型
        // var a=null;
        // var str=String(a);
        // console.log(str);//null
        // var a=undefined;
        // var str=String(a);
        // console.log(str);//undefined
        // var a=null;
        // var str=a.toString();
        // console.log(str);//报错
        // var a=undefined;
        // var str=a.toString();
        // console.log(str);//报错
    
    
        //作业：
        // 1. 某学生三门课成绩为,语文:90  数学:80  英语:67，编程求总分和平均分.（变量名参考：chinese，math，english）
        var chinese =90,math=80,english=67;
        console.log("总分:"+(chinese+math+english)+" 平均分:"+(chinese+math+english)/3);
    
        // 2. 定义两个变量如:number1,number2分别赋值为10和8, 写程序交换两个变量的值
        // 两种方法都掌握：
        // 一种方法是借助于第三方变量，
        var number1=10,number2=8,number3=number1;
        number1=number2;
        number2=number3;
        console.log(number1);
        console.log(number2);
    
        // 一种是不借助于第三方变量的方式.
        var number1=10,number2=8,number3=number1+number2;
        number1=number3-number1;
        number2=number3-number1;
        console.log(number1);
        console.log(number2);
    
    
        // 3. 以下题考察+号连接的用法：
        // 3.1. 练习：问用户喜欢吃什么水果，假如用户输入“苹果”，则显示，“哈哈，这么巧，我也喜欢吃苹果”（变量名参考：fruit）
        var fruit=prompt("紫怡，你喜欢吃什么水果？");
        alert("哈哈，这么巧，我也喜欢吃"+fruit);
        // 3.2. 练习：请用户输入姓名性别年龄,当用户按下某个键子后在屏幕上显示：您好:XX您的年龄是XX是个X生。（变量名参考：name,gender,age）
        var name=prompt("紫怡，请输入你的姓名！");
        var gender=prompt("紫怡，请输入你的性别！");
        var age=prompt("紫怡，请输入你的年龄！");
        alert("您好:"+name+"您的年龄是"+age+"是个"+gender+"生。");
    
    
    </script>
    <style>
        /*div{*/
        /*width: 100px;*/
        /*height: 20px;*/
        /*border: 1px solid red;*/
        /*white-space: nowrap;*/
        /*overflow: hidden;*/
        /*text-overflow: ellipsis;*/
        /*}*/
    </style>
    <body>
    
    </body>
    </html>