JavaScript day01

最新推荐文章于 2024-05-24 23:45:01 发布

不万能的小李.

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量42

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Li1023055421/article/details/132238262

版权

01 语法介绍

<!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 组成
    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的后面


 -->
<!-- 在行间引入js -->
<a href="javascript:alert('休息都是留给死人的')">点击</a>
<a href="javascript:console.log('休息都是留给死人的')">点击console</a>
<a href="javascript:;">点击不动</a>
<a href="javascript:void(0);">点击不动2</a>
</body>
</html>
<!--
通过标签script 标签创建js 
默认 type属性值 是 type="text/javascript" 
-->
<script type="text/javascript">
console.log('把酒话桑麻');
</script>
<!-- 
外部引入js
通过 src 属性

–>

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.massage 错误信息
    // 出现异常后的补救措施
    console.log(e.message);
    console.log('你的方式出错了');
}

// console.log(abc);
console.log('雄鸡一唱天下白');
</script>

03 变量和常量

<!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;

console.log(aa);
//变量在使用之前，最好声明和定义，如果只是声明，没有定义则变量的值是undefined(未定义的)
console.log(aa);

/* 
变量声明前置，既是变量在使用变量的代码后面，浏览器也会把变量的声明提升到作用域的最前面，注意，变量的定义（赋值）不会被前置
*/

console.log(show);
var show = 200;


/*
使用 let 声明变量
在同一个作用域下， let 声明的变量,不能被重新声明

不能使用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);


</script>

04变量和常量2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量和常量2</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 表示全局变量
    类型：
        srting 字符转
        bool 布尔值

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


*/


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

/* 
常量：一旦定义，他的值不可以更改的量
声明一个常量，使用的关键字是 const
const PI = 3.14
*/
const PI = 3.14;

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

</script>

05变量的分类

<!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-color: #04be02;
        }
    </style>
</head>
<body>
    <div id="wp" class="wp">

    </div>
</body>
</html>
<script>
/* 
变量的分类
1.number 数字类型，包含整数和小数
2.string 字符转类型
3.boolean 布尔类型，布尔类型只有两个值 true flase,true表示真，false表示假
4.undefined 类型，未定义的类型
5.object 对象类型
6.null 空对象,特殊类型
7.


*/
let num1 = 123;

/* 
使用方式 typeof 方法获得变量的类型
使用方法：
    typeof 变量名
    rypeof(变量名)
返回的是变量的类型
*/

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);

// undefined 类型
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类型 值是 NaN
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>