01-JavaScript入门

目录

1.1js三个组成部分

问题1：为什么要学习JavaScript?

问题2：JavaScript作用？

问题3：JavaScript三个组成部分？

1.2 js三种书写位置

1-复习CSS代码的三种写法

2-JS代码三种写法

3-细节注意点

1.3 js两种注释写

1.4-输入与输出语

输出语句1 : 在网页弹出一个提示框，输出数据

输出语句2：在控制台打印某个数据

输出语句3：将数据显示到网页

输入语句1：在网页弹出一个输入框，让用户输入数据

输入语句2：在网页弹出一个确认框，让用户选择确认或取消

1.5-js代码执行原理介绍

1-计算机组成

2-代码运行的原理

02-数据类型

1.1-数据类型介绍

1.2-五种基本数据类型

1.3-随堂练习：数据类型与输出语句

1.4-typeof检测数据类型

03-变量

问题1：为什么要学习变量？

问题2：变量的作用？

问题3：变量原理

1.1-变量声明/取值/赋值

1.2-变量使用注意点

1.3-变量命名规则与规范

1.4-随堂练习：变量语法

1.5-变量练习：交换两个变量的值

1.6-常量

1.7-字面量

04-运算符与表达式

1.1-算术运算符

1.2-赋值运算符

1.3-自增自减运算符

1.4-关系运算符

扩展:字符串比较的是ASCII码:

1.5-逻辑运算符

1.6-随堂练习：运算符

1.7-运算符优先级

05-第一天综合案例：订单信息管理

---

1.1js三个组成部分

问题1：为什么要学习JavaScript?

• 一个前端网页主要由三门语言组成，他们之间是缺一不可的关系

  • HTML：确定网页的结构

  • CSS: 确定网页的样式

  • JavaScript: 确定网页的行为(交互)

    • 众所周知，在前端开发中一个网页的源代码主要由三部分组成（HTML,CSS,Javascript）,其中HTML确定网页的结构，CSS确定网页的样式,而JavaScript则主要负责网页的行为（动态效果，交互事件等）。

• 总结：因为前端网页由三部分组成,HTML、CSS、JavaScript

问题2：JavaScript作用？

JavaScript作用:确定网页的行为交互

• 说人话： 教网页做事请。

问题3：JavaScript三个组成部分？

• ECMAScript - JavaScript的核心

  • ECMAScript定义了JavaScript的语言规范

  • JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

• DOM - 文档对象模型

  • 一套操作页面元素的API

  • DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

• BOM - 浏览器对象模型

  • 一套操作浏览器功能的API

  • 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

1.2 js三种书写位置

1-复习CSS代码的三种写法

• 1.行内样式：不推荐，因为不便于维护

  • 哈哈哈

• 2.内部样式：写在style标签中,如果界面css样式比较简单可以使用，复杂的话不推荐

• 3.外部样式：写在css文件中，使用link导入

  • • css外联样式的本质其实就是字符串替换 将下方这行代码替换成对应文件的所有代码

2-JS代码三种写法

• JavaScript也有三种书写方式，并且与CSS的三种书写方式几乎一致

• 1.行内样式：不推荐，因为不便于维护

  • 欢迎来到黑马程序员

• 2.内部样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐

• 3.外部样式：写在js文件中，使用script的src属性导入

3-细节注意点

• 1.无论是CSS还是JS的三种写法，当一个html文件存在多种写法时要记住HTML的代码是从上往下解析的

• 2.如果script标签没有src属性则表示内联样式，如果有src属性则表示外联样式，外联样式JS代码只能写在 js文件中而不能写在script标签中

    
    
    
    
    
    



    
    我是按钮
    
    
    

1.3 js两种注释写

• 代码注释的作用：

  • 1.理清思路，方便自己以后阅读代码

  • 2.规范编程，方便以后别人接手代码便于维护

• JS注释有两种写法

  • // 注释内容:单行注释：注释内容只能是一行，适用于注释内容较少

    • vscode快捷键 CTRL + /

  • /* 注释内容 */:多行注释：注释内容可以是多行，适用于注释内容较多，比如一行写不下

    • vscode快捷键 ALT + SHIFT + A

1.4-输入与输出语

输出语句1 : 在网页弹出一个提示框，输出数据

//输出语句1:弹出一个提示框，通常用于提示用户，也可以用于调试
alert("hello world");

输出语句2：在控制台打印某个数据

//输出语句2:打印某个数据的值，查看数据是否成功
//这个写法不是给用户看的，而是给程序员自己调试看的
console.log("欢迎大家来到黑马程序员");

输出语句3：将数据显示到网页

//输出语句3:将数据显示到网页，相当于给body添加内容
document.write("黑马程序员是中国最牛逼的IT培训机构");

输入语句1：在网页弹出一个输入框，让用户输入数据

//输入语句1：弹出一个输入框，可以用来输入数据
prompt("深圳的前端平均薪资是多少呀？");

输入语句2：在网页弹出一个确认框，让用户选择确认或取消

//输入语句1：弹出一个确认框，可以用来判断用户选择确认或取消
confirm("深圳的前端平均薪资是多少呀？");

1.5-js代码执行原理介绍

1-计算机组成

• 1.软件

  • 应用软件：浏览器(chrome/ie/firefox)、QQ、Sublime、Word、webstorm

  • 系统软件：windows，Linux，unix，OSX，iOS，android

• 2.硬件

  • 三大件：CPU,内存,硬盘

  • 输入设备：鼠标,键盘,摄像头等

  • 输出设备：显示器,打印机,投影仪等

 

2-代码运行的原理

02-数据类型

1.1-数据类型介绍

1.2-五种基本数据类型

1.3-随堂练习：数据类型与输出语句

1.4-typeof检测数据类型

03-变量

问题1：为什么要学习变量？

需求：弹出一个输入框，让用户输入自己的年龄，我们如何拿到用户输入的数据，并且显示在网页呢？

• 使用变量就可以获取到用户输入的数据

问题2：变量的作用？

==将数据存储在内存中==

问题3：变量原理

变量原理：内存中一块存储数据的空间

• 说人话：内存相当于现实世界中的大酒店，而变量相当于这个酒店中的一个小房间

1.1-变量声明/取值/赋值

1.2-变量使用注意点

1.3-变量命名规则与规范

1.4-随堂练习：变量语法

1.5-变量练习：交换两个变量的值

1.6-常量

1.7-字面量

04-运算符与表达式

1.1-算术运算符

1.2-赋值运算符

1.3-自增自减运算符

1.4-关系运算符

扩展:字符串比较的是ASCII码:

ASCII码:计算机识别的二进制编码

 

1.5-逻辑运算符

1.6-随堂练习：运算符

1.7-运算符优先级

实际开发中，我们不需要刻意去记忆运算符优先级。你想让哪个式子先计算，使用小括号 () 包起来即可

05-第一天综合案例：订单信息管理