一。JavaScirpt简介
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格
JavaScript最初由Netscape的Brendan Eich设计，最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java，但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。微软同时期也推出了JScript来迎战JavaScript的脚本语言。
主要功能：
1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素。
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。 控制cookies，包括创建和修改等。
6.基于Node.js技术进行服务器端编程。
JavaScript脚本语言具有以下特点:
(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。不同于服务器端脚本语言，例如 PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。
而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖JavaScript在客户端进行支持。
运行模式：
JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
二。引入方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js引入页面的方式</title>
<!-- 第三种方式，链接外部的js文件-->
<!-- <script src="js/test01_js.js"></script>-->
<!-- 注意点：在头部中引入js时，要放在window.onload中。原因：加载页面时从上往下加载，若js代码放在head中的话会先执行，但是body的页面信息没有加载出来，针对页面的js代码也会报错-->
<script type="text/javascript">
window.onload= function () {
document.getElementById("box1").innerText= "python"
}
</script>
</head>
<body>
<!--window.onload注意点-->
<div class="box1" id="box1">C+</div>
<!--方式一，在标签中绑定js实践-->
<!--<input type="button" value="点击按钮" onclick="alert('js弹框')">-->
<!--方式二，js引入页面的第二种方式，放在script标签中-->
<!--<input type="button" value="按钮2" onclick="func111()">-->
<!--<script type="text/javascript">-->
<!-- function func111() {-->
<!-- alert("方式二，通过script标签绑定")-->
<!-- }-->
<!--</script>-->
</body>
</html>
三。基础语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基本语法</title>
<!-- 链接外部的js文件-->
<script src="js/test02_js.js"></script>
</head>
<body>
</body>
</html>
对应js文件：
window.onload= function () {
//js中的注释：单行注释：// 多行注释:/* 内容 */
//定义 a 变量
// var a = 100;
// //定义一个变量b,不进行赋值
// var b;
// //同时定义多个变量
// var c =100, d = 200, e =300;
}
//js中的注释：单行注释：// 多行注释:/* 内容 */
//定义 a 变量
// var a = 100;
// //定义一个变量b,不进行赋值,(默认内容为：undefined)
// var b;
// //同时定义多个变量
// var c =100, d = 200, e =300;
//js中的数据类型
//字符串
// var aStr = "python";
//数字,不区分整数，小数
// var x = 100;
// var y = 100.12;
//空类型
// var n = null ;
//布尔类型数据
// var t = true;
// var f = false;
//数组--->与python中的列表差不多,push-新增；pop-删除最后一位
// var aList = Array=[1,2,3];
//对象 --->与python中的字典差不多
// var aObj ={
// a:11,
// b:22,
// c:33
// }
//运算符
//加减乘除 +(加),-(减),*(乘),/(除),%(求余)
//赋值运算符
//=,+=,-=,*=,/=,%=,++(在原来的基础上+1)
//条件运算符：==(不会判断数据类型)，===（会判断数据及类型是否相等），>,>=,<,<=,!=
// var aa='111',bb=111;
// console.log(aa==bb);
// console.log(aa===bb);
//逻辑运算符
//&&(与)，||(或)，!(否)
//条件语句
//if -- else 语句
// var i = 10;
// if (i<200){
// console.log("i小于200,条件成立");
// }else {
// console.log("i小于200，条件不成立")
// }
//if --else if ---else语句
// if (i ===100){
// console.log("i等于100，条件成立");
// }else if (i <100){
// console.log("i小于100");
// }else {
// console.log("i大于100");
// }
//函数
// function func1() {
// console.log("这个是func1函数")
// }
//函数调用
// func1();
//带参数的函数
// function func2(var1,var2) {
// var sum = var1+var2;
// console.log("var1+var2的结果是",sum);
// }
//调用
// func2(11,22);
//带返回值的函数：return
// function func3(var1,var2) {
// return var1+var2;
// }
//调用,创建变量进行接收
// var res = func3(11,223);
// alert(res)
//对象
//创建对象的方式1:var
// var aObj ={a:100,b:200};
// console.log(aObj)
//创建对象的方式2:new
// var Bobj = new Object();
//对象中的方法
// var cObj ={
// name:"小明",
// age:18,
// //对象方法的定义
// fun:function (var1,var2) {
// console.log(var1+var2);
//
// }
// }
//循环
//外循环
// var i =0;
// while (i<10){
// console.log(i)
// i++
// }
//for循环
//第一种遍历
var aList = Array=[11,22,33,44,55];
// 对象 --->与python中的字典差不多
var aObj ={
a:11,
b:22,
c:33
}
//遍历数组，遍历出来的是数组的下标
// for(i in aList){
// console.log(i,aList[i]);
// //通过break跳出循环
// if (i == 3){
// break
// }
// }
//遍历对象：遍历出来的是对象的属性名
// for(i in aObj){
// console.log(i,aObj[i]);
// }
//for 循环的第二种用法,类似于java，t=0 for循环执行之前执行，t<10 成立的条件；t++ for循环执行完后执行
for(t=0;t<10; t++){
console.log(t)
}
四。document树操作，修改元素
1）定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document树</title>
<!-- 链接外部的js文件-->
<script src="js/test03_js.js"></script>
</head>
<body>
<div id="box1">box1</div>
<a href="">a标签</a>
</body>
</html>
对应js操作：
window.onload = function () {
var box = document.getElementById("box1")
//获取box1的标签的文本输出到控制台
console.log(box.innerText);
//更改标签的文本内容
box.innerText = "python"
}
2）修改元素，添加事件
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/test01.js"></script>
</head>
<body>
<div class="box1" id="box1">box1
<span>00000</span>
</div>
<div class="box2" id="box2">box2</div>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
js操作方法：
window.onload = function () {
//js选择页面元素
var box1 = document.getElementById("box1")
//更改标签内容
//HTML修改标签及文本内容
//box1.innerHTML = "python"
//Text只修改文本内容
//box1.innerText = "java"
// console.log(box1.innerHTML)
// console.log(box1.innerText)
// 更改标签属性
var a = document.getElementsByTagName("a")[0]
//读取属性
console.log(a.href)
a.href = "http://hao123.com"
console.log(a.href)
//添加事件
var box2 = document.getElementsByClassName("box2")[0]
//为box2增加一个点击事件，当点击的时候提示“000”
box2.onclick = func1
}
//添加一个函数
function func1() {
alert("000")
}