4月25日学习 - 《JavaScript》

从上到下依次执行
可以编写到外部文件中
字面量和变量
标识符
数据类型
运算符
一元运算符
自增自减
逻辑运算符
赋值运算符
关系运算符
unicode编码
相等运算符
条件运算符
运算符优先级
代码块

从上到下依次执行

<script>
    alert("这是我的警告");
</script>

<script>
    doucment.write();//可以向body输出一个内容
</script>

<script>
    console.loge();//作用是向控制台输出内容
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
  <!--可以将js写到onclick中-->
    <button onclick="alert('成功');">点我一下</button>
  <a href="javascript:alert('成功');">点我一下</a>
</body>
</html>

可以编写到外部文件中

alert("这是我的警告");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript" scr="xx.js"></script>
    <title>测试</title>
</head>
<body>
</body>
</html>

字面量和变量

字面量：都是不可变的值
变量可以用来保存字面量
在js中使用var来声明一个变量

var b = 123;

标识符

所有可以自主命名的都可以称为标识符
一般采用驼峰命名法

数据类型

string字符串
number数值
boolean布尔值
null空值
undefined未定义

object对象

字符串

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<script type="text/javascript">
        var str = "hello";
      str = "我说\"天气不错\"" 
      console.log(str);
</script>
  <title>测试</title>
</head>
<body>
</body>
</html>

数值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<script type="text/javascript">
        var a = 123.123;
      typeof a;//检查类型
      console.log(typeof a);
      console.log(Number.MAX_VALUE);//表示的最大数值
      //Infinity为无穷类型为Number;
      //NaN为不是数值类型为Number;
      //如果进行浮点数计算，可能得到不精准的数;
</script>
  <title>测试</title>
</head>
<body>
</body>
</html>

布尔值

“true”为字符串，true为布尔值

空

检查Null时，会返回object 空值;
当我们申明一个变量却不给它赋值那就是undefined 未定义;

强制数据类型转换

string

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<script type="text/javascript">
        var a =123;
      a.toString();//该方法不会影响到原变量
      String(a);//该方法也不会影响到原变量
      c=c+"";//利用机制
</script>
  <title>测试</title>
</head>
<body>
</body>
</html>

number

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<script type="text/javascript">
        var a ="123";
      Number(a);
      a =a-0;//利用机制 隐式转换
         a= +a;
      //纯数字的字符串，则将直接转换为数字
      //非法数字转换为NaN
      //空的字符串为0
      //true-》1 false-》0
      //Null -》0
      //unfidiend-》NaN
      var a = "123px";
      parseInt()//把一个字符串转换为Int
      parseFloat()//把一个字符串转换为Float
      a = parseInt(a)//将字符串中有效的整数内容取出
      var a ="070";
      a = parseInt(a,10);//进制的转换
</script>
  <title>测试</title>
</head>
<body>
</body>
</html>

boolean

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<script type="text/javascript">
        var a =123;//true
      a = 0;//false
    a = Infinity;//true
      a = NaN;//false
      a = Boolean(a);
      //总结：NaN 0 是false
      //空串为false
      //null和undefined为false
      //对象也会转换为true
</script>
  <title>测试</title>
</head>
<body>
</body>
</html>

运算符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<script type="text/javascript">
        var a = 123;
      var result = typrof a;//typeof也是运算符
      console.log(result);//该方法不会影响到原变量
      console.log(typeof result);
      var a = 123;
      var result = typrof a;//typeof也是运算符
      result = a+1;
      result = true+1;//会自动转化
      console.log(result);//任何值跟NaN做运算都是NaN
      result = "123"+"456";//拼串
      result = "1"+123//先全部转换为字符串再拼串
      result = 1+2+"3";//33
      result = "1"+2+3;//123
      result = 100-"1"//9 除了+都会转换为num
</script>
  <title>测试</title>
</head>
<body>
</body>
</html>

一元运算符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<script type="text/javascript">
        //+正号
      //-负号
  a = true;
  a = -a//先转化为数字再取负
</script>
  <title>测试</title>
</head>
<body>
</body>
</html>

自增自减

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<script type="text/javascript">
        var a =1;
       console.log(a++);
      a++;
      ++a;
      console.log(a++);
      console.log("a="+a);
</script>
  <title>测试</title>
</head>
<body>
</body>
</html>

逻辑运算符

//字符串中使用转义字符输入Unicode编码 \u2624
//网页中Unicode编码 &#编码 编码需要十进制

！非
&& 与
|| 或

对非布尔值取返，先转换为布尔值然后再取反 !! 取该值的布尔值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
          var result = 1&&2;
        console.log("result="+result);
        var result = 1&&2;
        console.log("result="+result);//如果两个值都为true则返回后面的
        var result = 2&&0;
        console.log("result="+result);//0 只要有false就返回第一个值
        var result = 2||0;
        console.log("result="+result);//第一个为true返回第一值
        var result = ""||"你好";
        console.log("result="+result);//第一个为flase直接返回第二个"你好"
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

赋值运算符

a += 5；与C相似。

关系运算符

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
          console.log(1>true);//false
      console.log(1>=true);//true
            //数学关系
      //成立返回true
      //不成立返回false
          //任何值和NaN做比较始终为flash
       console.log("6">"5");//两边都是字符串，不会将其转换为数字比较flase
    console.log("b">"a");//比较的是编码true
    console.log("abc">"b");//false 一位一位地比较
      //在比较2个字符串的类型的数字的时候给个+比较
    <title>测试</title>
</head>
<body>
</body>
</html>

unicode编码

相等运算符

==
！=
===完全相同值与类型

！==

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
        console.log("1" == 1); //true 会自动转换
    console.log(1 == true); //true
        console.log(null == 0); //flase 不转换
        console.log(null == undefiend) //true undefiend为他的衍生词
        console.log(NaN == NaN)//flase 与自身和其他都不相等
        isNaN()//用这个函数来判断
        console.log(null === undefiend) //flase undefiend为他的衍生词但不相同
  <title>测试</title>
</head>
<body>
</body>
</html>

条件运算符

？：：
如果条件的表达式的求值结果是一个非布尔值, 会将其转换为布尔值然后在运算

运算符优先级

跟C一样
运算优先级
如果实在不清楚，用（）来改变优先级

代码块

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
{
        console.log("1" == 1); //true 会自动转换
    console.log(1 == true); //true
        console.log(null == 0); //flase 不转换
}//代码块表示一组，要执行都一起执行
{
        console.log("1" == 1); //true 会自动转换
    console.log(1 == true); //true
        console.log(null == 0); //flase 不转换
}//代码块只有分组的作用，不会隔离
  <title>测试</title>
</head>
<body>
</body>
</html>