11.16 JS基础1

今天是我第一天在博客园写文章，真是值得纪念的一天啊。哈哈哈哈。
我今天学了JS(（JavaScript）基础，老师先是提及了一些以前我们学过的相关知识点。

CSS：层叠样式表，简单来讲就是6个字“美化页面效果”。

HTML：超文本标记语言，这居然只是web前端基础中的基础。（Ps：亏我好不容易遇到一个相对好学的，只是基础中的基础。。不过那我更应该掌握得牢固才行。）

JS是一个基于对象和事件驱动的脚本语言。

主流的前端开发工具包括：IDEA,Hbuilder,VScode,WebStorm（现在我常用的）。（Ps：想起来以前老师有说过，IDEA要用正版，不然怕是会惹官司。。）

接下来讲了JS的 1.2 基本语法

<script>
  //弹窗的helloword ()  对象.方法/函数
   window.alert("hello world");
</script>

<script>
  //控制台的helloworld  console.log =》对象.方法();
  console.log("Hello world console.. ");
</script>

（Ps：以前知道console是控制台。。可万万没想到console也是一种对象，学到了）

1.3 数据类型
1.3.1 变量和数据类型

变量是一个标记。程序没有运行的时候，这个标记中可以存储一个数据，程序运行起来之后，这个标记中存储的数据可以变化。

举个栗子，生活中常见的一些变量：年龄，财富，体重等等（Ps: 性别，姓名，血型，指纹等数据一般不会变，被称为常量）。

变量赋值的表达式为 var/let 变量名 = 值;

比如： let age = 18; let 是声明变量的一个关键字，age为变量名 = 是一种运算符，表示赋值，将右侧的值赋给左侧的变量，18就是变量的值。；表示一行代码的结束。

<script>
  //1 定义变量并赋值
  let age = 18;

 //2 先声明变量名，再赋值
  let a;
  //新的一行
  a = 20;
 //输出或者引用变量的值
  console.log(age);
 console.log(a);

 //做个实验，输出a和age的变量类型 typeof帮我们来判定某个变量是什么类型.
  console.log(typeof(age));
  console.log(typeof(a));

  console.log("*********************");
  let b ; //只是声明没有赋值
  console.log(typeof(b)); // b=> undefined 未定义的类型
 //如果变量没有赋值，则变量类型是不确定的，换句话来说，js中，变量的类型是由值来决定的.
  console.log("*********************");
  let  name = "老张";
  console.log(typeof(name)); 
  console.log("*********************");
  let  nickname = '法外狂徒张三';
  console.log(typeof(nickname));
</script>

重点：如果变量没有赋值，则变量类型是不确定的，换言之，JS中变量的类型是由值来决定的。此种类型的识别方式决定了JS中的数据类型为弱类型（Ps: Java中的数据必须要有明确的数据类型，它是一门强类型语言）。

另外，在同一个作用域中，变量名不能重复。

1.3.1 变量和数据类型

序号	数据类型	实例	备注
1	数字Number	let age=18;	JS中的数字可以不带小数点，也可以带小数点（Ps: 相应的字符串转化为数字（整数和浮点数），就能联想到两种方法：parseInt()和parseFloat()）
2	字符串String	let str1="张三";	字符串可以用双引号也可以用单引号
3	布尔型Boolean	let a=true; let 5>6; //false	布尔型只有两种，true和false
4	对象Object	let b=["张三","李四","王五"];	数组是对象的一种使用中括号
5	对象Object	let day=Date();	JS中的内置对象，如Date，String等
6	对象Object	let n=null;	赋值为null 空对象
7	对象Object	let o2={"姓":"李","名":"三"}	自定义对象使用大括号（Ps: 看到它的格式容易想到Java里Hashmap的键值对）
8	未定义undefined	let u1;	不赋值
9	函数function	function myFunc(){ }	自定义函数function

1.3.3 typeof运算符

我们可以使用 typeof 运算符来确定 JavaScript 变量的数据类型。

代码栗子如下：

<script>
    //a和b都是字符串类型
    console.log("*****string*****");
    let a =typeof "string";
    let b =typeof 's';
    console.log(a);
    console.log(b);
    console.log("******number****");
    //c和d都是数字类型 JS中的数字可以不带小数点，也可以带小数点
    let c=typeof 1;
    let d=typeof 1.234;
    console.log(c);
    console.log(d);
    //两个number 相加
    let e=1.24;
    let f=1;
    console.log(e+f);
    //两个字符串相加 结果就是拼接【连接】在一起了
    let g='hello';
    let h='world';
    console.log(g+h);
    console.log("*****boolean*****");
    let b1=true;//表示真
    let b2=false;//表示假
    console.log(b1);
    console.log(b2);

    let b3=1>2;//false 假
    console.log(b3);

    console.log("*****object array*****");
    let o1=[1,2,3] //[] 中括号，数组 里面直接写值，用逗号隔开
    console.log(typeof o1); //object 对象 ->数组是对象的一个分支

    console.log("*****object {}*****");
    //一个同学的基本信息
    let o2={name:"lw",age:18,tel:10086,email:"158@163.com"};
    console.log(typeof o2);
    console.log("*****object new Date,new String,new Array*****");
    //内置对象
    let o3=new Date();
    console.log(o3);
    console.log("*****object null*****");//空对象
    let o4=null;
    console.log(o4);
    console.log(typeof(o4));
    console.log("*****undefined 未定义的 test 上下文不存在*****");
    console.log(typeof test);

    let u1;
    console.log(typeof u1);

    //函数定义
    console.log("*****function*****");
    function function01(){

    }
    console.log(typeof function01);

</script>

1.3.4 课堂练习

<script>
    //1 找按钮 关联事件
    // document.getElementById("btn") 得到了一个按钮对象
    //.onclick 按钮的单击事件
    // function () 表示按钮被点击的时候要执行什么代码
    document.getElementById("btn").onclick = function () {
        //2 函数中我们要去获取文本框中的值
        let totalNum = document.getElementsByName("phone");

        //这个numAll是上面定义的五个input元素，放在一个数组中存储
        console.log(totalNum);

        let sum = 0;//初始值 0
        for (let i = 0; i < totalNum.length; i++) {
            //循环一次获取一个input中的value
            //先转换类型，再将value累加存储在sum中
            sum += Number(totalNum[i].value);
            //可以使用Number(字符串)将字符串转化为数字
            //也可以使用parseInt parseFloat将字符串转化为（带小数点的）数字
            // console.log(typeof parseFloat(numAll[i].value))
        }
        //输出结果
        console.log(sum);
        //document.getElementById("total") 得到一个对象 id为total的那个对象.
        document.getElementById("total").value = sum;
    }
</script>