js第一弹-简单介绍js-CSDN博客

本文链接：https://blog.csdn.net/jxl20010909/article/details/132150068

js 组成

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

js 特点

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

js的引入方式

    1.内部引入
    2.外部引入
    3.行间引入

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

在行间引入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>

运行结果：
点击
点击console
点击不动1
点击不动2

外部引入js

通过src属性
<script src="./js/test.js"></script>

  .<script src="./js/test.js"></script>

内部引入

通过 script 标签创建js
默认 type属性值是 type=“text/javascript”

<script type="text/javascript">
    console.log('把酒话桑麻');
</script>

注意：
如果在 script 标签中使用了src属性引入了外部的js，则该标签中嵌套的、所有js代码无效

js基础语法

注释

	1.注释一行 使用 //注释内容
    2. 注释一块区域 /* */
    3. 注释快捷键 ctrl+/

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

    1.console.log('内容1','内容2','内容3',...) 向控制台输出内容
    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	 let
2. 声明变量
	var abc; abc是变量名
	let num；num是变量名
3.  声明变量的值.
	abc=100;
	num=50;
**使用var声明变量，变量的值在程序运行期间可以改变**
    声明变量   var abc; abc是变量名
    定义变量的值   abc=100;
    直接声明和定义 var abc = 100
    **注：**
    	var可以在运行过程当中修改变量的值
    	变量在使用之前最好先声明和定义，如果此声明没有定义，则变量的值是		undefinded（未定义的）
    	变量声明前置，即使变量在使用该变量代码的后面，浏览器也会把变量的声明提升到作用域的最前面，注意，变量的定义（赋值）不会被前置
**使用 let 声明变量**
	在同一个作用域下， let 声明的变量，不能被重新声明，var 可以
	不能使用 let 在 同一个作用域下 声明 同名变量
	 注:
    	一个 {} 就是一个作用域块
    	{}中的代码块是一个作用域
		let 在不同作用域下无法获取值，全局作用域的值可以传递给局部，局部不能传递给全局

/*
    声明变量的关键字 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;
// 变量在使用之前最好先声明和定义，如果此声明没有定义，则变量的值是undefinded（未定义的）
console.log(aa);

/* 变量声明前置，即使变量在使用该变量代码的后面，浏览器也会把变量的声明提升到作用域的最前面，注意，变量的定义（赋值）不会被前置*/
console.log(show);
var show=200;
/*
使用 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 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 布尔

变量的分类

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

获取变量类型

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

typeof 变量名
typeof(变量名)
返回的是变量的类型

*/
   console.log(typeof num1);
   console.log(typeof(num1));
   console.log(typeof(123.23));
   console.log(typeof(num1));

    //字符串类型
    let str1 ='莫听穿林打叶声';
    console.log(typeof str1);
    let str2 ='123'
    console.log(typeof str2);
    // 布尔类型
    let bol1 = true;
    console.log(typeof bol1);
    let bol2 = false;
    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);

变量类型注意问题

特殊的number NaN(不是一个数的number类型)
- NaN 是唯一一个和自己比较，结果值不相等的数据
字符串一般都有引号包裹。可以是单引号，也可以是双引号
如果字符串外部是单引号，内部如果有引号，只能是双引号，反之亦然。
字符串-数字得到的结果是一个number类型
字符串的转义字符
1. \n:换行
2. \t:tab键
3. \':单引号
4. \":双引号
5. \\:表示 \

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类型
   let n6 = str3-n1;
   console.log(n6);
   let n7 = str4-n1;
   console.log(n7);

   if(n6==n7){
    console.log('不可能');
   }else{
    console.log('NaN和NaN不能相等');
   }
   let str5 ='子曰：\'学而时习之\'';
  console.log(str5);
  let str6 ='黑发不知\n勤学\t早';
  console.log(str6);
  alert(str6)

常量

常量：一旦定义，他的值不可以更改的量
声明一个常量，使用的关键字是 const
常量的值不能被修改，以下写法会报错

const PI = 3.14;
console.log(PI);
PI=3.67;