javascript学习（一）-入门

1. 书写格式

行内式

 今天天气很好！

页内式

      ......
     
 

页内式注意点:

• 标签中的js代码一半写在文档的尾部；
  网页是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);
• HTML页面中出现

  外链式注意点

  • 外链式的script代码块中不能编写js代码, 即便写了也不会执行
  • 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件打包成为一个JS文件,以提升网页的性能和加载速度。

  2, 网页弹框——alert

  3. 控制台输出——console

  4. 接收用户输入——prompt

  5. 提示/验证框——confirm

  6. 注释

  1. 单行注释

  //单行注释
  

  2. 多行注释

  /*多行注释*/
     var name;
  

  7. 变量

  使用var定义变量，定义后如果没有初始化(赋值)就输出的话会抛出未定义的错误，

  • 关键字不能用作变量名、函数名，保留字也建议不要用作函数、变量名

  一般关键字
  

  image.png
  
  保留字
  
  image.png

  8. 标识符?

  在JS中所有的可以由我们自主命名的都可以称为是标识符
  比如变量名、函数名、属性名都属于标识符

   var name; # 这里的name就是标识符
  

  • 命名一个标识符时需要遵守如下的规则：
  1. 标识符中可以含有字母 、数字 、下划线_ 、$符号
  2. 标识符不能以数字开头
  3. 标识符不能是ES中的关键字或保留字
  4. 严格区分大小写，比如name和Name是2个不同的标识符
  5. 标识符一般都采用驼峰命名法
  6. 首字母小写，每个单词的开头字母大写，其余字母小写如：helloWorld xxxYyyZzz
  7. JS底层保存标识符时实际上是采用的Unicode编码 , 所以理论上讲，所有的utf-8中含有的内容都可以作为标识符。

  9. 数据类型

  image.png

  1. JS中如何查看数据类型?

  typeof 操作符 -> 会将检查的结果以字符串的形式返回给我们

  console.log(typeof  100); // number
  var name = "旋之华";
  console.log(typeof name ); // string
  

  注意

  • 在JS中所有的数值都是Number类型(整数和小数)
  • 由于内存的限制，ECMAScript 并不能保存世界上所有的数值，超过了最大值就会返回Infinity，超过了最小值就会返回-Infinity
  • NaN 非法数字（Not A Number）
    JS中当对数值进行计算时没有结果返回，则返回NaN
  • 字符串中相同引号不能嵌套，不同引号可以嵌套
  • 布尔型只能够取真（true）和假（false）两种数值, 也代表1和0，实际运算中true=1,false=0

  2. Null和Undefined

      Undefined这是一种比较特殊的类型，表示变量未赋值，这种类型只有一种值就是undefined

    var num;
    console.log(num);  //结果是undefined
  

  undefined是Undefined类型的字面量

      前者undefined和10, "abc"一样是一个常量,后者Undefined和Number,Boolean一样是一个数据类型,需要注意的是typeof对没有初始化和没有声明的变量都会返回undefined。

  var str1 = undefined;
   console.log(typeof str1 ); //结果是undefined
    
   var str2;
   console.log(typeof  str2); //结果是undefined
  

      Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null
  从语义上看null表示的是一个空的对象。所以使用typeof检查null会返回一个Object

   var test1= null;
    console.log(typeof test1);
  

      undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true

  var str1 = null;
   var str2 = undefined;
   console.log(str1 == str12);
   console.log(str1=== str2);
  

  3. 数据类型转换

  将其它类型的数据转换为字符串类型——toString()

  var num = 12306;
     var str= num .toString();
     console.log(str); // 12306
     console.log(typeof str); // string
  
     var num1 = true;
     var str1 = num1.toString();
     console.log(str1 ); // true
     console.log(typeof str1 ); // string
  
  
  

  1. null和undefined没有toString()方法，如果强行调用,则会报错，对于这些不能调用toSting的 值可以使用String()进行转换
  2. toString()不会影响到原变量，它会将转换的结果返回

  转换为数字—— Number()

  1. 如果是纯数字的字符串，则直接将其转换为数字
  2. 如果字符串中有非数字的内容，则转换为NaN
  3. 如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
  4. 对于布尔类型，true 转成 1, false 转成 0

  parseInt()函数和parseFloat()函数

  1. Number()函数中无论混合字符串是否存在有效整数都会返回NaN, 利用- 2. parseInt()/parseFloat()可以提取字符串中的有效整数
  2. parseInt()和parseFloat()的区别是前者只能提取整数,后者可以提取小数

  parseInt()提取字符串中的整数

  1. 从第一位有效数字开始, 直到遇到无效数字
  2. 如果第一位不是有效数字, 什么都提取不到, 会返回NaN
  3. 第一个参数是要转换的字符串，第二个参数是要转换的进制

  var str7 = "300px";
   var res9 = parseInt(str7);
   console.log(res9); // 300
  
   var str8 = "300px250";
   var res10 = parseInt(str8);
   console.log(res10); // 300
   console.log(parseInt("abc123"));  //返回NaN，如果第一个字符不是数字或者符号就返回NaN
  console.log(parseInt(""));
  
  
  

  parseFloat提取字符串中的小数

  1. 会解析第一个"." 遇到第二个"."或者非数字结束
  2. 如果第一位不是有效数字, 什么都提取不到
  3. 不支持第二个参数，只能解析10进制数
  4. 如果解析的内容里只有整数，解析成整数

  var str9 = "20.5px";
  var res11 = parseInt(str9);
  console.log(res11); // 20
  
  var str10 = "20.5.5.5px";
  var res12 = parseFloat(str10);
  console.log(res12); // 20.5
  
  
  

  • 对非String使用parseInt()或parseFloat(), 会先将其转换为String然后在操作

  var str11 = true;
     var res13 = parseInt(str11); // 这里相当于parseInt("true");
     console.log(res13); // NaN
     var res14 = Number(str11);
     console.log(res14); // 1
  
  

  注意点

  • JavaScript中是严格区分大小写的

  • 一行代码结束后必须在代码最后加上;
    如果不写分号

  • 除了多行注释之间外，其余两者注释皆可彼此嵌套使用(只有多行注释与多行注释不能嵌套)

  • 参考
    网易云js课程