js1

程序员文章站 2022-04-03 22:32:29

...

helloworld

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- 2.页面嵌入js  -->
  <script>
    alert("Hello World");
  </script>
  <!-- 3.引入外部js -->
  <script src="index.js">
    alert('test');
  </script>
</head>
<body>
  <!-- 1.行内js -->
  <input type="button" onclick="alert('Hello world')" value="我是一个按钮">
</body>
</html>

变量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 这是JavaScript的注释
    // 变量
    var num1 = 5;
    var num2 = 6;
    // alert(num1);
    console.log(num1);
    // 此处语法错误
    // var msg = hello world;
    var msg = 'hello world';
    console.log(msg);
    // 变量声明
    var num;
    // 变量赋值
    num = 15;
    console.log(num);
    // 声明多个变量
    // var n1;
    // var n2;
    // var n3;
    var n1, n2, n3;
    n1 = 1;
    n2 = 2;
    n3 = 3;
    // console.log(n1);
    // console.log(n2);
    // console.log(n3);
    console.log(n1, n2, n3);
    // 声明多个变量的同时赋值
    var s1 = 1, s2 = 2, s3 = 3;
    console.log(s1, s2, s3);
  </script>
</head>
<body>
  <!-- html的注释 -->
</body>
</html>

命名规则

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>   
    // var 123num = 5;
    // console.log(123num);
    // 
    var num = 5;
    console.log(num);
  </script>
</head>
<body>
</body>
</html>

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 1 交换两个变量的值
    // var n1 = 5;
    // var n2 = 6;
    // // 临时变量
    // var tmp;
    // tmp = n1;
    // n1 = n2;
    // n2 = tmp;
    // console.log(n1, n2);
    // 
    // 
    // 2 交换两个数字的变量的值，不使用第三个变量
    var n1 = 5;
    var n2 = 6;
    n1 = n1 + n2;   // 5 + 6 = 11
    n2 = n1 - n2;   // 11 - 6 = 5;
    n1 = n1 - n2;   // 11 - 5 = 6;
    console.log(n1, n2);
  </script>
</head>
<body>
</body>
</html>

数据类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // var age = 16;
    // var name = 'zhangsan';
    // // 在c java  c# 中声明变量的时候就确定了数据类型
    // // int age = 18;
    // // 在JavaScript中声明变量的时候并没有确定变量的类型
    // // javascript 弱类型的语言
    // age = 'abc';
    // // 在代码执行的过程中，会确定变量的类型
    // 十进制  0-9
    // var num = 10;
    // 
    // 十六进制 -- 0-9 A-F   A 10 B 11  C 12 D 13 E 14  F 15
    // var num = 0xAB;
    // console.log(num);
    // 
    // 八进制 0-7
    // var num = 010;
    // console.log(num);
    // 浮点数
    var money = 100.5;
    console.log(money);   
  </script>
</head>
<body>
</body>
</html>

String

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // var msg = '黑马程序猿';
    // console.log(msg);
    // 
    // var msg = '我很喜欢\"黑马\'程序猿\'\"';
    // console.log(msg);
    // console.log(msg.length);
    // 
    // var n1 = 5;
    // var n2 = 6;
    // // 如果+ 两边是number类型的变量，执行的是数学运算的加
    // console.log(n1 + n2);
    // 
    // 
    // var s1 = 'abc';
    // var s2 = '123';
    // // 如果+ 两边都是string类型，拼接字符串
    // console.log(s1 + s2);
    // 
    // 
    var s1 = 'abc';
    var num1 = 123;
    // 如果+ 两边 一边是字符串 一边是数值类型，会先把数值类型自动转换为字符串然后再进行字符串的拼接
    console.log(s1 + num1);
    console.log('male:' + true);
  </script>
</head>
<body>  
</body>
</html>

typeof

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    var age = 18;
    var name = 'zs';
    // number
    console.log(typeof age);
    // string
    console.log(typeof name);
    // typeof 返回的结果是什么类型   string类型
    var result = typeof name;
    console.log(typeof result);
    // 单行注释
    /*
       多行注释
       我还可以写
     */
  </script>
</head>
<body>
</body>
</html>

数据类型转换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // var age = 18;
    // var name = 'zs';
    // var isRight = true;
    // var a;
    // var b = null;
    // console.log(age);
    // console.log(name);
    // console.log(isRight);
    // console.log(a);
    // console.log(b);
    // 
    // 转换成字符串类型
    // 1 toString()方法
    // var num = 18;
    // var isRight = true;
    // console.log(typeof num.toString());
    // console.log(typeof isRight.toString());
    // 错误的方式 null和undefined没有toString()方法
    // var a = null;
    // console.log(a.toString());
    // 
    // 2 String()方法
    // var num = 18;
    // var isRight = true;
    // console.log(String(num));
    // console.log(String(isRight));
    // var a = null;
    // console.log(typeof String(a));
    // 
    // 3 字符串拼接
    var num = 18;
    var isRight = true;
    console.log(typeof(num + ''));
    console.log(typeof(isRight + ''));
  </script>
</head>
<body>  
</body>
</html>

转换成数值类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 1 Number()
    // var str = 'abc';   //   Number(str)   -》 NaN
    // var isRight = true;  //  Number(isRight) -> 1
    // console.log(Number(str));
    // console.log(Number(isRight));
    // 
     // console.log(Number('123'));
     // // Number() 把字符串转换成数值类型的时候，如果字符串中有一个字符不是数字，返回NaN
     // console.log(Number('123abc'));
     // 
     // 
     // 
     // 2 parseInt()  // int 整数
     // var str = '123';
     // var isRight = false;
     // console.log(parseInt(str)); 
     // // parseInt 无法把布尔类型转换成数值类型 返回的结果是NaN
     // console.log(parseInt(isRight));
     // //var s1 = 'abc';   //  parseInt(s1) -> NaN
     // var s1 = '123abc';
     // // parseInt 在转换字符串的时候，如果遇到数字就会转换数字，如果遇到非数字就会返回
     // console.log(parseInt(s1));
     // var s2 = 'abc123';  // 如果字符串中第一个字符是非数字 此时返回NaN
     // console.log(parseInt(s2));
     // 3 parseFloat()
     // var str = '123.67';
     // var isRight = true;
     // console.log(parseFloat(str));
     // console.log(parseInt(str));  // 返回123
     // console.log(parseFloat(isRight));   // parseFloat 无法转换布尔类型  返回的是NaN
     // var str = '123.12abc';
     // console.log(parseFloat(str));
     // 
     // var str = '123abc';
     // console.log(parseFloat(str));
     // 
     // 
     // 4 取正或者取负   + -
     // var num = -5;
     // console.log(num);
     // 
     // var str = '123';
     // console.log(-str);
     // 
     // var str = '123abc';
     // console.log(+str);
     // 
     // var isOK = true;
     // console.log(+isOK);     
     var str = '123abc';
     // - 如果一边是数值类型 一边是字符串，会先把字符串转换成数值类型再进行数值的减法运算
     // 如果字符串转换成数值类型失败  此时返回NaN
     // console.log(str - 0);
     // + 如果有一边是数值类型 一边是字符串，会先把数值类型转换成字符串 再进行字符串的拼接
     console.log(str + 0);
  </script>
</head>
<body>
</body>
</html>

转换成布尔类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    var str = 'abc';
    var num = 123;
    var a = null;
    var b;  // 默认值是undefined
    console.log(Boolean(str));   // true
    console.log(Boolean(num));   // true
    console.log(Boolean(a));     // false
    console.log(Boolean(b));     // false
    // 转换成false的情况：null  undefined  ''空字符串  0 NaN
    console.log(Boolean(''));
    console.log(Boolean(0));
    console.log(Boolean(NaN));
    console.log(Boolean(-1));
  </script>
</head>
<body>
</body>
</html>

运算符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    var x = 5;
    var y = 10;
    console.log(x + y);
    console.log(x * y);
    console.log(x / y);
    console.log(x % y);
    console.log(x / 0);
    console.log(x % 0);
  </script>
</head>
<body>  
</body>
</html>

一元运算符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 前置++  
    // var num = 5;
    // // ++num  表达式  先让num自身+1  然后再返回表达式的结果 
    // console.log(++num);
    // var num1 = 7;
    // // 6 + 8  = 14
    // console.log(num + ++num1);
    // console.log(num1);
    // console.log(--num1);
    // 后置++
    // var num = 5;
    // // num++  表达式  先返回表达式的结果num  然后再对num自身+1
    // console.log(num++);
    // console.log(num);
    // var num1 = 7;
    // // 6 + 7 =13
    // //  num1: 8
    // console.log(num + num1++);
    // console.log(num1);
    // 练习
    // ++a   2 先执行a自身+1 ， 然后再返回表达式的结果
    // ++a   3
    // 5
    //var a = 1; var b = ++a + ++a; console.log(b);
    // 先返回表达式的结果a，再执行a自身+1
    // a++    表达式 1    a = 2
    // ++a    表达式 3
    // 1 + 3  = 4
    // var a = 1; var b = a++ + ++a; console.log(b);     
    // a++    表达式 1  a = 2
    // a++    表达式 2  a = 3
    // 1 + 2 = 3
    // var a = 1; var b = a++ + a++; console.log(b);    
    // ++a   表达式 2   a = 2
    // a++   表达式 2   a = 3
    //   2 + 2 = 4
    var a = 1; var b = ++a + a++; console.log(b);  
  </script>
</head>
<body>
</body>
</html>

逻辑运算符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 逻辑运算符   与 &&  或 ||  非 !
    // 与 --> 并且    只有两个操作数同时为true  结果才为true
    // var a = false;
    // var b = false;
    // console.log(a && b);
    // 
    // 或 ||   只有两个操作数同时为false  结果才为false
    // 
    // var a = false;
    // var b = false;
    // console.log(a || b);
    // 
    // !  非  取反   一元运算符
    var a = false;
    console.log(!a);
  </script>
</head>
<body>
</body>
</html>

关系运算符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 关系运算符  
    // <  >  >=  <= 
    // 
    // var a = 10;
    // var b = 5;
    // console.log(a > b);
    // console.log(a < b);
    // == != 
    // console.log(a == b);
    // console.log(a != b);
    // === 相等判断 !==  不等
    var a = 10;
    var b = 10;
    // == 判断的是变量的值是否相等
    // console.log(a == b);
    // === 判断值和类型都一致才返回true
    console.log(a === b);    
  </script>
</head>
<body>
</body>
</html>