day53前端基础之JavaScript_party_1
1#引入js文件
2#直接写
alert( )直接弹出框显示出alert括号内的代码，网页卡在此停留，直到关掉弹框网页才会继续执行
与python不同的是 要想定义一个变量
js：先用var声明一个变量，然后在给变量赋值
或者直接声明在赋值
直接声明多个变量
可以在浏览器的Console里查看代码是否报错
变量的定义：
命名要见名知意可以用长语句，尽量直接看到变量名就能辨别出指代的内容。
例：
IMyFirstValue=0
sMyFirstValue=”abc”
数据类型：
查看数据类型 在浏览器的Console下
在console下打印 console.log(arr[1]) 打印出333
算数运算符：
i++、++i 就是指i +=1
区别
i++先赋值在计算 console.log（i） :11 \console.log(ret):10
++i先计算在赋值 console.log(i):11 \console.log(ret):11
比较运算符：
console.log(2="2)" true
console.log(2==="2") faleas
===全等于
！==不全等于
逻辑运算符
&& ：and
||：or
!：not
循环：
遍历循环：for
条件循环：while
for 循环条件写括号内（3要素）：
定义个起始值 i = 0
循环的范围 i<10
起始值的算法 i++
循环这个表格里面的值：
for(var i=0;arr.length;i++){console.log（arr[i]）}
了解
while循环：
var n=0;
var s = 0;
while(n<101){
n++;
s+=n}
console.log(s)拿到s的结果
分支：
函数：
与python不同的是 调用函数可以写在定义函数前
NAN：not a number
匿名函数就是只使用一次，不需要命名，用完后存匿名函数的内存会自动清除
上面函数只会打印console.log(x+y)的值
因为没有return
下面console.lo(ret)没有值undefined
String对象
字符串创建(两种方式)
① 变量 = “字符串”
② 字串对象名称 = new String (字符串)
|
1
2
|
var str1="hello world";var str1= new String("hello word"); |
x.length －－－－获取字符串的长度
x.toLowerCase() －－－－转为小写
x.toUpperCase() －－－－转为大写
x.trim() －－－－去除字符串两边空格
－－－－字符串查询方法
x.charAt(index) －－－－str1.charAt(index);－－－－获取指定位置字符，其中index为要获取的字符索引
x.indexOf(findstr,index)－－－－查询字符串位置
x.lastIndexOf(findstr)
x.match(regexp) －－－－match返回匹配字符串的数组，如果没有匹配则返回null
x.search(regexp) －－－－search返回匹配字符串的首字符位置索引
示例：
var str1="welcome to the world of JS!";
var str2=str1.match("world");
var str3=str1.search("world");
alert(str2[0]); // 结果为"world"
alert(str3); // 结果为15
－－－－子字符串处理方法
x.substr(start, length) －－－－start表示开始位置，length表示截取长度
x.substring(start, end) －－－－end是结束位置
x.slice(start, end) －－－－切片操作字符串
示例：
var str1="abcdefgh";
var str2=str1.slice(2,4);
var str3=str1.slice(4);
var str4=str1.slice(2,-1);
var str5=str1.slice(-3,-1);
alert(str2); //结果为"cd"
alert(str3); //结果为"efgh"
alert(str4); //结果为"cdefg"
alert(str5); //结果为"fg"
x.replace(findstr,tostr) －－－－ 字符串替换
x.split(); －－－－分割字符串
var str1="一,二,三,四,五,六,日";
var strArray=str1.split(",");
alert(strArray[1]);//结果为"二"
x.concat(addstr) －－－－ 拼接字符串
Array对象
在js里面没有可变数据类型和不可变数据类型
创建数组的三种方式：
创建方式1:
var arrname = [元素0,元素1,….]; // var arr=[1,2,3];
创建方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);
创建方式3:
var arrname = new Array(长度);
// 初始化数组对象:
var cnweek=new Array(7);
cnweek[0]="星期日";
cnweek[1]="星期一";
...
cnweek[6]="星期六";
数组对象的属性和方法
join方法：
x.join(bystr) －－－－将数组元素拼接成字符串 var arr1=[1, 2, 3, 4, 5, 6, 7]; var str1=arr1.join("-"); alert(str1); //结果为"1-2-3-4-5-6-7"
concat方法：
数组的push和pop:
Push 添加（和concat一样） 压栈操作
Pop 取出 弹栈操作
压栈和弹栈就是类似于枪弹夹的子弹，后放进去的先pop出。
数组的shift和unshift：
Shift 取值 取出左边的值
Unshift 在左侧添值 arr3=[555,6666,111,222,333]
综上所述：
******只能一头一尾的去除操作，不能任意位置****
数组排序-reverse sort：
Reverse（）反转 把顺序倒过来
Sort()按首字母的ascii的对应值排序
也可以按照自己的方式排序：
Console.log(arr.sort( MYsort));
Mysort 就是一个排序方法，自己定义的按照大小排序方法写成函数
Function Mysort(a,b){
Return a-b
}
过程就是先分别去拿出arr里面的两个值去比较大小，比较完 通过返回值来确定大小
就能去排序。
Date对象
//方法1：不指定参数 var nowd1=new Date(); alert(nowd1.toLocaleString( )); //方法2：参数为日期字符串 var nowd2=new Date("2004/3/20 11:12"); alert(nowd2.toLocaleString( )); var nowd3=new Date("04/03/20 11:12"); alert(nowd3.toLocaleString( )); //方法3：参数为毫秒数 var nowd3=new Date(5000); alert(nowd3.toLocaleString( )); alert(nowd3.toUTCString()); //方法4：参数为年月日小时分钟秒毫秒 var nowd4=new Date(2004,2,20,11,12,0,300); alert(nowd4.toLocaleString( ));//毫秒并不直接显示
获取日期和时间 getDate() 获取日 getDay () 获取星期 getMonth () 获取月（0-11） getFullYear () 获取完整年份 getYear () 获取年 getHours () 获取小时 getMinutes () 获取分钟 getSeconds () 获取秒 getMilliseconds () 获取毫秒 getTime () 返回累计毫秒数(从1970/1/1午夜)
function getCurrentDate(){ //1. 创建Date对象 var date = new Date(); //没有填入任何参数那么就是当前时间 //2. 获得当前年份 var year = date.getFullYear(); //3. 获得当前月份 js中月份是从0到11. var month = date.getMonth()+1; //4. 获得当前日 var day = date.getDate(); //5. 获得当前小时 var hour = date.getHours(); //6. 获得当前分钟 var min = date.getMinutes(); //7. 获得当前秒 var sec = date.getSeconds(); //8. 获得当前星期 var week = date.getDay(); //没有getWeek // 2014年06月18日 15:40:30 星期三 return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week); } alert(getCurrentDate()); //解决 自动补齐成两位数字的方法 function changeNum(num){ if(num < 10){ return "0"+num; }else{ return num; } } //将数字 0~6 转换成 星期日到星期六 function parseWeek(week){ var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; // 0 1 2 3 ............. return arr[week]; }
默认date是拿到的当前时间，是对象的形式。
Date.toLocaleString拿到字符串形式的当前时间
拿到详述的时间
BOM对象
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
Confirm 有个弹出框有确定和取消
返回true or faleas
Prompt 输入内容
定时器：
定时器每隔1S执行一下函数
结束循环
定时器的应用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var ID; function loop_time() { var date = (new Date()).toLocaleString(); var ele_input = document.getElementById("d1"); ele_input.value=date; } function foo(){ loop_time() if (ID ==undefined){ ID = setInterval(loop_time,1000) } } function end_time() { clearInterval(ID); ID = undefined; } </script> </head> <body> <input type="text" id="d1"><button onclick="foo()">开始</button> <button onclick="end_time()">停止</button> </body> </html>
浙公网安备 33010602011771号