主要内容：
1、JavaScript介绍
2、JavaScript的引入方法和输出及注释
3、javaScript变量和命名规则
4、五种基本数据类型
5、运算符
6、字符串处理
7、数据类型转换
一、JavaScript介绍
1、JavaScript是什么？
javaScript是一种web前端的描述语言，也是一种基于对象（object）和事件驱动（Event Driven）的、安全性好的脚本语言。 它运行在客户端从而减轻服务器的负担。
具有如下特点：
（1）javaScript主要用来向html页面中添加交互行为。
（2）javaScript是一种脚本语言，语法和C语言系列语言的语言类似，属弱语言类型。
（3）javaScript一般用来编写客户端脚本，但node.js例外。
（4）javaScript是一种解释型语言，边执行边解释无需另外编译。
2、javaScript的用途是什么？
javaScript的用途是解决页面交互和数据交互，最终目的是丰富客户端效果以及数据的有效传递。
具体而言：
（1）实现页面交互，提升用户体验实现页面特效。即js操作html的dom结构或操作样式。
（2）客户端表单验证即在数据送达服务器之前就进行用户提交信息即时有效地验证，减轻服务器压力。即数据交互。
3、javaScript和ECMAScript的关系是什么？
区别：
ECMAScript是脚本程序设计语言的web标准。
JavaScript是一种轻量级的解释型的脚本语言。
联系：
ECMAScripts是欧洲计算机制造协会，基于美国网景通讯公司的Netscape发明的javaScript和 Microsoft公司随后模仿javaScript脚本语言制定了ECMAScript标准。
4、javaScript有哪几部分组成？
主要有三部分组成：
分别是ECMAScript、DOM、BOM。
DOM是当指网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
BOM指的是浏览器对象模型（Browser Object Model (BOM)），尚无正式标准。
二、JavaScript的引入方法和输出及注释
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中，或者同时存在于两个部分中。
1、<script>标签
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript:
2、javaScript引入方式有三种，分别是行内式，内部式和外链式（用得最多）。
（1）行内式：将javaScript代码块直接写在标签内。
如：<input type="button" onclick="alert('提交成功！')" value="提交"/>
（2）内部式：在<head>...</head>或<body>...</body>之间使用<script></script>标签，将javaScript代码写在其中。
实例1---在<head></head>之间插入
<!DOCTYPE html>
<html>
<head>
<script>
function click_btn(){
//弹出警告框
alert("重置成功！");
}
</script>
</head>
<body>
<input type="reset" onclick ="click_btn()" value="已重置"/>
</body>
</html>
实例2---在<body></body>之间插入
<!DOCTYPE html>
<html>
<body>
<h2>My web</h2>
<p id="demo">这是一个段落</p>
<button type="button" onclick="click_btn()">Try it</button>
<script>
function click_btn(){
// 改变段落的文字为指定的内容
document.getElementById("demo").innerHTML="My first JavaScript Funtion";
}
</script>
</body>
</html>
（3）外链式：可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件。
实例：
html文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试专用</title>
<script src="js/myScript.js"></script>
</head>
<body>
<h2>My web</h2>
<p id="demo">这是一个段落</p>
<button type="button" onclick="click_btn()">Try it</button>
</body>
</html>
myScript.js文件如下：
function click_btn(){
document.getElementById('demo').innerText = "我的第一个JavaScript函数";
}
3、JavaScript常见输出方法
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
注意：JavaScript 没有任何打印或者输出的函数。
（1）使用 window.alert()
<!DOCTYPE html>
<html>
<body>
<p>答案依次是11、5+6、56，你猜对没？</p>
<script>
window.alert("猜测一下以下几个问题答案？")
window.alert(5 + 6);
window.alert("5+6");
window.alert("5"+"6");
</script>
</body>
</html>
（2）操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<p id="demo">我的第一个段落</p>
<button type="button" onclick="click_btn()">Try it</button>
<script>
function click_btn(){
// document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
// innerHTML = "这是修改后的段落！" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
document.getElementById("demo").innerText = "这是修改后的段落！";
}
</script>
</body>
</html>
（3）写到 HTML 文档
出于测试目的，您可以将JavaScript直接写在HTML 文档中。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试专用</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date()); // 在页面打印当前时间
</script>
</body>
</html>
注意：
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
// 注意页面内容会被覆盖
document.write(Date());
}
</script>
</body>
</html>
（4）写到控制台
如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
实例：
<!DOCTYPE html>
<html>
<body>
<h1>按F12到调试页面，点击console观看</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
4、注释
注释的作用：JavaScript 不会执行注释，注释可提高代码的可读性。
注释的几种方法：
（1）单行注释
使用 “//” 符号+注释文字，可单独放一行，也可放到一行代码之后。
调试时，放到代码之前，则可阻止代码的执行。
例如：
// 输出标题：
document.getElementById("myH1").innerHTML="欢迎来到我的主页"; // 我也是注释
// document.getElementById("myH1").innerHTML="欢迎来到我的博客"; // 此时此行代码不会执行
（2）多行注释
以 “ /* ”开始，以“ */ ”结尾。
当“ /* ” 和 “ */ ”之间为代码时，则阻止多行代码的执行（用于调试时）。
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";
三、JavaScript变量和命名规则
1、变量含义：
变量使用来存储信息的容器，由于js是松散数据类型，所以变量中可以放置任何类型的数据类型。
使用包含三个过程：创建变量，储存值和代表值。
var a; 声明创建，此时这个变量中什么都没有，获取变量中的返回值时，返回值为undefined;
= 在js中是赋值的意义，将等号右侧的值赋值给等号左边的变量。
+= 在js中是保留原来的值上累加。
一次声明多个变量时，每个变量用逗号隔开，一般会相同数据类型使用一个声明。
var a=0, fn=function(){},num=5
2、变量的声明和定义
（1）先声明再定义
例如：
var cc;
cc = 'hyt';
alert(cc);
（2）声明时即定义
var cc2 = 'hh';
alert(cc2);
var CC2 = 'hh2';
alert(CC2);
（3）变量命名规范
（1）严格区分大小写
（2）命名时名称可以出现字母、数字、下划线、$，但是不能以数字开头，也不能纯数字，
不能包含关键字和保留字。
关键字：如 var、number、alert等。
注意：除了关键字，像 top、name也尽量不使用。
（3）推荐使用驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，
其余的单词首字母大写。
（4）匈牙利命名：就是根据数据类型单词的首字符作为前缀。
扩展：JavaScript的保留字和关键字如下图：
JavaScript关键字
四、5种基本数据类型
JavaScript有两种数据类型--基本数据类型和引用数据类型，这里我们暂时只讨论基本数据类型。
1、基本数据类型（number、string、boolean、null、underfine）
（1）数字类型（number）
例如：
var a = 123;
console.log(typeof a); // number
（2）字符串类型（string）
例如：
var str = 'hello';
console.log(typeof str); // string
（3）布尔类型（boolean）
var bool = true;
console.log(typeof bool); // boolean
var bool = false;
console.log(typeof bool); // boolean
（4）空对象（可以通过将变量的值设置为 null 来清空变量。）
var nul = null;
console.log(nul); // null
（5）underfined（Undefined 这个值表示变量不含有值。）
var d1;
console.log(typeof d1); // underfined
注意有一个特殊情况：
var c = 5/0;
console.log( typeof c); // 数值infinity(无限) -- 类型为number
2、引用数据类型
分别是function、Object、Array、String、Date。
注意：
JavaScript变量均为对象，当你声明一个变量时，就创建了一个新的对象。
五、运算符
1、赋值运算符
=、 +=、 -=、 *=、 /=、 %=
例如：
var money = prompt('请输入余额：');
var allMoney = money*(1+0.05);
console.log(allMoney);
2、算数运算符
+ （加法）、 -（减法） 、 *（乘法） 、 /（除）、%(求余) 、--（自减）、++（自加）
例如：
var a = 100;
var b = 66;
var sum = a+b;
var min = a-b;
var div = b/a;
var lef = a%b;
console.log(sum,min,div,lef); // 166, 34, 0.66, 34
var c = 8,d = 10;
d += c;
console.log(d); // 18
//自增自减---> d++ 表示先赋值，后自身加1；++d 表示先自身加1，再赋值
var a1 = d++;
console.log(a1,d); // 18 , 19
var b1 = ++d;
console.log(b1,d); // 20 , 20
var c1 = --d;
console.log(c1,d); // 19 , 19
var d1 = ++d;
console.log(d1,d); // 20 , 20
3、比较运算符
==（等于）、===（等同于，值和类型均相等）、!=（不等于）、!==（不等同于与，值和类型有一个不相等，或两个都不相等）
>（大于）、<（小于）、>=（大于或等于）、<=（小于或等于）
此处需注意：“==” 和 “ ===”不同，“==”表示值相等即可，而“===”要求值和类型均要相等才成立，即“===”的要求更高。
console.log(5>8); // false
// 隐式转换 “==”比较的是值的大小；“===”是类型和值都要进行比较。
console.log("6"===6); // false
4、逻辑运算符---&&（and）、||（or）
// &&都真才为真，一假则假
console.log(false&&false); // false
// || 有真即为真，一真则真
console.log(true || false); // true
console.log(false || true); // true
六、字符串处理
1、字符串拼接
var firstName = '暮光';
var lastName = "微凉";
var fullName = firstName + "" + lastName;
console.log(fullName); // 暮光微凉
var str1 = 'cc';
var str2 = 'China';
var fullStr = "I'm " + str1+" ,and I come from" +" " + str2;
console.log(fullStr); // I'm cc ,and I come from China
2、字符串运算
// 注意：字符串之间进行“+”时，只能是拼接；但可以进行“-”、“*”、“/”运算（浏览器进行了隐式转换）
var a1 = '12';
var b1 = '8';
var b2 = '2.5'
console.log(a1+b1); // 128 ---> “+”只能进行拼接
console.log(a1-b1); // 4 --> 减运算
console.log(a1*b1); // 96 --> 乘运算
console.log(typeof (a1*b1)); // number
console.log(a1/b1,a1/b2); // 1.5 4.8 --> 除运算
console.log(a1%b1,a1%b2); // 4 2 --> 取余运算
注意：
var c1 = 'one';
var c2 = 'two';
console.log(c1*c2); // NaN === not a number
console.log(typeof(c1*c2)); // number
七、数据类型转换
1、将数字类型转换成字符串类型
var a1 = 123;
var a2 = '';
var a3 = a1+a2;
console.log(a3); // 123（数值）
// 隐式转换（浏览器自身完成）
console.log(typeof a3); // string（数据类型） --> 隐式转换
// 强制转换-->使用String() 或 toString()
var b1 = String(a1);
console.log(typeof b1); // string
var b2 = 666;
console.log(typeof (b2.toString())); // string
2、将字符串类型转换成数字类型
var c1 = '999';
var c2 = Number(c1);
console.log(c2); // 999
console.log(typeof c2); // number
// parseInt() 可以解析一个字符串，并且返回一个整数；parseFloat返回一个浮点数
var d1 = '123.345hello789';
console.log(Number(d1)); // NaN（not a number）
console.log(parseInt(d1)); // 123
console.log(parseFloat(d1)); // 123.345 --> 返回浮点数
// 注意：在js中所有数据类型都被转化为boolean
var m1 = '123'; // 1
var m2 = Infinity; // 1 --> Infinity表示无限大
var m3 = -222; // 1
var m4 = 0; // 0
var m5 ; // 0
var m6 = NaN; // 0
var m7 = null; // 0
// 非0真1
console.log(Boolean(m1)); // true
console.log(Boolean(m2)); // true
console.log(Boolean(m3)); // true
console.log(Boolean(m4)); // false
console.log(Boolean(m5)); // false
console.log(Boolean(m6)); // false
console.log(Boolean(m7)); // false