javascript学习（一）-入门

1. 书写格式

行内式

 <button onclick="alert('今天天气很好！');">今天天气很好！</button>

页内式

</body>
      ......
     <script type="text/javascript">
        alert("今天天气很好！");
     </script>
 </body>

页内式注意点:

• <script></script>标签中的js代码一半写在文档的尾部；
  网页是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);
• HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续。所以如果把js代码如果写在head中, 那么js代码执行完毕之前后续网页无法被加载。

外链式格式

<script type="text/javascript" src="01-js书写格式.js"></script>

外链式注意点

• 外链式的script代码块中不能编写js代码, 即便写了也不会执行

      <script type="text/javascript" src="index.js">
            alert("今天天气很好！"); // 不会被执行
       </script>

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

2, 网页弹框——alert

 <script>
        alert("Hello，JavaScript！"); 
  </script>

3. 控制台输出——console

  <script>
         console.log("Hello，JavaScript！"); 
         console.warn("警告输出！"); 
         console.error("错误输出！"); 
   </script>

4. 接收用户输入——prompt

<script>
        prompt("Hello，JavaScript！"); 
  </script>

5. 提示/验证框——confirm

 <script>
       comfirm("Hello，JavaScript！"); 
 </script>

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课程