javascript组成

• ECMAScript
  • 语言基础、核心
• DOM
  • Document Object Model
  • 文档对象模型
  • 用来查找、修改、删除网页文档
• BOM
  • Browser Object Model
  • 浏览器对象模型
  • 用来访问、检测浏览器对象

基础语法

• 执行顺序
  • 从上到下
  • 性能上考虑，JS模块一般放在body结束标签前
• 区分大小写
• 忽略空格、换行符、tab
• 注释
• 标识符和保留字
• 可选的分号

JS放在那里比较好？

• 考虑因素
  • 页面能否执行（预加载）
  • 加载性能
  • 维护方便
  • JS处理的元素需要在JS之前
• 处理方案
  • 页面初始化必须的JS放head部分
  • 绝大多数的JS放body结束标签前
  • 大型页面，可以采用模块化的方式

数据类型-松散类型

• typeof运算符
• 简单数据类型
  • Undefined
  • Null
  • Boolean
  • Number
  • String
• 复杂数据类型（Object）

  Array、Date、RegExp、Function等

typeof运算符

• 松散类型，赋予什么值就是什么类型
• typeof 类型检测
  • 可以是变量
  • 也可以是字面值

<script>
var message=“hello world”;
typeof(message); //string
typeof 10; //number
</script>

Undefined

• Undefined类型只有一个值，undefined
• 返回undefined
  • 声明过变量，但是没有初始化
  • 没有声明过变量

<script>
var a;
console.log(typeof a);
console.log(a==undefined);
console.log(typeof b);
</script>

Null

• Null类型只有一个值，null
• 空的Object类型变量返回null

<a id="link" href="javascript">一个链接</a>
<script type="text/javascript">                
//null
var oLink=document.getElementById("lj");
console.log(oLink);  //null
oLink.style.color="#ff0000";    //Uncaught TypeError: Cannot read property 'style' of null
</script>

Null

• 对象型变量最好赋初值null
• 便于后续的存值判断

  <script type="text/javascript">                
  //如果某个变量用于保存对象，最好变量初始化时赋初值null
  //便于后续存值判断
  var car = null;
  if(car != null){
    //car的某些操作
  }
  </script>
  

Boolean

• 使用最多的数据类型之一
• 两个字面值，true和false

  数据类型	转换为true	转换为false
  String	任何非空字符串	空字符串
  Number	任何非零数字（包括无穷大）	0和NaN
  Object	任何对象	null
  Undefined	n/a	undefined

Number

• 唯一的数字类型
• Number.MIN_VALUE最小值
• Number.MAX_VALUE最大值
• NaN是一个特殊的数值
  • 任何涉及NaN的操作都会返回NaN
  • NaN与任何值不等，包括它本身
  • 使用isNaN()方法判断NaN

<script>
//Number类型
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

//NaN
NaN === NaN;        // false
Number.NaN === NaN; // false
isNaN(NaN);         // true
isNaN(Number.NaN);  // true

var e='hello';
var f=Number(e);
console.log(isNaN(f));
</script>

Number-数值转换

• Number
• parseInt转换为整数
• parseFloat转换为浮点数

<script>
//Number类型转换
console.log(Number('360'));
console.log(parseInt('360degree'));
console.log(parseFloat('1.2cm'));

//功能：将浮点数四舍五入，取小数点后2位 
function toDecimal(x) { 
  var f = parseFloat(x); 
  if (isNaN(f)) {
      console.log('你的参数不是数字');
    return; 
  } 
  f = Math.round(x*100)/100; 
  return f; 
} 
console.log(toDecimal(1234.5678));
</script>

String

• 属性
• 方法

<script>
//string
var s1 = 'abc';
var s2 = new String('abc');

typeof s1; // "string"
typeof s2; // "object"

s2.valueOf(); // "abc"

console.log(s1.length);  //3
console.log(s1.charAt(1)); //b
console.log(s1[1]); //b
</script>

String

• concat
  • concat方法用于连接两个字符串，返回一个新字符串，不改变原字符串。
  • 该方法可以接受多个参数。
• slice
  • 用于从原字符串取出子字符串并返回，不改变原字符串
  • 第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置
• split
  • 按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组

<script>
//contact
var s3 = 'abc';
var s4 = 'def';

var s5=s3.concat(s4) // "abcdef"
console.log(s3,s4,s5) // "abc" 'def'  "abcdef"
console.log('a'.concat('b', 'c')); // "abc")

//split
'a|b|c'.split('|'); // ["a", "b", "c"]
</script>

JS语法基础

案例

随机背景