前端——js基础

一、JavaScript （简称js）——js可以给网页实现一个动态效果

1.JavaScript 组成

- 核心语法 ECMScipt 简称(es): 规范js的基本语法

1.es是js的语法规范管理者

2.js是es的实现操作者

- DOM => 文档对象提供js操作 (例如: 通过js来获取页面中某个元素)

- BOM => 浏览器对象模型英文全称: Browser Object Model 提供一系列操作浏览器的方法

2.js书写位置

- 内部js写法: 直接写在html里面要使用script标签包裹

- 外部js写法: 新建一个js文件通过script里面 src属性引入

注意：js书写规范:

1.严格区分大小写

2.标点字符半角输入法使用英文标点符号

3.严格缩进 (换行空格对齐) 维护好代码的可观性和可读性

4.js语句在结束加分号结尾 (;)

5.命名多用驼峰命名见名知意

示例——html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外部js写法   通过script 的src属性  引入 js文件 -->
    <script src='./index.js'></script>
</head>
<body>
    <!-- js内部写法  通常放置在 body结束标签前面   -->
    <script>
        //  script标签内 只能写js代码  

        // 两个斜杠 js单行注释  快捷键:ctrl+/   

        /* js多行注释  */

        // 输出内容方式   (在js里 你要输出的文本内容都需要放到引号里面)

        // 方法1: 弹框输出内容
        alert('你好啊');

        // 方法2: 控制台输出方法  
        console.log('你好');
    </script>
</body>
</html>

3.变量

1. 变量用途是什么——存储数据

声明变量才能使用

通过关键字来声明 let是新版本用来声明变量的关键字

2. let和const声明的变量区别是：

let: 变量可以先声明后赋值可以重复给变量名赋值

const: 声明必须赋值不能重复赋值不变的量

3. 什么是常量？

不变的量声明必须赋值不能重复赋值

示例1

<script>

// 声明一个变量这个变量名叫 wx

let wx;

// console.log(wx);

//undefined 相当于初始值就是还没给这个变量进行赋值

// 把无限好帅存储到变量名为 wx 通过等号赋值(=)

wx = '无限好帅';

// 通过console.log方法打印 wx的值

console.log(wx);

// 声明变量并且赋值常用

let str = '想吃烧烤';

console.log(str);

let a = 123;

// 打印一个大写A则会报错 js严格区分大小写

console.log(a);

</script>

示例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1. 声明变量  并且赋值   常规写法
        let num = 1;
        console.log(num);


        // 2.声明变量  暂时不赋值 
        let box;
        console.log(box);// 默认值: undefined  初始值  未定义的值 
        
        
        // 3.声明   先运算  在赋值  
        let a=1;
        //  a =1
        let b=2;
        //  b=2 
        let sum=a+b;
        // 先执行  右边运算    sum=  1+2  在赋值    sum =3
        console.log(sum);


        // 4.重复声明  会报错  
        // let str='我的宝贝';
        // let str='亲爱的';
        // console.log(str);

        // 5. 一次性 声明多个变量名   用逗号隔开 
        let box1='盒子',wrap='写个内容',text='看看你是什么文本';
        console.log(box1,wrap,text);

        // 6. 省略 let  直接赋值 调用    解析器  会帮我们  隐式声明  变量   
        sex ='男'
        console.log(sex);
        // 不写let  不利于表达意图  
        
        
        // 7. 声明变量  给这个变量名  重复赋值    后面会覆盖前面   
        let str;
        str=10;
        str=20;
        console.log(str);// 20 

        // const   声明变量方法   声明常量     而非普通变量   比如π等  
        const str1='处对象';
        console.log(str1);
        // 重新给  str1赋值  
        // str1='搞什么咯,好好学习'; 
        // console.log(str1);  //  报错   不能修改 常量的值   


        //  const声明常量    不会改变的量      声明那就必须赋值 不赋值就报错   
        // const cpdd;
        // console.log(cpdd);
    

    </script>
</body>
</html>

效果：