JS的总结（基础知识）
JS 的总结（基础知识）
什么是JS？
HTML定义了⽹页的内容，CSS定义了⽹页的布局，那么JavaScript定义了⽹页的⾏为。
将静态的⽹页转化动态类型。JavaScript可以跨平台使⽤，和java没有任何关系。当浏览器显⽰该⽹页时，浏览器就会执⾏js程序。来达到动态的效果。
JS的⽤法
JS的引⼊
1. HTML中 使⽤
JS的语句
1. JavaScript的语句都需要；结尾
2. 弹出提⽰框 alert（）；
3. 编辑页⾯内容： document.write（）；
4. 调试程序，输出到浏览器控制台：console.log（“ "）;
JS的执⾏顺序（JS可以放在页⾯的任何地⽅包括页⾯外）
1. 部分JS的代码将在页⾯之前被载⼊
2. 部分js代码将在页⾯载⼊的时候被执⾏
3. 标签后的代码将在页⾯载⼊完成之后被执⾏
JS的注释
1. 单⾏注释 //
2. 多⾏注释 /* */
3. 注释的快捷键 CRTL + SHIFT +/
JS的定义变量
1. 定义变量 必须以字母下划线开头，由字母下划线数字组成
2. 定义变量 ⼀般采⽤驼峰式命名法 即 第⼀个⾸字母⼩写 其余⾸字母⼤写
3. ⼀般显⽰定义 var
4. 不能使⽤JS的关键字 以及保留字
/ JS 的数据类型 /
1. JS 总共由五⼤类型 数值类型、 布尔型、字符串类型、undefined类型 null类型
2. undefined类型 是 已经创建但是没有初值的类型
3. null ⽤来表达某个变量的值为空
4. 数组的三种说明⽅式
var i= new Array（）； i[0]=1,i[1]=2;
var j = new Array(“a”,“b”,“c”);
var a = [3,5,1];
5. 函数的声明⽅式 functicon name（）{}
6. 对象
对象的声明⽅式
var 变量名 = {属性名 ：值，属性名：值，…}
var 变量名 = new Object（）； 变量名.属性名 = 值；变量名.属性名 = 值；
通过构建模板来说明对象
<script>
//模板
var MyObject = function (name1,age){
//属性 this：指当前对象
this.name = name1; // name1 代表参数 name创建出来的对象当前的对象
this.age = age;
//⽅法
this.info = function(){
alert(this.name+" , "+this.age);
}
}
// 对象 p1
var p1= new MyObject("zs","12");
p1.info();
var p2 = new MyObject("zd","20");
p2.info();
</script>
-JS的模板相当于 Java的类
对象的获取⽅式
object.属性名
object[“属性名”] object是顶级⽗类
JS数据类型的转化
1. 获取数据变量的数据类型 typeof +var 可以显⽰数据类型
2. Number（）函数
如果转换的内容就是⼀个数值类型的字符串没那么将来再转换的时候会返回⾃⼰ var i = “2”; alert(i);//2如果转换内容本⾝不是⼀个数值类型的字符串，那么在转换的时候结果就是NaN
如果转换的内容是空 则输出0
如果是布尔型，true转换为1，flase转换为0
3. parselnt（）函数
忽略字符串前⾯的空格，直⾄到第⼀个⾮空字符，还会将数字后⾯的⾮数字的字符串去掉
如果第⼀个字符不是数字独好或者负号，返回NaN
如果转换的内容是空字符串，那么转换的结果是0
如果是布尔值 NaN
由于⼀般的除法 在JS中并不是整除 所以可以使⽤toFixed（）函数 来保留⼏位⼩数
4. parselnt（）函数 运算规则与parseint（）相同
5. 字符串类型
String类型
转化 ” “+i 则可以转化成字符串类型
主要常⽤的函数
str.substring（2，8）；是截取字符串中的字符串（按照顺序截取）这个函数是左闭⼜开 空格也算⼀个字符
str.substr(2,8)；是截取长度 不是字符串数组的顺序
正则表达 /ok/g 更换字符串 ， 第⼀个是将ok的所有字符串进⾏ 更换
toString类型
undefined 和 null 不能⽤toString（）转化成 String类型
toString（）⽅法可以把⼀个逻辑值转化为字符串，并返回结果。 Steing（）
JS的算数运算符
1. JS的除法 / 并不是整除
2. ++ 单独放在⼀⾏ 作⽤ var i++； i= i+1
3. ++i+i++ 运算顺序 先进⾏ i= i+1 然后在进⾏ i+i 最后 i= i+1
4. x +=y 等价于 x= x+ y；
5. === 表⽰值和数据类型相等判断
6. && 、 || 、 ！ 与⾮或 逻辑运算符
7. 注意 70<i<80 转化成JS 70<i&&i<80
8. 三⽬运算符 条件?满⾜条件⼀：不满⾜则条件⼆
username = {name:"zhangsan",password:123456,name1:"lihua",password1:1234};
console.log(username.name);
username1 = {name:"zhangsan",password:123456};
username.name == username1.name&&username1.password == username.password? console.log("1"):console.log("0");
9. if else 与switch case 语句
10. 当有范围的时候 选择 if else 语句 当有准确选项时选择 switch case 语句
11. while 与 do（） while区别？
while循环是先判断后循环， 判断如果满⾜条件进⼊循环 本次循环后再次判断
do-while循环与while循环的不同在于：它先执⾏循环中的语句，然后再判断表达式是否为真, 如果为真则继续循环；如果为假, 则终⽌循环
JS的数组导航栏
var arr = ['导航⼀','导航⼆','导航三','导航四'];
document.write("<ol>");
//  for(var i = 0;i<arr.length ;i++)
// for (index in object() ){} 注意index是字符串类型
for(i in arr){
document.write("<li>"+arr[i]+"</li>");
}
document.write("</ol>");
var arr1 = ['学校⼀','学校⼆','学校三','学校四'];
input绑定onblur事件document.write("<select>");
for (i in arr1){
document.write("<option>"+arr1[i]+"</option>");
}
document.write("</selected>");
var arr2 = ['事物⼀','事物⼆','事物三','事物四'];
for (i in arr2){
document.write("<input type='checkbox'>");
document.write(arr2[i]);
document.write("</input>");
}
</script>
<style>
ol{
list-style: none;
}
li{
float: left;
padding: 10px;
}
</style>
1. 注意 多选时通过 来进⾏的
2. 可以通过JS对ol li ⽆序列表修改样式
3. 为什么列表可以直接施加样式？ ol （有序列表） ul（⽆序列表）
4. 因为是标签选择器：标签选择器是选了之后所有的这个标签都施加这个样式JS 的 Date的⽤法
1.Date（） 作⽤是获取时间
<title>Data的⽤法</title>
<script>
var a =new Date();
document.FullYear()+"年");
document.Month()+1+"⽉");
document.Date()+ "号");
document.writeln(" "+a.getHours()+" 时");
document.writeln(" "+a.getMinutes()+" 分");
document.writeln(" "+a.getSeconds()+" 秒");
</script>
2. 制作⼀个定时器
<meta charset="UTF-8">
<title>JS02定时器</title>
<script>
var Timer;
function showTime(){
var a = new Date();
var  b =ElementById("myTime");
b.innerHTML=  a.getFullYear()+ "年"+a.getMonth()+ 1 + "⽉"+a.getDate() + "号"+" " + a.getHours() + " 时"+ " " + a.getMinutes() + " 分"+" " +a.getSeco nds()+ " 秒";
}
//        b.innerHTML只能运⾏⼀次
timer = setInterval(function () {
showTime();
},1000);
</script>
</head>
<body>
<span id="myTime"></span>
</body>
制作定时器时候 可以通过 span 然后 先定义⼀个展⽰时间的函数
这个函数只能展⽰⼀次时间，通过ElementById（）获取span的id
然后进⾏innerHTML进⾏插⼊ ，插⼊只能⼀次插⼊
然后 在使⽤ setInterval功能函数 每隔⼀段时间就运⾏⼀次来进⾏
Mash
<script>
document.writeln(Math.PI+"<br>");//圆周率
document.il(3.1415)+"<br>");// 向上取整
document.und(3.1415)+"<br>");//四舍五⼊
document.writeln(Math.floor(3.1415)+"<br>");//向下取整
document.writeln(Math.random()+"<br>");//⽣成⼀个随机数
document.writeln(Math.random().toFixed(2)*100+"<br>");//⽣成⼀个随机数
document.writeln(Math.random().toFixed(2)*100+1+"<br>");//⽣成⼀个随机数
document.il(Math.random().toFixed(3)*100)+"<br>");//⽣成⼀个随机数
</script>
1. Mash常⽤的函数
2. Math.PI表⽰ 圆周率
3. il表⽰向上取整
4. und表⽰四舍五⼊
5. Mash.floor表⽰向下取整
6. undom（）表⽰⽣成⼀个随机数 范围0-1 左闭⼜开
7. ⽤ 向上取整 在包含 roundom 可以实现 0-100随机数
JS的判断⼀个变量是不是同⼀类型

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。