Javascript基础

课程目标

  • JavaScript简介、引入方式
  • JavaScript的基本数据类型、运算符

课程内容

认识Javascript

  • javascript !== java
  • 是客户端脚本语言
  • ECMAScript, DOM, BOM(了解)

Javascript引入方式

  1. 在head或者body中,引入script标签

<script>
  alert(1);
</script>
  1. 引入js文件,js文件里写js代码

<script type="text/javascript" src="home.js"></script>
  1. 标签的位置,放在body内的最下位置。区别css位置

课下了解:

defer:脚本延迟到文档解析和显示后执行,对外部有效,有顺序(了解) async:不保证顺序(了解)

Javascript语法

  1. 变量的定义,以var定义。

var a = 1;
var b = "hello",
    c = 'world';
var d = [];
  1. 语句以分号结尾.

  2. 变量名以$、字母、_开头,其他字符可以是数字,区分大小写。

  3. 注释方法

/* 
  var a = 1;
  var b = 2;
  用单斜线加星号多行注释
*/
var c = 3; //用双斜线单行注释
  1. 赋值语句,用一个=号赋值

基本调试

  1. 审查元素,打开控制台;
  2. console.log();
  3. alert();

数据类型

typeof 变量; 查看变量类型

var a = 1;
console.log(typeof a);

数字 number

var a = 1,b = 0.23,c = 1e10;  //这里多个赋值,中间用逗号,最后用分号
var d = 1000;
alert(typeof a); // number

字符串 string

var str1 = 'hello world';
var str2 = "我也是字符串";
var str3 = '"我是带引号的字符串"';
console.log( typeof str3 );  // string

布尔 boolean

var flag = true;
var bad = false;
if(flag){
  alert('good');
}else{
  alert('bad');
}
alert(typeof flag); //boolean    

对象 object

var obj = {"name": "小明", "age": 20};
var empty = {};
var newObj = {
  name: 'car',
  color: 'red'
};
alert(typeof obj); // object

var empty = null; //null是空对象

数组 (数组也是对象)

var array = []; //空数组
var arr2 = [1, 2, 4, 5];
var arr3 = ['hello', 'world', 100];
console.log(typeof arr3);
console.log(arr3.length);
console.log(arr3[0]);
console.log(arr3[arr3.length - 1]);

函数 function

function sum(a,b){
  return a+b;
}
sum(2,3);

var sum2 = function(a, b){
  return a+b;
}
sum2(1, 2.3);
console.log(typeof sum2);

未定义 undefined

console.log(a);
var b = undefined;
console.log(typeof b);

扩展

  1. 什么是对象
  2. 简单类型 vs 引用类型
  3. 声明前置?
  4. 函数声明 vs 函数表达式