JavaScript基础01
JavaScript简介
- JavaScript 属于“前端三剑客”（HTML，CSS，JavaScript）之一。三剑客，团结一致，各司其职，共同完成网页前端的酷炫功能。
- JavaScript可以改变HTML内容、改变HTML属性、改变HTML样式（CSS）、隐藏HTML元素、显示HTML元素。
- JavaScript是编程语言
JavaSript和java的区别：雷锋和雷峰塔的区别，两则没有关系
- HTML：复制一个页面的结构与
- CSS：复制一个页面的样式
- javascript：负责与用户进行交互
JS特点
- 交互性（信息的动态交互）
- 安全性（不可以直接访问本地硬盘）
- 跨平台性（浏览器就可以解析JS）
JS由三大部分组成：
-
核心（ecmascript）：语法部分
-
文档对象模型DOM
-
浏览器对象模型BOM
ECMAScript（核心）作为核心，它规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象
DOM 把整个页面映射为一个多层节点结果，开发人员可借助DOM 提供的API，轻松地删除、添加、替换或修改任何节点。
支持可以访问和操作浏览器窗口的浏览器对象模型，开发人员可以控制浏览器显示的页面以外的部分。
JS示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is an example</title>
<script>
alert(0);
</script>
</head>
<body>
<button onclick="alert(666)">Click me</button>
</body>
</html>
使用工具
浏览器
在浏览器中按下F12键，进入开发者模式
找到 Console或者控制台
使用javascript
1、通过html提供的一个标签来把js代码与html代码集合；
<script type="text/javascript">javascript 代码</script>
2、通过标签的src属性，引入的方式把外部文件引入到html中，格式：
<script type="test/javascript" src="xxx.js"></script>
引入方式是js与html分离，方便扩展，可缓存使用。
<script>标签可以放在html页面任意位置，一般情况下，多放在<head></head>之内，但是如果html解析及调用的html中的标签，把script标签放在html标签的下面。
3、内联JavaScript
<button onclick="alert(666)">Click me</button>
JavaScript 关键字
JavaScript 关键字用于标识要执行的操作。
和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。
JavaScript关键字表：
| abstract | arguments | boolean | break | byte |
| case | catch | char | class* | const |
| continue | debugger | default | delete | do |
| double | else | enum* | eval | export* |
| extends* | false | final | finally | float |
| for | function | goto | if | implements |
| import* | in | instanceof | int | interface |
| let | long | native | new | null |
| package | private | protected | public | return |
| short | static | super* | switch | synchronized |
| this | throw | throws | transient | true |
| try | typeof | var | void | volatile |
| while | with | yield |
* 标记的关键字是 ECMAScript5 中新添加的。
JavaScript 注释
双斜杠 // 后的内容将会被浏览器忽略：
//单行注释
/*多行注释*/
变量
JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
声明（创建）变量
我们使用 var 关键词来声明变量：
var name;
变量声明之后，该变量是空的（它没有值）。如需向变量赋值，请使用等号：
name="Ltsec";
也可以在声明变量时对其赋值：
var name="Ltsec";
在 2015 年以前，我们使用 var 关键字来声明 JavaScript 变量。
在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量，使用 let 关键字定义
的限定范围内作用域的变量。
数据类型
值类型：
- 字符串String
- 数字Number
- 布尔Boolean
- 空Null
- 未定义Undefined
引用数据类型：
- 对象Object
- 数组Array
- 函数Function
动态类型
JavaScript 拥有动态类型。相同的变量可用作不同的类型
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
字符串
字符串是存储字符（比如 “Bill Gates”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
// 单引号
var carname='Volvo XC60';
console.log(carname);
// 双引号
var carname="Volvo XC60";
console.log(carname);
// 转义引号
var carname="Volvo \"XC60\"";
console.log(carname);
数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带
var x1=34.00; //使用小数点来写
console.log(x1);
var x2=34; //不使用小数点来写
console.log(x2);
极大或极小的数字可以通过科学（指数）计数法来书写：
var y=123e5; // 12300000
var z=123e-5; // 0.00123
console.log(y);
console.log(z);
布尔
布尔（逻辑）只能有两个值：true 或 false。
var x=true;
var y=false;
console.log(x);
console.log(y);
数组
var cars1=new Array();
cars1[0]="Saab";
cars1[1]="Volvo";
cars1[2]="BMW";
console.log(cars1);
var cars2=new Array("Saab","Volvo","BMW");
console.log(cars2);
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
var cars;
console.log(cars);
var person=null;
console.log(person);
声明变量类型
使用关键词 “new” 来声明其类型
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
console.log(carname);
console.log(x);
console.log(y);
console.log(cars);
console.log(person);
运算符
算数运算符
| 运算符 | 描述 | 例子 | x 运算结果 | y 运算结果 |
|---|---|---|---|---|
| + | 加法 | x=y+2 | 7 | 5 |
| - | 减法 | x=y-2 | 3 | 5 |
| * | 乘法 | x=y*2 | 10 | 5 |
| / | 除法 | x=y/2 | 2.5 | 5 |
| % | 取模（余数） | x=y%2 | 1 | 5 |
| ++ | 自增 | x=++y | 6 | 6 |
| – | 自减 | x=–y | 4 | 4 |
赋值运算符
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
字符串+运算符
+运算符用于把文本值或字符串变量连接起来
文本
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
console.log(txt3);
文本和数值
x="Hello"+5;
console.log(x);
控制结构
条件语句
在 JavaScript 中，我们可使用以下条件语句：
-
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
-
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代
-
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
-
switch 语句 - 使用该语句来选择多个代码块之一来执行
if 语句
var time = 11;
if (time < 20) {
x = "Good day";
}
console.log(x);
if…else 语句
// 根据当前时间生成问候
var time = 9, x;
if (time < 20) {
x = "Good day";
} else {
x = "Good evening";
}
console.log(x);
if…else if…else 语句
// 根据当前时间生成问候
var time = 11;
if (time < 10) {
document.write("<b>早上好</b>");
} else if (time >= 10 && time < 20) {
document.write("<b>今天好</b>");
} else {
document.write("<b>晚上好!</b>");
}
switch 语句
var d = new Date().getDay(); // 获取今天是星期几，返回一个0-6的整数
switch (d) {
case 0:
x = "今天是星期日";
break;
case 1:
x = "今天是星期一";
break;
case 2:
x = "今天是星期二";
break;
case 3:
x = "今天是星期三";
break;
case 4:
x = "今天是星期四";
break;
case 5:
x = "今天是星期五";
break;
case 6:
x = "今天是星期六";
break;
}
console.log(x);
循环语句
如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
如：
cars = ['兰博基尼', '布加迪', '法拉利', '劳斯莱斯', '保时捷', '迈凯伦'];
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
for循环
语法：
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 代码开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
示例：
cars = ['兰博基尼', '布加迪', '法拉利', '劳斯莱斯', '保时捷', '迈凯伦'];
for (var i = 0; i < 6; i++) {
document.write(cars[i] + "<br>");
}
while循环
语法：
while (条件) {
需要执行的代码
}
示例：
cars = ['兰博基尼', '布加迪', '法拉利', '劳斯莱斯', '保时捷', '迈凯伦'];
var i = 0;
while (i <= 5) {
document.write(cars[i] + "<br>");
i++;
}
break 和 continue 语句
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
var x = '';
for (i = 0; i < 5; i++) {
if (i == 3) break;
x = x + "The number is " + i + '\n';
console.log(x);
}
示例：
var x = '';
for (i = 0; i < 5; i++) {
if (i == 3) continue;
x = x + "The number is " + i + '\n';
console.log(x);
}
714
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
