javascript编程基础1
1，javascript能干什么？
直接写入html中：
<script> document.write("<h1>这是一级标题</h1>") //输出加大加黑的文本 </script>
可以定义某个页面对事件的反应：
<body>
<button type="button" onclick="alert('欢迎!')">点我!</button> //点击以后出现提示窗口，提示：欢迎！
</body>
改变html本页的某些内容：
<body> <p id="demo"> JavaScript 能改变 HTML 元素的内容。 </p> <script> function myFunction() { x=document.getElementById("demo"); // 函数首先获得元素 x.innerHTML="Hello JavaScript!"; // 然后函数把该元素的文本换一下，编程hello javascript } </script> <button type="button" onclick="myFunction()">点击这里</button> //定义了一个按钮，一点击就运行函数，然后改变id=demo的元素的内容 </body>
<button onclick="this.innerHTML=Date()">现在的时间是?</button> //定义了一个按钮，按下会改变自己按钮上的内容，注意this
改变html图像：
<script> function changeImage() { element=document.getElementById('myimage') //获取id，确定要对哪个元素下手 if (element.src.match("bulbon")) //获取元素src属性，这个属性相当于文件的url，如果从src属性中匹配到‘bulbon’，那就用bulboff这张图 { element.src="/images/pic_bulboff.gif"; } else //如果匹配不到，那就用bulbon这张图 { element.src="/images/pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
亲测有效，厉害了！注意，当改动了图以后，图像的src属性也改了，所以再次点击，会再一次变换图片
js可以改变html样式：
<body> <p id="demo"> JavaScript 能改变 HTML 元素的样式。 </p> //今天改的就是你了 <script> function myFunction() { x=document.getElementById("demo") // 找到元素，此时x相当于id=”demo“的元素 x.style.color="#ff0000"; // 改变样式，改变该样式style中的color属性，注意，用句号连接。 } </script> <button type="button" onclick="myFunction()">点击这里</button> //设置触发事件 </body>
可以验证输入：
<body> <h1>我的第一段 JavaScript</h1> <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p> <input id="demo" type="text"> //这是接收用户输入的文本框 <script> function myFunction() { var x=document.getElementById("demo").value; //获得id="demo”的文本框的内容，注意后缀的：.value 语句，不仅仅是或者某个id的位置 if(x==""||isNaN(x)) //注意，||和shell编程一样，表示or，如果x为空或者x不是数字 { alert("不是数字"); //用单独的浮动窗口提示：不是数字 } } </script> <button type="button" onclick="myFunction()">点击这里</button> //按钮激发事件 </body>
2，用法规则
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。javascript也可以被放在外部，用的时候指定它是外来的就行了
外部js程序示例：
<!DOCTYPE html> <html> <body> <script src="myScript.js"></script> //亲测有效，灰常厉害，src表示文件的url </body> </html>
事件就是某个操作执行时候，我们可以激发我们的程序。比如，点击的时候
js输出数据的方式：
- 使用 window.alert() 弹出警告框。实际上单用alert也行。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- document.getElementById("demo") 是使用 id 属性来查找 HTML 元素
- innerHTML = "xxx" 是用于修改元素的 HTML 内容
- 使用 innerHTML 写入到 HTML 元素。比如：<script> document.write(Date());</script> 直接输出中国时区的时间。
- 使用 console.log() 写入到浏览器的控制台，chrome中，控制台为shift+ctrl+j，打开以后能看到：11
js字面量：一般固定值成为字面量，整数、小数、科学计数，字符串，数组，对象，函数。
js的一些重要关键字：
以下是 JavaScript 中最重要的保留字（按字母顺序）：
| abstract | else | instanceof | super |
| boolean | enum | int | switch |
| break | export | interface | synchronized |
| byte | extends | let | this |
| case | false | long | throw |
| catch | final | native | throws |
| char | finally | new | transient |
| class | float | null | true |
| const | for | package | try |
| continue | function | private | typeof |
| debugger | goto | protected | var |
| default | if | public | void |
| delete | implements | return | volatile |
| do | import | short | while |
| double | in | static | wit |
js注释：
单行注释：//，//后面的内容就不会再执行了
多行注释：/* */，被注释的行和块就不会再执行了。
3，变量
js中变量一般是可变的，字面量是一个值。
js中声明变量就像这样： 变量必须以字母开头（$和_可用于标志特殊变量），对大小写敏感，使用关键字var来声明变量
var x=2; //也可以只声明不赋值，比如：var carname; 变量 carname 的值将是 undefined：
var y=3;
var z=x+y; //第一次声明的时候使用var，往后就不用了
var name="Gates", age=56, job="CEO";
//一下子声明很多变量也是可以的，也支持重新声明变量
//如果您把值赋给尚未声明的变量，不管是在函数内部还是脚本内部，该变量将被自动作为全局变量声明。
js常用的变量类型：数字和字符串，文本外要加单双引号，数字不用加引号
<p id="demo"></p>
<script> var carname="Volvo"; document.getElementById("demo").innerHTML=carname;
</script>
// 创建了名为 carname 的变量，向其赋值 "Volvo"，然后把它放入 id="demo" 的 HTML 段落
注意：一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明
4，js数据类型
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型
var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill"; // x 为字符串
- js字符串和一般字符串一样的，不多说。学名：String
- js只有一种数字类型，带不带小数点都可以，支持科学计数法。学名：Number
- js布尔值，ture和false，学名：Boolean
- js数组和php数组差不多，学名：Array
var cars=new Array(); //声明一个变量cars，用”new“表明了类型，是数组。实际上相当于实例化一个class cars[0]="Audi"; //然后开始向数组中加数据，注意js中的数组的下标从0开始 cars[1]="BMW"; cars[2]="Volvo";
var cars=["Saab","Volvo","BMW"]; //这样创建数组也可以，它按照下标来说事，叫：literal array
- js的Undefined数据类型就是声明了但是未赋值，所以它不含有值。
- js的变量Null表示空，可以通过将变量的值设置为 null 来清空变量。
- js对象（Object）：对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔，花括号内部空行和折行都没关系
<script>
var person={ //属性名称和值用冒号分隔，属性和属性用逗号分隔。
firstname : "Bill",
lastname : "Gates",
id : 5566
};
document.write(person.lastname + "<br />"); //对象属性有两种寻址方式，对象.属性 这种方法我比较喜欢
document.write(person["lastname"] + "<br />");
</script>
//访问对象属性：语法：objectName.propertyName
//访问对象方法：语法：objectName.methodName()
声明变量类型：
var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object;
5，js对象object
JavaScript 对象是拥有属性和方法的数据。js中，几乎所有的事物都是对象。js中对象是变量的容器。js对象是属性和方法的容器。
对象定义：
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566, //前三个是对象的属性
fullName : function() //这个定义了对象的方法，注意格式，
{
return this.firstName + " " + this.lastName; //对象的fullName方法会把firstname和lastname加起来返回。”this“估计是约等于python中的self
}
}; //对象的定义和创建完成。
document.getElementById("demo").innerHTML = person.fullName(); //向id等于demo的元素输出fullName结果。
</script>
//访问对象属性：name=person.lastName; 或者 name=person["lastName"]
//访问对象的方法：name=person.fullName(); 括号必不可少
js是基于对象的语言，所以很多功能都是通过对象来实现的：
js中对象和函数的关系比较微妙，所有的函数都是一个对象，所有的对象都可以用构造函数创建：
我理解的正常创建对象：
//这种创建对象的方法叫： 对象字面量，这种写法的缺点在于每次创建一个新对象都需要写出完整的定义语句，不利于继承
var obj1 = { //定义一个obj1的对象，对象下有name和age属性 name : '手速快',//属性 age : 27,//属性 fun :function () {//obj1下有一个fun方法，这个方法实际上是一个函数，每次调用这个方法都会打印这个对象的name属性 alert (this.name); } } console.log(obj1); //打印pbj1这个对象到调试器
当然也有一种先定义空对象，然后添加属性、方法的对象字面量方法：
var person = {}; person.name = 'zqq'; person.age = 28; person.say = function(){ return "hello"; }
但是js有一种非正常的创建对象的方法：叫构造函数，就很难以理解了。
也不知道理解得对不对，不过不管对还是不对，js中的函数和对象的分界线实在是不很明显，如果对的话，对象和实例的分界线也不明显，父类和子类的分界也并不明显，尤其是，js中很为一个对象创建子类，也很难为它的子类创建子类的子类。
<script> function Test (name,age) { this.name = name; this.age = age; this.sayName = function () { alert(this.name); } } console.log(typeof Test) //得到function var baby = new Test('mike','18'); //baby继承了test的属性和方法，可以baby.name打印试试 console.log(typeof baby) //得到object var ababy=new baby("jack","5") //报错 //那么，new究竟干了什么？ //1，创建了一个对象：var baby={} //2，然后把this指向了baby（原本的this指向window），于是baby拥有了和Test一样的name属性 //3，Test会自动添加一个prototype原型对象，所以Test自己是function，它同时有一个prototype原型对象，（暂时理解成它有函数和对象这俩属性）他的属性和方法所有实例共享 //4，在创建baby对象的时候，为它添加了一个__proto__内置原型对象，这个对象指向Test的原型对象，暂时理解成Test是baby的类或者父类 //总结：new实际上是在没改变函数的情况下为它创建了一个对象，并且声明了这个对象的实例。 </script>
参考：https://www.cnblogs.com/liveoutfun/p/8735992.html
6 函数
函数可以应用在网页的html语言上，无缝衔接，比较重要
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!"); //函数打印”hello world"
}
</script>
</head>
<body>
<button onclick="myFunction()">点击这里</button> //定义了一个按钮，点击的时候执行函数，通过提示窗口的方式显示函数执行结果
</body>
</html>
函数可以带参数：
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
<button onclick="myFunction('Bill Gates','CEO')">点击这里</button> //按钮中传参进去
函数可以return
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3); //这句话在<script>内，在函数定义之外
注意：return在函数中也有break的作用，return以后，函数停止，返回结果，如果函数以外还有命令，则继续执行其他命令，仅仅希望退出函数的时候也可以使用return语句，后面不要加返回值。
function myFunction(a,b) { if (a>b) { return; //如果a>b那就退出函数 } x=a+b }
注意：
函数外声明的是全局变量，函数内部声明的变量是局部变量，只有函数内部可以访问。局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
如果把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。也就是全局变量。（全局变量，在函数外声明并且赋值的变量，函数内部没有声明直接赋值的变量，js中的全局变量都是window变量，都可以用window.globalname; 来访问。）
7，事件
HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。事件可以是用户的或者是浏览器的行为。
事件实例：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
常见的html事件：
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
js可以做什么？
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
8 字符串（此处说的是纯字符串，不是字符串对象，字符串对象如:var name= new String("john"）可以理解为创建了一个字符串实例）
字符串支持索引：
var carname="hello world"; var character=carname[7]; //取到o，字符串的索引是从0开始 var a="it \' s alright"; //得到：it's alright,转义符号不见了，而且转单引号就得到单引号，转双引号得到双引号。当要字符串内包含的引号和外部冲突了，可以转义
var slen=carname.length; //得到11，空格也算一个字符
字符串中如果需要下列字符，那请先转义：
| 代码 | 需要的符号 |
|---|---|
| \' | 单引号 |
| \" | 双引号 |
| \\ | 反斜杠 |
| \n | 换行 |
| \r | 回车 |
| \t | tab(制表符) |
| \b | 退格符 |
| \f | 换页符 |
注意：
我们也可以使用 new 关键字将字符串定义为一个对象：
var x = "John"; var y = new String("John"); typeof x // 返回 String，注意typeof,相当于pythonn中的type（） typeof y // 返回 Object //注意： var x = "John"; var y = new String("John"); (x === y) // 结果为 false，因为 x 是字符串，y 是对象，这两者不同
9 运算符
等于号赋值，加号合并字符串或者累加数字。
算术运算符：y=5
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| + | 加 | x=y+2 | x=7 |
| - | 减 | x=y-2 | x=3 |
| * | 乘 | x=y*2 | x=10 |
| / | 除，不是地板除哦 | x=y/2 | x=2.5 |
| % | 求余数 (保留整数) | x=y%2 | x=1 |
| ++ | 累加,可理解为x=y+1 | x=++y | x=6 |
| -- | 递减，可理解为x=y-1 | x=--y | x=4 |
赋值运算符：
x=10,y=5
| 运算符 | 例子 | 等价于 | 结果 |
|---|---|---|---|
| = | 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 |
字符串合并：
+
顺便说一句：x=5 + "5" 得到”55“，数字与字符串相加，结果将成为字符串！要注意，不然以后要犯错的。
顺便说一句：document.write(x) ,在js中是原地直接打印输出的意思
比较运算符
假设x等于5：
| 运算符 | 描述 | 例子 |
|---|---|---|
| == | 等于 | x==8 为 false |
| === | 全等（值和类型） | x===5 为 true；x==="5" 为 false |
| != | 不等于 | x!=8 为 true |
| > | 大于 | x>8 为 false |
| < | 小于 | x<8 为 true |
| >= | 大于或等于 | x>=8 为 false |
| <= | 小于或等于 | x<=8 为 tr |
逻辑运算符
假定x=6，y=3，和shell编程里运算符差不多
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x==5 || y==5) 为 false |
| ! | not | !(x==y) 为 true |
and 和or别混了，老铁！
条件运算符（个人觉得这更像是if条件的特殊写法）
greeting=(visitor=="PRES")?"Dear President ":"Dear "; //visitor等于“PRES”吗？如果是的话，greeting等于"Dear President",不是的话，greeting等于"Dear"
9，条件运算符
if...else...
<!DOCTYPE html>
<html>
<body>
<p>点击这个按钮，获得基于时间的问候。</p>
<button onclick="myFunction()">点击这里</button> //定制一个网页上的按钮，按下的时候会运行页面底部的函数
<p id="demo"></p>
<script>
function myFunction()
{
var x="";
var time=new Date().getHours(); //new 运算符是用来实例化一个类，所以Date（）是一个内部定义好了的类，getHours（）是一个方法
if (time<20) //注意格式，花括号在下一行，上括号和下括号都单独占一行，和php不同，php上括号顶着function写
{
x="Good day";
}
else // if ...else if...else...格式都是一样的
{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
还有个语句叫if...else if...else...,写法是一样的。
switch基于不同的条件来执行不同的动作
<!DOCTYPE html> <html> <body>
<button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x; //声明一个变量，没有被赋值 var d=new Date().getDay(); //实例化一个Date对象，并且使用其getDay（）的方法，赋值给d。 switch (d) //按照d的值来决定执行哪个case语句，今天是周天，sunday在这里是0，所以会执行第一个case语句 { case 0: x="Today it's Sunday"; //在这里x被赋值 break; case 1: x="Today it's Monday"; break; case 2: x="Today it's Tuesday"; break; case 3: x="Today it's Wednesday"; break; case 4: x="Today it's Thursday"; break; case 5: x="Today it's Friday"; break; case 6: x="Today it's Saturday"; break; } document.getElementById("demo").innerHTML=x; //x的值将会在指定的id=demo的位置输出 } </script> </body> </html>
需要注意的是default： default 关键词来规定匹配不存在时做的事情，约等于else
<html>
<body>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var d=new Date().getDay(); //实例，获取当前的星期数
switch (d) //把星期数作为判断执行哪个语句的标准，
{
case 6: //这个语句会在d等于6的时候执行
x="Today it's Saturday";
break;
case 0: //这个语句会在d等于0的时候执行
x="Today it's Sunday";
break;
default: //这个语句会在d不等于6和0的时候执行，作用类似于条件判断语句中的else。
x="Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
for循环迭代
循环i
<!DOCTYPE html>
<html>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++) //迭代i，从i=0一直迭代到小于cars.length,每次加1。括号内的条件判断语句可以省略，但是分号不可以省略
{
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>
循环数组：
<script>
function myFunction()
{
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) //注意，此处迭代的是person的值，不是键，这和php不一样
{
txt=txt + " "+person[x];
}
document.getElementById("demo").innerHTML=txt; // 返回：Bill Gates 56
}
</script>
while循环
<script>
function myFunction()
{
var x="",i=0;
while (i<5) //注意格式就可以了
{
x=x + "The number is " + i + "<br>";
i++;
}
document.getElementById("demo").innerHTML=x;
}
</script>
do...while循环实际上和while循环差不多，只不过判定语句在执行以后
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
注意别写无限循环就行了
10，循环控制语句：
break 语句用于跳出循环。
for (i=0;i<10;i++)
{
if (i==3) //if和x=x+...这一句是平级的，i==3的时候，跳出的循环是for循环，if是条件判断，不属于循环，谨记
{
break;
} //if语句可以简写：if (i==3) break; 注意，php和js条件语句后面不加分号这一点是一样的。
x=x + "The number is " + i + "<br>";
}
continue 用于跳过循环中的一个迭代。
for (i=0;i<=10;i++)
{
if (i==3) continue; //i==3的时候，就不打印x了，直接调到for语句，i++变成4
x=x + "The number is " + i + "<br>";
}
break在js中还有一个用，指定跳出一个标签，就是指定停止一个东西的意思
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
//结果是：cars[0],cars[1],cars[2]可以被打印出来，break list；以后的语句不会被执行。
11，错误
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
//类似于python中的try...excet...
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
<!DOCTYPE html>
<html>
<body>
<script> //这个例子好好看一下，灰常值得学习
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10) throw "太大";
if(x<5) throw "太小";
}
catch(err) //如果try有问题，那就从‘mess’处得到值
{
var y=document.getElementById("mess");
y.innerHTML="错误：" + err + "。";
}
}
</script>
<h1>我的第一个 JavaScript 程序</h1>
<p>请输入 5 到 10 之间的数字：</p>
<input id="demo" type="text"> //定义了一个文本框，id是‘demo’，类型是text，js通过getElementById（)赋值给x
<button type="button" onclick="myFunction()">测试输入值</button> //定义一个按钮，按下的时候执行函数
<p id="mess"></p>
</body>
</html>
