js-基本语法01

javascript初识

一、 开篇

• JAvaScript是编程语言，属于高级语言
  • 借鉴c语言基本语法；
  • 借鉴java的数据类型和内存管理；
  • 几件Scheme语言将函数升到第一等公民的地位；
  • 借鉴Self语言， 使用基本原型的继承机制。
• JavaScript的特点
  • 简单易用：可使用任何文本编辑工具编写、只需浏览器就能执行程序
  • 解释型语言：事先不编译、不需进行严格的变量声明
  • 基于对象
• 组成：ECMABOMScript+DOM+BOM
  • ECMAScript：javascript的语法标准
  • DOM：JavaScript操作网页上的元素API
  • BOM：Javascript操作浏览器本分功能的API

二、基本语法

• . 书写央视
  • 行内式
  1. <button onclick="alert('今天天气很好！');">今天天气?</button>可以写在标签的属性中，但是结构与行为耦合，不方便维护，最好就别用
  2. <a href="javascript:alert('你点疼我了！！');">点我</a>
  • 页内式

</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代码, 即便写了也不会执行
  • 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件打包成为一个JS文件,以提升网页的性能和加载速度。
• 一些注意的点
  • 在JavaScript中是严格区分大小写的

输出方式

1. alert("Hello, YY!");控制浏览器弹出一个警告框

2. document.write("Hello YY!");可以向body中输出一个内容

3. console.log("Hello YY!");向控制台输出一个内容
   console.warn(“警告输出！”);
   console.error(“错误输出！”);

4. prompt("Hello,YY！"); 在网页中弹出输入框，一般用于接收用户输入的信息

5. comfirm("Hello，YY！"); 在网页中弹出提示框，显示信息，该方法一般与if判断语句结合使用

变量

• 在js中使用var关键字来声明一个变量
• 关键字
• 基本数据类型
  • String 字符串
    • 引号引起来，单引双引都可，但不要嵌套
  • Number 数值
    • 在JS中所有的数值都是Number类型，包括整数和浮点数
    • 最大数和最小数
      由于内存的限制，ECMAScript 并不能保存世界上所有的数值

// 最大值：Number.MAX_VALUE
 console.log(Number.MAX_VALUE);  // 1.7976931348623157e+308
 // 最小值：Number.MIN_VALUE
 console.log(Number.MIN_VALUE);  // 5e-324
 // 无穷大：Infinity, 如果超过了最大值就会返回该值
 console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
 // 无穷小：-Infinity, 如果超过了最小值就会返回该值
 console.log(typeof Infinity); // number
 console.log(typeof -Infinity); // number

• NaN
  是一个特殊的数字，表示Not A Number
  使用typeof检查一个NaN也会返回number
• Boolean 布尔值
  • 任何非零数值都是true, 包括正负无穷大, 只有0和NaN是false
  • 任何非空字符串都是true, 只有空字符串是false
  • 任何对象都是true, 只有null和undefined是false
• Null 空值
  • 空值类型, 值只有一个: null
  • null这个值专门用来表示一个为空的对象
  • 使用typeof检查一个null值时，会返回object
• 引用数据类型

  • Undefined 未定义

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

  • Object 对象

数据类型转换

1、将其他的数据类型转换为String

1.方法一

• 调用被转换数据类型的toString()方法
• 注意
  • 该方法不会影响到原变量，它会将转换的结果返回
  • null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错

var num5 = 10;
var str5 = str5.toString();
console.log(typeof num5 ); // number
console.log(typeof str5 ); // string

2.方法二

• 调用String()函数，并将被转换的数据作为参数传递给函数

• 注意

  • 使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法
  • 但是对于null和undefined，就不会调用toString()方法, 它会将 null 直接转换为 “null”, 将 undefined 直接转换为 “undefined”

3.方法三

• “+”
• 任何数据和 + 连接到一起都会转换为字符串, 其内部实现原理和String()函数一样

var num3 = undefined;
var res3 = num3 + "";
console.log(res3); // undefined
console.log(typeof res3); // string

2、将其他的数据类型转换为Number

1. 方式一

• Number()函数
• 字符串 -> 数字
  1. 如果是纯数字的字符串，则直接将其转换为数字
  2. 如果字符串中有非数字的内容，则转换为NaN
  3. 如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

var str4 = "    ";
var res4 = Number(str4);
console.log(res4); // 0

2.方式二

• parseInt() 和 parseFloat()
  专门用来处理字符串
• 使用注意
  • 使用Number()函数中无论混合字符串是否存在有效整数都会返回NaN, 但parseInt()/parseFloat()可以提取字符串中的有效整数
  • parseInt()和parseFloat()的区别是前者只能提取整数,后者可以提取小数

var str2 = "300px250";
var n2 = parseInt(str2);
console.log(n2); // 300
console.log(parseInt("abc123"));  //返回NaN，如果第一个字符不是数字或者符号就返回NaN
console.log(parseInt(""));        //空字符串返回NaN，Number("")返回0 
注意
	如果对非String使用parseInt()或parseFloat(), 它会先将其转换为String然后在操作	

3、 将其他的数据类型转换为Boolean

• 使用Boolean()函数
• 数字 -> 布尔
  • 除了0和NaN，其余的都是true
• 字符串 -> 布尔
  • 除了空串，其余的都是true
• null和undefined都会转换为false
• 对象转换为true