Day06 JavaScript

1. JS 输出方式

<script >
  console.log("hello world");
  alert("hello world")
</script>

2.JS变量声明

<script >
  //javascript 是一种弱类型语言，声明变量的时候不用声明它的类型
  var a=10;
  var str="hello world";

  //1.可以先声明，再赋值
  var a;
  a = 10;
  //2.可以声明的同时去赋值
  var a=10;
  //js中一个变量如果只声明没有复制，输出undefined
  var b;
  console.log(b);
  //ES6 声明变量方法
  console.log(c);
  let c=10;
</script>

3.JS声明提前

<script >
  //声明提前，js在运行的时候，将所有声明的变量，集中到作用于的顶部集中创建，赋值留在原处。
  console.log(a);
  var a=10;
</script>

4.JS基本数据类型

<script >
  //原始类型
  //1.number
  var a=10;
  var b=10.2;
  //2.如何判断一个变量的类型
  console.log(typeof a);
  //3.string
  var str="hello world"
  console.log(typeof str);
  //4.boolean
  var c=true;
  console.log(typeof c);
  //5.undefined
  var d;
  console.log(typeof d);
  var e =null;
  console.log(e);
  console.log(typeof e);
</script>

5.JS数组

<script >
  //1.声明一个数组
  var a=[1,2,3]
  //2.读取数组的值
  console.log(a[0]);
  //3.获取数组的长度
  console.log(a.length);
  //4.向数组的尾部添加一个值
  a[3]=4;
  a[a.length]=5;
  console.log(a);
</script>

6.JS对象

<script >
  //1.声明对象
  var obj={
    name:"chongyang",
    age:30
  }
  //2.读取对象的属性
  console.log(obj.age);
  //3.给对象添加属性
  obj.sex="M";
  console.log(obj.sex);
</script>

7.JS函数

<script >
  //function 函数名()
  //1.没有返回值的函数
  function say(){
    console.log("没有返回值的函数")
  }
  say();

  //2.有返回值的函数
  function eat(){
    return 20;
  }
  console.log(eat());
  //3.全局变量 函数外定义的变量
  //局部变量 函数内定义的变量
  var a=10;
  function fn(){
    a = 12;
    var b=11;
  }
  console.log(b);
</script>

8. JS数据类型转换

<script >

  //强制转换
  // String，Boolean 转换成 number
  //true-->1 false-->0
  //非数字字符串 显示NaN
  //只能识别纯数字字符串
  var str = "10.43px";
  var b=true;
  console.log(Number(str));
  console.log(Number(b));
  //字符串转number 方法2
  //会截取字符串中的第一个数字 转成整型
  console.log(parseInt(str));
//方法3 转成浮点数 但方法2 3 要求是字符串开头第一个字符必须是数字
  console.log(parseFloat(str));

  //任意类型 转 string
  //1.方式1 tostring
  var a=10;
  console.log(a.toString());
  //2.方式2 String()
  console.log(String(a));

  //任意类型转换成布尔型
  //Boolean()
  //js中，只有5种值是false  "",0,NaN,undefined,null

  var a=[1,2,3];
  console.log(Boolean(a));

  var obj={
    name:"xiao"
  }
  console.log(Boolean(obj));
  console.log(Boolean(""));
  console.log(Boolean(0));
  console.log(Boolean(NaN));
  console.log(Boolean(undefined));
  console.log(Boolean(null));

  //自动转换
  //js在算术计算中会将参与计算的值先转换为number类型，再计算
  var a="10";
  var b=true;
  var c=a-b;
  console.log(c)

  //特殊：在+运算中 倘若有一个参数为字符串 则执行字符串的拼接操作 结果为字符串

  var d=a+b;
  console.log(d);
  //比较运算
  //比较运算的自动转换：默认先将所有的类型转换为number再比较
  var a="10";
  var b=true;
  console.log(a>b);

</script>

9.for循环

<script >
  var a=[1,2,3,4];
  for (var key in a) {
    console.log(a[key]);
  }
 a.forEach(alert);

  var obj={
    name:"xiao",
    age:13
  }

  for (var k in obj){
    console.log(obj[k]);
  }

  //es5之前没有块级作用域

  for (var i=0;i<5;i++){
    console.log("hello world");
  }
  console.log(i);
  //ES6有块级作用域
  for (let l =0;l<5;l++){
    console.log("");
  }
  //console.log(l);
  {

  }
</script>

10.获取DOM节点

<script >
  //1.如何获取一个节点
  //通过ID获取
  var test=document.getElementById("test");
  console.log(test);
  //通过标签名获取 获取一个集合
  var p=document.getElementsByTagName("p");
  p[1].innerHTML="he";
  console.log(p);
  //通过className获取
  var ps=document.getElementsByClassName("one");
  ps[1].innerHTML="ha";

  //通过选择器去获取
  var one=document.querySelectorAll(".one");
  console.log(one);
  //2.修改元素的内容
  test.innerHTML="change";
  var btn=document.getElementById("btn");
  btn.onclick=function(){
    test.innerHTML="haha";
  }
</script>