01 js介绍
js组成
1.ECMAScript(js中的一些基本语法，变量、函数、对象等)
2.DOM (document object model 文档类对象模型)，可以完成html文档中元素的操作
3.BOM (browser object model 浏览器对象模型)，可以完成对浏览器对象的操作
js 特点
1.弱类型语言
2.不是完全的面向对象语言(仅针对ES6之前)
3.跨平台
4.动态性，事件驱动
js 引入方式
1.内部引入
2.外部引入
3.行间引入
js一般写在head标签中，但是也可以写在 body 的后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js介绍</title>
</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);">点击不动1</a>
</body>
</html>
<!--
通过script 标签创建js
默认 type属性值 是 type="text/javascript"
-->
<script type="text/javascript">
console.log('把酒话桑麻')
</script>
<!--
外部引入js
-->
<script src="./js/test,.js"></script>
02 基础语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础语法</title>
</head>
<body>
</body>
</html>
<script>
// 注释：
// 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('雄鸡一唱天下白');
</script>
03 变量和常量1
声明变量的关键字是 var ，变量的值在运行期间是可以改变的
声明变量 var abc;
abc是变量名
定义变量的值 abc=100;
直接定义和声明 var abc=100;
变量在使用之前，最好先声明和定义，如果只声明，没有定义则变量的值是undefined(未定义的)
变量声明前置，即使变量在使用该变量代码的后面，浏览器也会把变量的声明提升到作用域的最前面
*注意，变量的定义(赋值)不会被前置
使用 let 声明变量
在同一个作用域下，let声明的变量不能被重新声明，var可以
不能使用let在同一个作用域下声明同名变量
一个{}就是一个作用域块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量和常量</title>
</head>
<body>
</body>
</html>
<script>
/*
声明变量的关键字是 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;
// 变量在使用之前，最好先声明和定义，如果只声明，没有定义则变量的值是undefined(未定义的)
console.log(aa);
// 变量声明前置，即使变量在使用该变量代码的后面，浏览器也会把变量的声明提升到作用域的最前面
// 注意，变量的定义(赋值)不会被前置
console.log(show);
var show=200;
/*
使用let声明变量
在同一个作用域下，let 声明的变量,不能被重新声明，var可以
不能使用let在同一个作用域下 声明 同名变量
一个 {} 就是一个作用域块
*/
let num = 10;
console.log(num);
var num1 = 200;
console.log(num1);
var num1 = 300;
console.log(num1);
</script>
04 变量和常量2
{}中的代码是一个作用域
let 在不同作用域下无法获取值，全局作用域的值可以传递给局部，局部不能传递给全局
变量的命名规则：
1.见名知义
2.变量只能是字母、数字、下划线、和$组成，不能以数字开头
3.不能使用系统的关键字和保留字，比如：
var、this、class、array、string 等等
常用的命名方法
1.驼峰命名法
第一个单词的首字母小写，其余单词的首字母大写
例如：myShopcar、userCenter
2.帕斯卡命名法(大驼峰命名法)
每一个单词的首字母都大写
例如：MyShopCar、UserCenter
3.匈牙利名法：属性+类型+描述
使用下划线链接
属性：
s表示静态变量、g表示全局变量
类型：
string 字符串
bool 布尔值
命名：s_string_eat 表示 静态字符串吃饭的意思
常量：一旦定义，它的值不可以更改的量
声明一个常量，使用的关键字是 const
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量和常量</title>
</head>
<body>
</body>
</html>
<script>
// 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;
*/
const PI = 3.14;
console.log(PI);
// 常量的值不能被修改，以下写法会报错
PI = 3.67;
PI
</script>
05 变量的分类
变量的分类
1.number 数字类型，包含整数和小数
2.string 字符串类型
3.boolean 布尔类型，布尔类型只有两个值 true false；true表示真，false表示假
4.undefined 类型，表示未定义的类型
5.object 对象类型
6.null 空对象，特殊类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量的分类</title>
<style>
*{
margin: 0;
padding: 0;
}
.wp{
width: 200px;
height: 200px;
background: #04be02;
}
</style>
</head>
<body>
<div id="wp" class="wp"></div>
</body>
</html>
<script>
// 数字类型
let num1 = 123;
/*
使用 typeof 方法获取变量的类型
使用方法：
typeof 变量名
typeof (变量名)
返回的是变量的类型
*/
console.log(typeof num1);
console.log(typeof(num1));
console.log(typeof(123.23));
// 字符串类型
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);
// undefind 类型
let abc;
console.log(typeof abc);
// 对象类型
/*
js 中通过 document.getElementById('元素id');获取dom元素
*/
let wp = document.getElementById('wp');
console.log(typeof wp);
console.log(wp.className);
// null类型
let n = null;
console.log(typeof n);
</script>
06 变量类型注意问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量类型注意问题</title>
</head>
<body>
</body>
</html>
<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类型
let n6 = str3 - n1;
console.log(n6);
let n7 = str4 - n1;
console.log(n7);
if(n6==n7){
console.log('不可能');
}else{
console.log('NaN和NaN不能相等');
}
/*
字符串一般都由 引号包裹，可以单引号，也可以是双引号
如果字符串外部都是单引号，内部如果有引号，只能是双引号，反之亦然
字符串的转义字符
\n : 换行
\t : tab键
\' : 单引号
\" : 双引号
\\ : 表示\
*/
let str5 = '子曰：\'学而时习之\'';
console.log(str5);
let str6 = '黑发不\n知勤\t学早';
console.log(str6);
alert(str6);
</script>
2103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
