JavaScript
简介
Javascript诞生于1994年
网景：livescript
为什么会研发livescript？
微软：IE6JScript IE7VBScript
1996年左右 sun公司的Java火了，网景蹭热度，改名为JavaScript
JavaScript脚本语言，运行在浏览器中【充当解释器，Chrome】
JavaScript=》很火，Google Chrome v8js引擎，提高了js运行速度，使得JavaScript成为后台语言变成了一种可能。Ex:node.js
前端框架：Vue bootstrap ract
实例：微信公众号 小程序
基础语法
JavaScript是一门弱类型的语言【特点】
怎么写？
写在哪？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//写在这
</script>
</head>
<body>
</body>
</html>
从上至下依次运行
1）、变量
变量：以名称来代替可以变化的量
2）、数据类型
数据类型
JavaScript的数据类型
基本类型
number 数字[包含C语言中的int、float…类型]
bool 布尔类型[true|false]
String 字符串[’’|""],错误示范： var x='123"
复杂类型
对象[object]
函数[function]
特殊类型
null（空）|undefined（未定义）
如何判断JavaScript中的数据类型？
使用typeof 来判断
!!!定义变量，需要赋值，否则无效（相当于未定义）
null时object类型的特殊值
弱类型：不代表没有类型只是不检查数据类型
js特性：变量的数据类型，是根据变量后面的值来确定的
在强类型语言中 vint a=123;
a=“阿斯顿”;编译会直接报错，编译会做检查
命名规则：
1、驼峰命名法：以小写字符开头+下划线（——）|数字（），
不能包含特殊字符[+,-,@,#]
变量名不能以纯数字命名，
3）、运算符
算术运算符：
`+ - * / %（求余|取模）`
条件运算符：
> < >= <= == != ===[绝对等于]
注意：=== 首先判断两个变量的类型，
若相等：1、类型相同
2、值相同
逻辑运算符：
&& || ！
&&：同时满足
||：满足其一
！：取反
赋值运算符：
= += -= *= /= ++ –
//var result=10%3;求余例子
var sum=0;
var a=2;
var b=3;
sum=a+b;
a+=b;//等价于a=a+b
sum-=b;//等价于....
b*=5;//等价于...
4）、条件分支语句
if语句：
语法：
if(条件表达式) 表达式：true|false
{
满足条件，执行语句；
}
If-else语句
语法：
if(条件表达式){
满足条件，执行代码
}else{
不满足条件，执行的代码
}
注意：else不能单独存在，必须配合if
例子：
var n=50;
if(n<60){
alert("不及格");
}else if(n>=60 && n<70){
alert("D");
}else if(n>=70 && n<80){
alert("C");
}else if(n>=80 && n<90){
alert("B");
}else if(n>=90 && n<100){
alert("A");
}
Switch语句
语法：
switch(n){
case x1:代码1...；break；
case x2:代码1...；break；
case x3:代码1...；break；
..........
case xn:代码1...；break；
}
注意：case后面跟的是一个具体的值，不能是一个范围【类似枚举法】
switch(变量)，不能像if语句跟条件
该语句不够灵活，使用不如if广泛
例子：
var n=1.2;
switch (n){
case 10:
alert("hello word");break;
case 20:alert("are you killing?");break;
default:alert("!!!");break;
}
5）、循环语句
While语句
语法：
while(条件){
循环体[满足条件是执行]
}
如果条件无限满足，会出现死循环
有限循环
1、有一个初始变量
2、条件有限制
3、在循环体中，对初始变量进行操作
调试：debugger；
1、需要设置断点
2、配合浏览器的调试工具[f12]
F10单步执行
F8执行到下个断点，如果没有断点了，直接结束
F11进入函数
例子：
//1-100求和
var i=0;
var sum=0;
while(i<=100){
debugger;
sum=sum+i;
i++;
}
//初始变量
var i=10;
//条件是一个有限的范围
while(i>0){
//设置断点
debugger;
console.info("条件成立"+i);
i--;
}
//偶数求和
var n=0;
var oh=0;
while(n<=100){
debugger;
if(n%2==0){
oh=oh+n;
}
n++;
}
alert(oh);
Do while语句
例子：
var i=50;
do{
alert("成绩为"+"不合格");
i++;
}
while(i<60);
For语句
语法：
for（定义初始变量；条件；步长[对初始变量的操作]）{
循环体；
}
例子：
//10！阶乘
var sum=1;
for(var i=1;i<=10;i++){
sum=sum*i;
}
alert(sum);
Break与continue
break:跳出循环，当前循环结束
var i=100;
while(i<200){
if(i==90){
alert("90循环结束");
break;
}
console.log(i);
i--;
}
continue：跳过此循环，继续下一循环
for(var i=0;i<10;i++){
if(i==5){
console.warn("跳过5");
continue;
}
console.log(i);
}
函数
函数也可以称作方法，是将具有特定功能的代码写在一块。函数作用：提高代码的重用率以及可维护性。
在JavaScript中如何定义函数：
语法：function 函数名(参数1，参数2，……，参数n){
//具体的功能代码
}
函数如何调用：
函数名(值1，值2，……，值n);
函数名==>遵循命名规则。
注意：函数的参数，是由程序员根据实际情况定义，称为：“形参”；相当于代码中的变量。
调用函数时：传入的值，称为 “实参”，可以确定 参数的值和类型
传值时 要注意参数个数以及类型，否则会出错
参数类型有那些
number、string 、Boolean 、 Object、Array、Function
注意：以函数做参数，往往称为“回调函数”，如果参数是 函数，只需要出入 函数名；
注意：关于函数“形参”的数量和“实参”的数量 的判断
arguments.length;//实际传入参数的 数量
函数名.length 函数定义的 “形参”的数量
//定义了一个无参无返回值函数
function fn1(){
alert("hello function");
}
//调用
fn1();
//有参数的函数
/*
*作用：
* 参数a: number
* b: number
* return: void
* */
function fn2(a,b){
var typ= typeof a;
if(typ!="number" || (typeof b) !="number"){
console.error("传入类型有误！")
return;//返回；
}
var res= a-b;
alert(res);
}
fn2(2,3);//5
fn2("字符","串");
fn2(123,"zifuc")
//对象和数组 作为参数
function fn3(obj,arr){
console.log(obj.name);
for (i in arr) {
console.info(arr[i]);
}
}
//对象
var dx={
name:"小明",
age:123
};
//数组
var a=[1,23,67,99];
//对象和数组 作为参数
fn3(dx,a);
//作为参数的函数
function fp(x,y){
debugger;
console.warn("演示函数作为参数");
}
function fn4(ff){
//使用 ff 函数
debugger;
console.log("准备调用 传入的函数");
ff();
}
//以函数做参数，往往称为“回调函数”
//如果参数是 函数，只需要出入 函数名
debugger;
fn4(fp);
/*关于函数“形参”的数量和“实参”的数量 的判断
arguments.length;//实际传入参数的 数量
函数名.length 函数定义的 “形参”的数量*/
function fn5(a,b,c,d){
var n= arguments.length;//实际传入参数的 数量
var m= fn5.length;// 函数定义的 “形参”的数量
if(n!=m){
console.error("参数个数不一致");
return;
}
console.log(n);
console.info(m);
}
fn5(1,2);
函数的返回值问题
return 关键字；
作用：1.将函数内部的数据，带到 函数外部； return x;
2.结束当前的函数。 return;
注意：写在 return; 后面的代码将不会执行。
返回值类型：包含了 js中所有类型
number、string、object、Boolean、array、function
function add(a,b){
var x=a+b;
return x;
//alert("写在return 后的代码");
}
var res= add(3,2);
alert(res);
function test(){
var obj={
ss:"123",
data:"呵呵"
};
return obj;
}
var temp = test();
alert(temp.data);
//演示函数作为返回值的函数
function fnRetrun(a,b){
debugger;
console.log("演示函数作为返回值的函数"+a+b);
}
// 如果函数作为返回值，只写函数名，
// 通常：都以 匿名函数作为 返回值。
function fn1(){
debugger;
console.info("即将演示函数作为返回值");
// return fnRetrun;
return function(){
console.warn("匿名函数");
};
}
debugger;
var res=fn1();
res(12,123);
匿名函数：
function(参数1，参数2，……，参数n){
}
通常：匿名函数使用在，以函数作为参数和函数作为返回值的地方
函数的另一种定义方式
var 变量名= function(){};
//函数的调用
变量名();
var fn = function(){
console.log("函数的另一种定义方式,使用匿名函数给 变量赋值");
};
fn();
！！！Javascript 中,没有函数重载的概念。
如果出现了相同的函数名，写在后面的函数会覆盖前面的“同名”函数。
由于这种机制的存在，为我们修改框架中某些函数，提供了可能
function fx(a,b){
alert(a+b+"第一个");
}
function fx(x,y,z){
alert(x+y+"第2个");
}
fx(123,123);
常用对象
数组对象
什么是数组：保存一组数据。
定义数组的语法：
var 数组名=[]; 仅仅定义了一个数组
var 数组名=new Array(长度);定了数组，并且设置了长度；
var 数组名=[值1，值2，……，值n];//定义了数组，有初始值，还有数组长度
//定义数组
var arr=["","","",""];
// 数组的 长度:数组名.length;
var len = arr.length;
// alert(len);
//获取数组中的元素值：数组名[下标]
// 注意：下标是从0 开始
var mz = arr[0];
// alert( arr[0]);
//遍历数组中的元素：for , for in
for(var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
//注意：item 是下标
for(var item in arr) {
console.log(arr[item]);
}
/*JavaScript 数组的特点
* 1.数组元素的 数据类型可以不相同
* 2.数组的长度可以随时改
*
* */
var temp = [12, 3.14159, "9527", "狗剩", true, {
s: "xx"
}];
document.write(temp);
document.write("<br>");
temp[10] = "新增元素";
document.write(temp);
var l = temp.length;
alert(l);
alert(temp[15]);
常用方法：
- 数组名.push(“新元素”)— 在数组的末尾添加元素，返回数组的新长度
* 数组名.pop()-- 在数组的末尾删除元素,返回被删除的元素
* 数组名.unshift(新元素)在数组开头新增元素，返回数组的新长度
* 数组名.shift()在数组开头删除元素，返回被删除的元素
* 操作数组的元素
* 截取数组 数组名.slice(开始下标位置,结束下标位置)
*数组名.splice(开始下标，长度)=>删除
*数组名.splice(开始下标，长度,新元素)=>替换
*数组名.splice(开始下标，0,新元素)===插入
*数组名.concat(arr)—拼接数组,返回新的数组，原数组不变
var yc133=["李华","小明","小花"];
yc133.push("hello");
// document.write(yc133);
// document.write("<br>");
// var name= yc133.pop();
// document.write(name);
// document.write("<br>");
// document.write(yc133);
// document.write("<br>");
//
// //在开始位置
// var nl= yc133.unshift("赵铁柱");
alert(nl);
// document.write(yc133);
// document.write("<br>");
//
// var obj= yc133.shift();
// alert(obj);
// document.write(yc133);
// document.write("<br>");
//截取数组 数组名.slice(开始下标位置,结束下标位置)
//返回截取的数组，原数组 不变
var tt= yc133.slice(1,3);
//数组名.splice(开始下标，长度)===>删除
//数组名.splice(开始下标，长度,新元素)===>替换
//数组名.splice(开始下标，0,新元素)===插入
yc133.splice(1,0,"王钢蛋");
document.write(yc133);
document.write("<br>");
//数组名.concat(arr)---拼接数组,返回新的数组，原数组不变
var arr=["21",123];
var na= yc133.concat(arr);
document.write(na);
document.write("<br>");
字符串
- 字符串的常用方法以及属性
* str.length ==>表示字符串的长度
*
* 把字符串中的小写字母转变成大写
* var nstr= str.toUpperCase();
* 把字符串中的大写字母转变成小写
* var str1=nstr.toLowerCase();
*
* 取字符串中 对应下标的 字符
* var ch= str.charAt(2);
*
* 取字符串中 对应下标的字符 编码
* var chCode = str.charCodeAt(2);
*
* 将字符编码转换成字符
* var c= String.fromCharCode(71);
*
* 字符串的查找
*
* 变量名.indexOf(“查找的内容”); 如果找到匹配的内容，返回第一次出现的下标，否则返 回-1；
* 变量名.lastIndexOf(“查找的内容”);
* 如果找到匹配的内容，返回最后一次出现的下标，否则返回-1；
*
* 字符串的截取：原来的字符串不变
* //截取 从开始位置到结束位置【但不包含结束位置上的元素】的字符
//ss.substring(“开始位置”,“结束位置”);
//若 ss.substring(“开始位置”);//会从开始位置，截取剩余的所有字符
* ss.substr(“开始位置”,“截取长度”);
* var ts1= ss.substr(3,5);
日期[时间对象]
- 时间对象：
- 在计算机的世界中：时间是从1970.1.1 00：00 开始；都是通过 毫秒数来计算的。
/* var time= new Date().getTime();
* time 表示当前距离1970.1.1 的毫秒数
*
* */
//获取当前时间：
var time= new Date().getTime();
//document.write(time);
//如何定义时间对象：
var date = new Date();
//将时间对象转换成字符串
document.write(date.toString());
//可以将时间对象的各个部分拆分，从新组成我们认识的时间
//获取年：
var year=date.getFullYear();
//获取月份： 注意 +1;
var month=date.getMonth()+1;
//获取日期：
var day=date.getDate();
//获取小时
var hour =date.getHours();
//获取分钟数
var minute=date.getMinutes();
//获取秒数
var second=date.getSeconds();
//获取毫秒数
var ms=date.getMilliseconds();
var str=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second+":"+ms;
document.write("<br>");
document.write(str);
// 例如：2000.2.27 15:13:24；
//创建一个如下的时间对象
var dd = new Date();
dd.setFullYear(2000);
dd.setMonth(15);
dd.setDate(35);
alert(dd.toString());
全局对象
parseInt(参数); => 把参数 转换成 整数，
parseInt(任意类型)>转换成整数，截取式转换，前面能转换的，一旦遇到不能转换的，就返回
NaN -> not an number
var i= parseInt(14/5);
// alert(i);
//1.问题：求出[1~100)之间所有与7相关的数字【倍数，含有数字7的】
for(var i = 1; i < 100; i++) {
if(i % 7 == 0 || i % 10 == 7 || parseInt(i / 10) == 7) {
document.write(i);
document.write("<br>");
}
}
var str="17px";
var h=parseInt(str);
// console.log(h);
//
// var t=parseInt("12x3");//12
// var m= parseInt(".123");//NaN
// var n=parseInt("s123");//NaN
// var b= parseInt(false);
// console.log("b="+b);
// var time = new Date();
// var t1=parseInt(time);
// console.log("t1="+t1);
//parseFloat(参数);===> 转换成 浮点数，参考 parseInt()
var m= parseFloat(".123px");
console.log(m);
// Number(参数)==> 转换成数字，若不是数字，直接返回NaN，整体式的转换【不能包含其他的字符】
var n= Number(".123");//NaN
console.log(n);
//isNaN("内容"); 判断 是否是非数字；如果返回 true，表示不是数字，若为false，表示是数字
alert(isNaN("123"));
//eval("内容")，将内容 翻译成JavaScript 代码，并执行。
var str=eval("1+2+3+4");
//eval("alert('演示eval')");
// escape("内容")，对内容中的"中文"进行编码
var res=escape("123a$#b哈师大。‘a,sQWEsadas");
console.log(res);
// unescape("内容")，对内容中 有中文编码的 内容，进行解码
var unres=unescape(res);
console.info(unres);
数学对象
包含了一些常用的数学函数以及数学常数【】
* 绝对值:Math.abs(n)
* 随机数:Math.random();只能产生[0-1) 之间的随机数，
* 取整
* //向下取整，取整数部分
var m= Math.floor(x);
//向上取整，取整数部分+1
var k=Math.ceil(x);
* 四舍五入 ：Math.round(y); 主要看小数点后的第一位数
* Pi–>π 圆周率
* 乘方：Math.pow(“底数”,“指数”)
自定义对象
自定义对象的定义
* var 变量={
* key1:值,
* key2:值2，
* …
* Keyn:值n
* }
var obj = {
task:"取经",
td:["空空","八戒","静静"],
func:function(){
console.log("唵、嘛、呢、叭、哞、吽");
},
height:21,
idol:{name:"如来" }
};
// debugger;
//给自定义对象 添加属性以及值
obj.name="唐僧";
//alert(typeof obj);
console.log(obj.task);
obj.func();
console.info(obj.td.toString());
obj.idol.name;
//1.获取对象中所有的Key
for(var item in obj){
document.write(item);
document.write("<br>");
}
//2.获取对象中所有的值
for(var item in obj){
document.write(obj[item]);
document.write("<br>");
}
//obj["name"]
//数据格式：Json
//严格的json : {"key":"value","key1","value1"}
//objet 转换成 Json 对象
var str= JSON.stringify(obj);
var json_obj= JSON.parse(str);
//注意匿名函数调用：立即执行函数
(function(){
alert("匿名函数");
})();
DOM对象以及DOM操作
1.获取对象
如何获取对象，获取对象的方式？
1.通过Id来获取元对象
//document.getElementById("id值"),返回一个对象
var obj= document.getElementById("dd");
obj.style.color="red";
2.通过标签名来获取对象
//document.getElementsByTagName("标签名");返回一个集合【数组】
var lis= document.getElementsByTagName("li");
debugger;
lis[2].style.backgroundColor="green";
lis[2].style.color="red";
3.通过class属性值来获取对象
//document.getElementsByClassName("sp");返回一个集合【数组】
var temps= document.getElementsByClassName("sp");
for(var i=0;i<temps.length;i++){
temps[i].style.color="orange";
temps[i].style.backgroundColor="grey";
temps[i].style.fontSize="40px";
}
4.通过name 属性值来获取对象
//pps=document.getElementsByName("name属性值");返回一个集合【数组】
var pps=document.getElementsByName("pp");
debugger;
for(var i=0;i<pps.length;i++){
pps[i].style.color="green";
pps[i].style.display="block";
pps[i].style.border="1px solid blue";
}
Html5 中新提供方式
//只返回匹配到的第一个元素，返回的是一个对象
//document.querySelector("选择器");
var fli= document.querySelector("ol>li");
fli.style.color="blue";
//返回所有匹配的元素，返回值都是集合【数组】
//document.querySelectorAll("选择器")
var olis=document.querySelectorAll("span");
debugger;
for(var i=0;i<olis.length;i++){
olis[i].style.color="red";
olis[i].style.fontSize="50px";
}
2.绑定事件
如何绑定事件？常用事件： onclick, onmouseover,onmouseout
通过js 代码来绑定事件
//当 使用 循环绑定事件时， this 指代 当前 触发事件的元素对象
// var lis= document.getElementsByTagName("li");
// for(var i=0;i<lis.length;i++){
// debugger;
// lis[i].οnclick=function(){
// //注意：i 已经 大于 lis.length
// debugger;
// //lis[i].style.color="red";//错误的写法
// if(this.style.color=="red"){
// this.style.color="black";
// }
// else{
// this.style.color="red";
// }
// };
// }
3.修改对象
1.修改样式
设置样式：对象.style.Css样式属性=“值”；
2.修改属性
设置： 对象.属性=“值”
获取： var 变量= 对象.属性；
自定义属性：
设置属性: 对象.setAttribute(“属性名”,”值”);
获取属性：对象.getAttribute(“属性名”);
删除属性：对象.removeAttribute(“属性名”);
3.修改内容
1.直接修改 innerHTML属性
2.createElement() =>创建对象，使用
appendChild(创建的对象)
|insertBefore(创建的对象，插入的位置)
var btn2 =document.getElementById("btn2");
btn2.οnclick=function(){
// var ul= document.querySelector("ul");
// ul.innerHTML="<li>哈密瓜</li>"+ul.innerHTML;
var li= document.createElement("li");
li.innerHTML="新增的li"+no;
no++;
li.style.color="green";
var ul= document.querySelector("ul");
//找到要插入位置的 标签对象
var oli=document.querySelector("ul>li")
//将元素插入到 指定位置
ul.insertBefore(li,oli);
};
var btn3 =document.getElementById("btn3");
btn3.οnclick=function(){
// var ul= document.querySelector("ul");
// ul.innerHTML+="<li>香蕉</li>";
//创建标签对象
var t= document.createElement("li");
//对对象的操作
t.innerHTML="水蜜桃";
t.style.color="red";
t.style.backgroundColor="darkorchid";
var ul=document.querySelector("ul");
//把创建的对象 ，添加到父级元素的末尾
ul.appendChild(t);
};
扫一扫
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
