专栏首页李才哥JavaScript秘密笔记 第一集
原创

JavaScript秘密笔记 第一集

1. 什么是JavaScript

2. 如何使用JavaScript

3. *变量

4. *数据类型

谁记得笔记越多,谁学的越烂!

1. 什么是JavaScript:

前端三大语言:

HTML: 专门编写网页内容的语言

CSS: 专门编写网页样式的语言

问题: 使用HTML和CSS做出的网页,只能看不能用

——静态语言! 静态页面!

解决: 凡是用HTML和CSS做出的静态页面都要添加交互行为后,才能让用户使用。

什么是交互: 3步:

1. 用户输入数据/执行操作

2. 程序接受并处理数据/响应用户的操作

3. 程序返回处理结果

JavaScript: 专门为网页添加交互行为的语言

为什么: 只有JavaScript才能给网页添加交互行为

何时: 凡是HTML和CSS做出的静态页面,都要用JavaScript添加交互行为后,才能给用户使用

js能做什么:

1. 表单验证:

2. 客户端数据计算:

3. 动画效果/网页游戏:

第一个js程序:

如何添加js程序: 2处:

1. 在HTML文件中的<script>内

通常,script会放在body的结尾

问题: 放在html文件中的script,仅当前页面可用,无法重用!

解决:

2. 在独立的js文件中编写js程序

强调: js文件中,只包含js程序,不必添加<script>

再在页面中用<script src="url">引入

优: 一次定义处处使用,一次修改处处生效!

总结: 任何情况下,不要重复自己的代码(DRY原则)

发展历程:

ECMAScript: JavaScript -> ECMA -> ECMAScript标准

ECMAScript标准是规定js语言核心语法的标准

JavaScript: NetScape参照ES标准,制作的JavaScript语言版本

JScript: Microsoft参照ES标准,制作的JavaScript语言版本

ES3.1 存在很多问题

ES5, 6, 2016....

原生js: 不需要下载任何第三方文件,就可执行使用的js程序.

三大组成部分:

1. ECMAScript: 核心语法 7+3

比如: console.log("...")

变量的声明,赋值,取值...

2. DOM: 专门操作网页内容的程序 2

比如: document.write("...")

3. BOM: 专门操作浏览器窗口的程序 1.5

比如: alert("...")

2. 如何使用JavaScript:

JavaScript的开发环境和运行机制:

开发: 编写代码: WebStorm

运行机制: 所有JavaScript程序都要运行在js引擎中

什么是js引擎: 专门解析js程序,并执行计算程序的小软件。

如何运行js程序: 2种:

1. 浏览器中已经内置了js引擎程序

只要有浏览器,就可运行js程序

浏览器的组成: 2个小软件

内容排版引擎: 专门解析HTML和CSS程序,并绘制网页内容的小程序。

脚本解释引擎(js引擎): 专门解析js程序,并执行计算程序的小软件。

问题: js语言只能做前端,不能做后端和数据库

程序员要想完成整个网站必须学习多种语言

解决:

2. 将js引擎从浏览器中脱离出来,独立安装!

Node.js——专门在服务器端执行js程序的小软件

MongoDB——专门采用JS语法规范的数据库

Browser Server DB

js Node.js MongoDB

jQuery

NG...

js的基本语法:

1. 区分大小写

2. 所有字符串,必须放在引号中,但单双引号均可

问题: 如果字符串内容中也包含引号

解决: 将内部的引号和外部的引号分别用单双引号区分开。

3. 每条语句必须用分号结尾

4. 注释: 2种:

//单行注释

/*

多行注释

*/

调试js程序:

只要想要的效果没出来,就是出错了!

只要出错就,F12,开控制台!

控制台(console): 显示错误的原因和出错的位置

输出: 3种:

1. 向网页中输出内容:

document.write("输出的内容")

问题: 会影响网页布局

解决:

2. 弹出警告框: alert(“提示内容”)

其实对话框已经被浏览器做好,藏在程序中.

alert()只是显示出来而已。

问题: 1. 模态: 阻止用户操作页面

2. 样式固定的,无法修改!

解决:

3. 输出到控制台: console.log(“输出的内容”)

在 控制台 记录 一句话

控制台的使用:

什么是: 编写,调试并查看程序输出的小窗口

为什么: 即不影响页面,又不阻碍用户操作.

何时: 只要调试程序或查看小程序的输出,都要在控制台执行。

如何:

1. 每输入一条语句,按回车,执行

2. 控制台中积累的内容不想要了,可点漏斗左边圆形叉号,清空控制台.

3. 多行,批量执行: shift+enter 不执行,仅换行

4. 如果写过的程序,想修改: 可用上下键切换已经执行过的程序

3. *变量:

什么是: 内存中保存*一个*数据的存储空间,再起一个名字

为什么: 程序中的数据,默认都只能使用一次

只有保存在变量中的数据,才能被反复使用

何时: 只要一个数据,可能被反复使用时,都要先保存在变量中。

如何: 3件事:

1. 声明:

什么是: 在内存中创建一个变量,再起一个名字.

何时: 所有变量,在使用前,必须先声明

如何: var 变量名;

创建

变量名的要求:

1. 字母,数字,_和$组成,不能以数字开头!

2. 不能使用保留字:

保留字: js语言中已经提前使用的,有特殊意义的词

3. 见名知义

4. 驼峰命名: 首字母小写,之后每个单词首字母大写!

width, fontSize,backgroundColor,listStyleType

强调: 仅声明,暂时未赋值的变量其中,保存了默认值undefined.

简写: 一个var可同时声明多个变量:

var 变量1,变量2,....;

2. 赋值:

什么是: 将等号右边的值保存到等号左边的变量中。

如何: 变量名=值;

强调: 只有等号=才能改变变量中的值

特殊: 强行给未声明过的变量赋值:

结果会自动创建该变量——广受诟病的缺陷

容易造成误会!

解决: 禁止给未声明的变量赋值!

如何: ES5: 严格模式:

什么是: 比普通js要求更严格的运行模式:

规定: 禁止给未声明的变量赋值!

如何: 在当前代码的顶部: "use strict";

总结: 今后所有项目,都应该在严格模式下运行

简写: 声明同时,就初始化变量的值——强烈建议

var 变量名=值;

声明 赋值

更简化: 如果同时声明并初始化多个变量:

var 变量名1=值1,

变量名2=值2,

... = ... ;

鄙视: var a , b=2; console.log(a,b);//undefined 2

解决: 每个变量一换行

3. 取值: 程序中,任何位置,使用变量名,等效于直接使用变量中的值!

特殊: 尝试使用未声明过的变量——报错!

ReferenceError: 引用错误!

凡是看到引用错误,都说明要用的变量没找到

常量: 一旦创建,值不能改变的量

何时: 如果一个值,一旦创建,不允许随意修改时

如何: const 常量名=值;

强调: 1. 常量在声明时,必须赋值

2. 习惯: 常量名要全大写!

问题: 传统ES标准: 强行修改常量的值:

即不报错,也不让修改——静默失败

解决: ES5: 严格模式:

规定: 将所有的静默失败升级为错误!

4. *数据类型:

什么是: 数据在内存中的存储结构

为什么: 因为不同类型的数据,可执行的操作,不一样.

不一样的操作,就要求不同的存储结构支持。

包括: 2大类:

1. 原始类型: 值直接保存在变量本地的数据类型

包括5种: number, string, boolean, null, undefined

2. 引用类型: 值无法保存在变量本地的数据类型

number: 专门存储数字的类型

何时: 只要用于计算或比较的数字都要存为number类型——不要加引号

比如: 价格, 数量, 分数, 年龄, ...

反例: 手机号, QQ号,身份证号

如何: 凡是程序中不加引号的数字,自动就是number类型.

存储空间: js中每个数字占8字节

整数占4字节

1字节(byte)=8位二进制数(Bit)

1KB=1024byte

1MB=1024KB

1GB=1024MB

number类型的数值大小和所占存储空间无关!

将十进制转为二进制: n.toString(2)

string:

boolean:

null/undefined:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript秘密笔记 第三集

    什么是: 在开始正式执行程序前,引擎会将var声明的变量和function声明的函数,提前到*当前作用域*的顶部,集中创建。

    李才哥
  • Bootstrap 响应式框架 第五集

    2、在 tab-content中包含任意多的内容模块(class="tab-pane")

    李才哥
  • 我们不一样

    因此,为了向处于美食诱惑之下的亲朋好友们解释软件相关工作的一般概念,这有一个比喻来帮助你。

    李才哥
  • 18年最受欢迎的JS项目

    通过对比各项目过去 12 个月在 GitHub 上新增 star 数量,来评估其在 2018 年度的受关注程度,进而选出 2018 年度 JavaScript ...

    grain先森
  • 没有用到React,为什么我需要import引入React?

    本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖。

    Tz一号
  • nop 添加字段

    wfaceboss
  • Makefile常用知识点

    程序手艺人
  • PE格式第三讲扩展,VA,RVA,FA的概念

    VA (virtual Address) 虚拟地址的意思 ,比如随便打开一个PE,找下它的虚拟地址

    战神伽罗
  • PE格式第三讲扩展,VA,RVA,FA(RAW),模块地址的概念

              PE格式第三讲扩展,VA,RVA,FA的概念 一丶VA概念 VA (virtual Address) 虚拟地址的意思 ,比如随便打开一个PE...

    IBinary
  • 聚焦【技术应变力】云加社区沙龙online重磅上线!

    云加社区结合特殊时期热点,挑选备受关注的音视频流量暴增、线下业务快速转线上、紧急上线防疫IoT应用等话题,邀请众多业界专家,为大家提供连续十一天的干货分享。从视...

    腾小云

扫码关注云+社区

领取腾讯云代金券