web之js（二）

(5)数据类型类型
number
string
function
object
boolean
undefined

(6) javascript 字符串string 可以使用双引号 也可以使用单引号，
s = 'ok';
a = "hello";
c = "'hello'";
``
''
""
``

javascript 基本语句?

输出
document.write("helloworld");
console.log();
alert(''); 提示框输出 模态

在标签上输出内容
.innerHTML
.innerText
.value 在表单标签上输出内容

输入
通过事件实现 表单可以实现输入
输入提示框 window.prompt()
window.confirm() 输入选择

javascript Date对象使用?

let d = new Date("1985-10-22 18:20:30");
let info = `${d.getFullYear()}-${(d.getMonth()+1)<10?'0'+(d.getMonth()+1):(d.getMonth()+1)}-${d.getDate()<10?'0'+d.getDate():d.getDate()}`;
info+=` ${d.getHours()<10?'0'+d.getHours():d.getHours()}:${d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes()}:${d.getSeconds()<10?'0'+d.getSeconds():d.getSeconds()}`;
//alert(info);

document.title += ":" + d.getTime();

 

javascript 随机操作和相关的基本语句？
Math.random();
抽象类Math数学类
Math.PI

if
for while do for in foreach for of
break continue
switch
with

eval()函数;

javascript 字符串操作及正则表达式？

//console.log("hello".search("ll"));
//console.log("hello".indexOf("ll"));
//console.log("hello".lastIndexOf("ll"));
//console.log("hello".includes("ll"));

//string.replace();
//"hello".match();
//"hello".split();

//检查字符串有没有汉字(正则表达式)
let n = "中国";
//let p = /[\u4e00-\u9fa5]+/; 是否包含汉字字符
let p = /^[\u4e00-\u9fa5]+$/;
console.log(p.test(n));//true

//使用的是正则表达式，/g 代表全部， /i 代表忽略大小写
console.log("Javahellojava".replace(/java/gi,"javascript"));

console.log("java100php2python36html".split(/\d+/));

 

let mys = "12my3-46java6html58php2mysql6-4";
console.log(mys.match(/-?[0-9]+/g));

let sum = 0;
mys.match(/-?[0-9]+/g).forEach((v,i)=>{
sum+=parseInt(v);

});
console.log(sum);

 

javascript 事件处理？
onclick
onmouseover
onmouseout
onscroll
scrollTop scrollHeight
scrollLeft scrollWidth

1)实现滚动效果，固定导航栏
window.onscroll = function () {
let t = document.documentElement.scrollTop;
if(t>=252){
with(document.querySelector(".nav").style){
position = "fixed";
left = 0;
top = "-15px";
boxShadow = "0 2px 10px 0 rgba(0, 0, 0, 0.1)";
zIndex=1000;
}
}else{
with(document.querySelector(".nav").style){
position = "static";
boxShadow = "0 0 0 #fff";
}
}
};

2)实现返回顶部效果
document.documentElement.clientHeight 返回当前窗口高度

document.documentElement.scrollHeight 可以滚动的高度
document.documentElement.scrollHeight-document.documentElement.clientHeight
最高滚动的值
document.documentElement.scrollTop++
document.documentElement.scrollTop--

顶部
document.documentElement.scrollTop = 0;

底部
document.documentElement.scrollTop = document.documentElement.scrollHeight-document.documentElement.clientHeigh

键盘事件

window.onkeypress / window.onkeydown / window.onkeyup  =function(){}  

表单验证(禁止使用html5默认验证机制，原因浏览默认效果不一样。)

onsubmit

 

javascript cookie 使用
案例可以设置网页的背景颜色，如果设置后，再打开网页，可以被记住。

cookie
小甜饼(客户在浏览器中存储的字符串，有效期，如果过期，不使用由浏览器自动删除)

ajax
json