day01 JS介绍
1. 讲师介绍及纪律要求
2. JavaScript发展历史
早期浏览器的发展 1990年年底-万维网—此时的网页只能通过操作系统的终端查看 1994年—NetScape(网景公司)在第一台浏览器的基础上研发了商用浏览器—此时这个商用浏览器出现的目的是为了解决表单提交 Js的诞生 1995年 网景公司找了一个程序要 布兰登.爱奇 这个程序员借鉴了其他的脚本程序 用了10天 研发出了一个专门解决表单提交的脚本语言 这个语言叫liveScript 后改名为JavaScript 浏览器战争 在当时JavaScript很火 微软公司的在IE3的浏览器上也研发了一个jsscript 后来由于竞争 市面上出现很多JavaScript语言 对于程序员来说 编程很困难 ECMA这个机构就开始统一标准 从各个公司找来一些程序员 以网景公司的JavaScript为基础 制定标准 这个标准叫ECMAScript ECMAScript1.0 ECMAScript5.0 ECMAScript6.0 ECMAScript和JavaScript的关系是什么？ ECMAScript 是js的语法标准 JavaScript 是ECMASCript标准的实现
3. JavaScript介绍
3.1 网站组成
HTML 超文本标记语言 主要用户页面结构 css 层叠样式表 用于结构的布局 样式 JavaScript 脚本语法----用于网站的交互
3.2 什么是JavaScript
==基于对象和事件驱动的解释性脚本语言==
-
基于对象：JavaScript 是一种基于对象的语言，这意味着它能运用自己已经创建的对象，因此，许多功能可以来自脚本环境中对象的方法与脚本的相互作用。
-
事件驱动：JavaScript 可以直接对用户或者客户输入做出响应，无须经过 web 服务器，它对用户的响应，以事件驱动的方式进行。
-
解释性：
-
解释性：可以直接识别语言 读取一行执行一行
-
编译性：高级脚本语言 c和c++就是高级脚本语言 先编译成计算机识别的编码 然后再执行
-
3.3 ==JavaScript的特性==
基于对象 事件驱动 解释性(js代码直接被浏览器解析) 跨平台
3.4 ==JavaScript的组成==
ECMASCript：js的语法标准 常用的对象 DOM：Document Object Model 文档对象模型 BOM：Brower Object Model 浏览器对象模型
4.代码初识
4.1 JS引入方式
-
行内引入
<body> <!-- 行内引入 事件类型="要做的事情" alert(要弹的内容) 用于网页弹窗 缺点：结构不分离 不方便后期维护 --> <button οnclick="alert(123)">按钮1</button> </body>
-
内部引入
<body> <script> alert(1) </script> <!-- 内部引入 js代码直接写在script标签中 script标签可以放在任意的位置 建议：一般放再head或者body的末尾 最好放在body的末尾 缺点：结构不分离 --> <button>按钮1</button> <script> alert(5) </script> </body>
-
外部引入
<body> <!-- 外部引入 通过script标签的src属性引入外部js文件 注意：用于引入外部js文件的script标签中不要再写其他代码 --> <script src="./outer.js"></script> <script> alert(11) </script> </body>
4.2语法规则与注释
-
语法规则
js中严格区分大小写 建议使用驼峰命名 ClassId classId 每行语句后加分号;
-
注释
单行注释 // 注释内容 ctrl+/ 多行注释 /* 多行注释内容 */ ctrl+shift+/ 不是所有人的快捷方式都是这个 设置-键盘快捷键方式-找块注释和行注释
4.3 JavaScript的调试语句
-
调试：在程序开发过程中检查代码的一种方法 所有的调试语句后续上线之后必须删除掉
4.3.1 alert
-
语法：alert(提示信息)
-
作用：再页面弹出警告框 提示框
-
注意：这是一个阻塞性弹窗，一次只能弹一个提示信息
//js脚本 js中的文字信息需要加引号(单引号或者双引号)
alert("今天周二");
4.3.2 console
-
语法：console.log(输出信息)
-
作用：再控制台打印输出信息，多个输出之间用逗号隔开
<script>
// console.log(输出信息)
console.log("今天周二", 123);
console.log(456);
</script>
4.3.3 打断点
<script>
var x = 10;
var y = 20;
/*
控制台-sources-找到运行文件-在行号前面点击一下 出现蓝色标
*/
</script>
4.4 变量
-
变量：存储数据的容器 变量名给存储区域起个名字
-
声明变量 var 变量名 = 值
-
基本用法
//基础用法
//1.声明变量 什么情况下会输出undefined？ 只声明变量没有赋值结果是undefined
var a;
console.log(a);//undefined
// 2.声明变量并赋值
var b = 10;//读作 将等号右边的值赋值给等号左边的b
console.log(b);//10
// 3.先声明后赋值
var x;
x = 30;
console.log(x);//30
// 4.同时声明多个变量
var x1 = 10, x2 = 20; //相当于var x1 = 10; var x2 = 20;
console.log(x1, x2);
// 5.连等的写法
var x3 = x4 = "周二";
console.log(x3, x4);
-
==特殊用法 不建议大家使用==
// 特殊用法 不建议大家用的写法
// 注意1：xxx is not defined 没有定义变量但是你却使用了
console.log(y);// 报错 y is not defined
// 注意2：定义变量可以不用带var 不带var声明的是全局变量 不建议使用这种写法
y1 = 10;
console.log(y1);
-
变量的命名规则
变量的命名规则
1.以数字 字母 下划线 $组成 但是不能以数字开头
2.见名知意 遵循驼峰命名 ClassId classIdStyle
3.不要使用关键字和保留字 例如 if for break int等等
4.变量重名会被覆盖
5.面试题
1.什么是js 2.js的特性 3.js的组成 4.js的引入方式及特性 5.变量的命名的规则 6."a is not defined"代表什么意思 7.什么时候会出现undefined
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
