前端——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 =1let b=2;//  b=2 let sum=a+b;// 先执行  右边运算    sum=  1+2  在赋值    sum =3console.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>

效果：