01.js-基础

js基础

js介绍

js 组成

1. ECMAScript(js中的一些基本语法、变量、函数、对象等)
2. DOM(document object model 文档对象模型)，可以完成html文档中元素的操作
3. BOM(browser object model 浏览器对象模型)，可以完成对浏览器对象的操作

js 特点

1. 弱类型语言
2. 不是完全的面向对象语言(仅针对于ES6之前)
3. 跨平台
4. 动态性，事件驱动

js 引入方式

1. 内部引入

<!-- 
    通过script 标签创建js
    默认 type属性是 type="text/javascript" 
-->
<script type="text/javascript">
    console.log('把酒话桑麻');
</script>

2. 外部引入

<!-- 
    外部引入js
    通过 src 属性
 -->
 <script src="../js/test.js"></script>

3. 行间引入

 <!-- 在行间引入js -->
     <a href="javascript:alert('休息');">点击</a>
     <a href="javascript:console.log('休息');">点击console</a>
     <a href="javascript:;">点击不动1</a>
     <a href="javascript:void(0);">点击不动2</a>

js一般写在 head 标签里面，但是也可以写在body的后面

基础语法

注释

1. 注释一行 使用 //注释内容
2. 注释一块区域 /注释内容/

结合浏览器进行调试的常用方法

1. console.log(‘内容1’,‘内容2’,…) 向控制台输出内容
2. alert(‘输出内容’) 弹出警示框

console.log('李白',20 ,'30'); 
console.log(true);
alert('千里不留行')

异常捕捉

对代码可能出现的异常进行异常捕捉，异常捕捉之后不会影响后面的代码

/*try{
    console.log('异常代码');
}catch(e){
    console.log(e)
}*/
try{
    //try中书写可能出现异常的代码
    console.log(abc);
}catch(e){
    //出现异常之后，操作的内容，e就是错误对象，e.message 错误信息
    //出现异常后的补救措施
 console.log(e.message);  
 console.log('你的方式出错了');
}
console.log('雄鸡一唱天下白');

变量和常量

1. 声明变量的关键字是var，变量的值在程序运行期间可以改变

   声明变量 var abc; abc是变量名

   定义变量的值 abc=100;

   直接声明和定义 var abc=100;

 // 优先使用''号
    var abc= '飞鸟尽良弓藏、狡兔死走狗烹';    
    console.log(abc);
     console.log(abc);
    // 在运行过程当中修改变量的值
    abc = '杯酒释兵权';

    console.log(abc);
    // 声明一个变量
    var aa;
    aa = 100;
    //  变量在使用之前，最好先声明和定义，如果只声明，没有定义则变量的值是 underfined(未定义的)
    console.log(aa);

    //  变量声明前置，即使变量在使用该变量代码的后面，浏览器也会把变量的声明提升到作用域的最前面，注意，变量的定义(赋值)不会被前置
    console.log(show);
    var show=200;

2. 使用let 声明变量

   在同一个作用域下 let 声明的变量,不能被重新声明，var 可以

   不能使用let 在 同一个作用域下 声明 同名变量

let num = 10;
    console.log(num);
    // let num = 100;
    // console.log(num);

    var num1 = 200;
    console.log(num1);
    var num1 = 300;
    console.log(num1);

一个{}就是一个作用域

let num = 10;
 /* 
    {}中的代码块是一个作用域
    let在不同作用域下无法获取值，全局作用域的值可以传递给局部，局部不能传递给全局
 */  
{
    // let num = 200;
    // var num =100;
    console.log(num);
} 
console.log(num);

变量的命名规则

1. 见名知意

2. 变量只能是字母、数字、下划线、和$组成，不能以数字开头

3. 不能使用系统的关键字和保留字

   比如 var this class array string 等等

变量常用的命名方法

1. 驼峰命名法：第一个单词的首字母小写，其余单词的首字母大写

   例如 ： myShopCar 、userCenter

2. 帕斯卡命名法（大驼峰命名法）：每一个单词的首字母大写

   例如 ： MyShopCar 、UserCenter

3. 匈牙利命名法：属性+类型+描述，使用下划线连接

• 属性：s表示静态变量、g 表示全局变量

• 类型：string 字符串、bool 布尔值

  命名 s_string_eat 表示 静态字符串吃的意思

// 以下写法虽然可行，但是不要使用
var 中国 = '台湾是中国不可分割的一部分';
console.log(中国);

常量

一旦定义，他的值不可以更改的量

声明一个常量，使用的关键字是const

const PI =3.14;
console.log(PI);
// 常量的值不能被修改，以下写法会报错
PI=3.67;

变量的分类

1. number 数字类型,包含整数和小数
2. string 字符串类型
3. boolean 布尔类型，布尔类型只有两个值 true false,true表示真，false 表示假
4. undefined 类型，未定义的类型
5. object 对象类型
6. null 空对象,特殊类型

使用 typeof 方法获取变量的类型

使用方法：typeof 变量名

typeof（变量名）

返回的是变量的类型

let num1=123;
console.log(typeof num1);
console.log(typeof(num1));
console.log(typeof(11.12));

// 字符串类型
let str1 = '莫听穿林打叶声'
console.log(typeof  str1);

let str2 = '123'
console.log(typeof  str2);

// 布尔类型
let bol1 = true;
console.log(typeof bol1);
let bol2 = 'flase';
console.log(typeof bol2);

// undefined 类型
let abc;
console.log(typeof abc);

// 对象类型
/* 
    js中 通过 document.getElementById('元素id'); 获取dom元素
*/
let wp = document.getElementById('wp');
console.log(typeof wp);
console.log(wp.id);
console.log(wp.className);

// null 类型
let n = null;
console.log(typeof n);
</script>

变量类型注意的问题

特殊的number NaN( 不是一个数的number 类型)

NaN 是唯一一个和自己比较，结果值不相等的数据

let oNaN = NaN;
console.log(oNaN,typeof oNaN);
if(NaN==NaN){
    console.log('两个值相等');
}else{
    console.log('两个值不相等');
}

let n1 = 120;
let n2 = 20;
let n3 = n1+n2;
console.log(n3);

let n4 = 150;
let n5 = n4-n1;
console.log(n5);

let str3 = '魔礼青';
let str4 = '魔礼红';
// 字符串 - 数字 得到的结果是一个 number 类型 值是 NaN
let n6 = str3-n1;
console.log( n6 );
let n7 = str4-n3;
console.log( n7 );

if(n6==n7){
    console.log('不可能');
}else{
    console.log('NaN和NaN不能相等');
}

字符串符号

字符串一般是由 引号包裹，可以单引号，也可以是双引号

如果字符串外部都是单引号，内部如果有引号，只能是双引号，反之亦然

字符串的转义字符

1. \n ： 换行
2. \t ： tab键
3. ’ ： 单引号
4. \" ； 双引号
5. \\ : 表示 \