java-前端之js

js：
js的三种形式：
<!-- 事件:就是用户的操作或者动作,就是js被调用的时机；如:单机事件,双击事件 -->
<!-- 1.事件定义式:在定义事件时直接写js -->
<input type="button" value="btn1" onclick="alert('点我干嘛')"/>
<!-- 2.嵌入式:在script标签内写js该标签可以写在网页的任意位置 -->
//js注释和java一样/**/
/*1.js中的函数都是公有的因此不用修饰符修饰*/
/*2.js中的函数不用声明返回值类型*/
function f2(){
//js中单引号和双引号一样
alert("点你咋啦");}
<!-- 3.文件调用式:在js文件内写js -->
<script src="my.js"></script>


js中：
//直接所写的代码有两种情况
//1.定义函数,该函数是在页面加载后用户点击按钮时调用的.
//2.直接书写js,这样的js是在页面加载时直接调用的,其调用的时机甚至比body还早.有可能出现某些标签获取为为定义状态；
//alert("谁让你打开的");
console.log("控制台打印一下");
//1..声明变量并输出到浏览器控制台
var x;
console.log(x);
x = 5;
console.log(x);
x = "你妹";
console.log(x);
var y = 6;
console.log(y);
//2..数据类型
var s = "hello";
var n = 3.14;
var b = true;
console.log(s);
console.log(n);
console.log(b);
//3..隐式转换
console.log(s+n);
console.log(s+b);
console.log(n+b);
console.log(b+b);
//4..强制转换
console.log(parseInt(3.14));
console.log(parseInt("5.63"));
console.log(parseInt("zxc"));
console.log(parseInt(""));
//5..类型判断
console.log(typeof(s));
console.log(typeof(n));

console.log(isNaN(56));
console.log(isNaN("56"));
console.log(isNaN("a56"));
console.log(isNaN("zxc"));
console.log(isNaN(parseInt("")));
//6.运算符
console.log(5=="5");
console.log(5==="5");
//7.条件
//js可以用任何数据做条件,当以非boolean做条件时,空值等价于false,非空值等价于true
//空值:0,null,"",NaN,undefined
//这样设计的目的,时为了简化判断的逻辑.
var k = 0;
if(k){console.log("ok");}
var w = 6;
w && console.log("好");


//根据id获取标签
var input = document.getElementById("num");
js调试技巧:
1.看报错信息(在浏览器控制台看)
2.打桩(跟踪程序执行的过程,查看关键步骤变量的值)
3.排除法(删除一半代码保留一半代码看是否报错,用于定位问题)


js中api整理：
//1.String对象：主要的方法和Java一样,看看手册
//2.Number对象
var n = 3.1415926;
console.log(n.toFixed(3));
//3.Array对象
//1)如何创建数组
var a1 = ["zhangsan",25,false];
console.log(a1[0]);
var a2 = new Array();
a2.push("lisi");
a2.push(28);
a2.push(true);
console.log(a2[1]);
//结论:无论用什么方式创建出来的数组都一样,
//它们都是Object数组,可以存任意类型的数据.
//2.倒转方法
var arr = [5,12,8,1,6,4,7];
arr.reverse();
console.log(arr);
//3.排序方法
//由于js中的数组都是Object数组,所以：它默认按照字符串由小到大进行排序.
arr.sort();
console.log(arr);
arr.sort(function(a,b){
return a-b;
});
console.log(arr);
//4.Math--和Java相似,看看手册
//5.Date
//1)如何创建日期对象
var d1 = new Date();
console.log(d1);
var d2 = new Date("2017/10/01 10:00:00");
console.log(d2);
//2)如何格式化日期
console.log(d1.toLocaleDateString());
console.log(d1.toLocaleTimeString());
//3)读写时间分量
var y = d1.getFullYear();
var m = d1.getMonth()+1;
var d = d1.getDate();
var h = d1.getHours();
var mm = d1.getMinutes();
var s = d1.getSeconds();
var now = y+"年"+m+"月"+d+"日 "+h+"时"+mm+"分"+s+"秒";
console.log(now);
//6.RegExp
//1)如何创建正则对象
var str = "you can you up,no can no bb.";
var reg = /no/;
//2)正则对象的方法:test
//检测字符串内是否包含和正则相匹配的子串
console.log(reg.test(str));
//3)正则对象的方法:exec
//普通模式:
//从字符串内找出与正则相匹配的第1个子串
console.log(reg.exec(str));
//全局模式:
//第1次调用,则从字符串内找出与正则相匹配的第1个子串
//第n次调用,则从字符串内找出与正则相匹配的第n个子串
reg = /no/g;
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
//4)字符串中支持正则的方法
//replace,match,search
//看看手册
//7.Function对象
//声明函数,即定义函数对象
function sum() {
var s = 0;
if(arguments.length) {
for(var i=0;i<arguments.length;i++) {
s += arguments[i];
}
}
return s;
}

//onload是页面加载事件,在页面加载完成时,由浏览器自动触发.
window.onload = function(){
//alert(1);
//1.读取节点的名称及类型
var p1 = document.getElementById("p1");
console.log(p1.nodeName);
console.log(p1.nodeType);
console.log(document.nodeName);
console.log(document.nodeType);
//2.读写节点的内容
//双标签中间的文本是内容,如<a>内容</a>
//innerHTML(带标签)
var p2 = document.getElementById("p2");
console.log(p2.innerHTML);
p2.innerHTML = "2.DOM操作包含<u>查询</u>节点";
//innerText(忽略标签)
var p3 = document.getElementById("p3");
console.log(p3.innerText);
p3.innerText = "3.DOM操作包含<u>增删</u>节点";
//3.读写节点的值
//表单控件(label除外)内的文字就是值
var input = document.getElementById("btn");
console.log(input.value);
input.value = "BBBBB";
//4.读写节点的属性
//1)通过get/set方法(可以读写任何属性)
var img = document.getElementById("i1");
console.log(img.getAttribute("src"));
img.setAttribute("src","../images/02.jpg");
img.removeAttribute("src");
//2)通过属性名(少数的几个属性可以用该方式)
//id, className, style
var a = document.getElementById("a1");
console.log(a.style.color);
a.style.color = "blue";}

我是初学者，如有更新不好的，欢迎这位大神指出，谢谢大家！

更多精彩以后更新，转载注明！