day7 学习js（一）
html未完成部分
1. 显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: rgb(92, 124, 184);
}
.one{
/* 隐藏，不占据屏幕空间 */
/* display: none; */
/* 显示 */
/* display: block; */
/* 隐藏，占据屏幕空间 */
/* visibility: hidden; */
/* 显示*/
/* visibility: visible; */
/* 透明度，取值为0-1，也可以用来隐藏，也占用空间 */
opacity:0.5;
/* 显示 */
/* opacity: 1; */
background-color: rosybrown;
/* float: left; */
}
</style>
<script>
window.onload = function(){
//获取元素
var btn = document.getElementById('btn');
var div = document.getElementsByClassName('one')[0];//返回的是一个类数组对象,但这里只拿出了一个dom节点
// 绑定事件
//btn.onclick = function(){
// div.style.display = "none";
// }
//如果需要切换回来，可以用两种方式：
//方法一
btn.onclick = function(){
if(div.style.display == "none"){div.style.display = "block";}
else{div.style.display = "none";}
}
//方法二
// var btn1 = document.getElementById('btn1');
// btn1.onclick = function(){
// div.style.display = "block";
// }
//下面是用jQuery进行隐藏与显示的方法
// $('.one').show();
// $('.one').hide();
// $('.one').css('display','block');
// $('.one').css('display','none');
// $('.one').css('display')==='one'条件判断
}
</script>
</head>
<body>
<button id="btn">切换</button>
<!-- <button id="btn1">显示</button> -->
<div class="one">one</div>
<!-- 通过浮动形式，文字是不会消失的，也不会被隐藏到one底下。 -->
<div class="two">two</div>
</body>
</html>
2. 内容溢出处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.one{
width: 200px;
/* 如果不设置高度，父元素的高度由内部子元素决定到底多高，并且不会溢出 */
height: 200px;
border: 2px solid red;
/* 超出内容隐藏 */
/* overflow: hidden; */
/* 产生滚动条 auto：如果内容超出就产生滚动条，如果内容不超出就不产生滚动条*/
overflow: auto;
}
</style>
</head>
<body>
<div class="one">
start
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
end
</div>
</body>
</html>
3. 过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>过渡</title>
<style>
div{
height: 100px;
width: 100px;
background-color: red;
/* transition:all 2s; */
transition: all 2s linear 3s;
}
/* 光标悬停在元素上的时候展现的样式 ：hover悬停 */
div:hover{
width: 300px;
background-color: cornflowerblue;
/* linear是匀速。3s是延迟时间 */
/* transition: all 2s linear 3s; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
js的学习
1.JS.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>在浏览器底下的应用</title>
<script>
console.log(2);
console.log(a,'--++--');
</script>
<!-- 引入外部js文件，在src写了地址之后，在此标签内再写任何代码，在这里写的js代码不再起作用，它只认src里面的代码 。所以这种带有src的就不要再写代码了-->
<!-- 简单来说就是不要在这里写js，不识别 -->
<script src="./js/1-aaa.js"></script>
<script>
console.log(a,'------');
</script>
</head>
<body>
<div>
<div class="one">
hello
<script></script>
</div>
<script>
document.getElementsByClassName('one');
</script>
</div>
</body>
</html>
2.js基本数据类型
var a = 1;
a = 'hello';//可以更改成字符串类型
var b = 'hello';
var c = true;
var d = null;
var e = undefined;
var f;//在没有赋值的时候就是undefined
var obj = {
name:'zhangsan',
}
//访问对象中的属性
//Obj.name //返回的是name属性对应的属性值，‘zhangsan’
console.log(obj.name); //'zhangsan'
console.log(obj.age); //undefined，因为当前对象里面没有age，但是不会报错，最终会给一个undefined的值
//console.log(g);//之前没有声明g，会报错，g is not defined.
console.log('--------');
console.log(null === undefined);
console.log(null == undefined);
console.log(1);
console.log('1');
console.log(typeof 1);
console.log(typeof '1');
console.log(1 == '1');
console.log(1 === '1');
console.log(typeof true);//boolean
console.log(typeof null);//object;将来存放的是对象
console.log(typeof undefined);//undefined;
console.log(typeof obj);//object
console.log(typeof []);//object
console.log(typeof function(){});//function
/**
* 类型 typeof取值
* number number
* string string
* boolean boolean
* undefined undefined
* null object
* object object
* function
*/
//
if(!obj.age === undefined){
}
//基本数据类型存放在栈区，引用数据类型实际上存放在堆区
var o = {};
var o1 = null;
3.js数据类型
var a = 1;
var b = {name:'zhangsan'};
//值传递 将基本数据类型的值复制一份再赋值
var c = a;
a = 11;
console.log(a,c); //11,1
//址传递,引用传递 将地址传递
var e = b;//e b1001
b.age = 12;
console.log(b,e);
4.if条件语句
var age = 34;
//方法一
// var result = '成年人';
// if(age<18){
// result = '未成年人';
// }
// console.log(result);
//方法二
var result = age < 18 ? '未成年人':'成年人';
console.log(result);
var result2 = '成年人';
if (age<18){
result2 = '未成年人';
}
console.log(result2);
5.for条件语句（99乘法表）
//99乘法表
//初始条件，结束条件，迭代条件
for(var i = 1;i<10;i++){
// console.log(i);
var str = '';
for(var j = 1;j<=i;j++){
str += i+'*'+j+'='+(i*j<10?i*j+" ":i*j)+' ';//(i*j<10?i*j+" ":i*j),写这个的原因是如果结果小于10，后面的会错版
}
console.log(str);
}
6.switch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/5-switch.js"></script>
<script>
//var num = +prompt('请输入要转换的数值：');//prompt是会话框，采集用户输入的内容
// console.log(num);
// console.log(+num); //加了个加号表示这个是正数，这里就把用户输入的5变成了number类型，因为原来用户输入5的是字符串类型
// console.log(num)
// console.log(5);
//var a = change(num);
// console.log(a);
//alert(a);
//alert(change(num));
//搞个死循环
// while(true){
// var num = +prompt('请输入要转换的数值：');
// alert(change(num));
// }
//只让用户输入三次
var i = 0;
while(i<3){
var num = +prompt('请输入要转换的数值：');
alert(change(num));
i++;
}
</script>
</head>
<body>
</body>
</html>
function change(num){
// var num = 10;
// 1-壹 2-贰 3-叁 4-肆 5-伍 6-陆 7-柒 8-捌 9-玖 10-拾
var result;
switch(num){
case 1 :
result = '壹';
break;
case 2 :
result = '贰';
break;
case 3 :
result = '叁';
break;
case 4 :
result = '肆';
break;
case 5 :
result = '伍';
break;
case 6 :
result = '陆';
break;
case 7 :
result = '柒';
break;
case 8 :
result = '捌';
break;
case 9 :
result = '玖';
break;
case 10 :
result = '拾';
break;
default:
result = '输入错误';
break;
}
return result;
}
var a = change(5);
console.log(a);
day8 学习js（二）
今天主要学习js的两个内容：
1.JS对象，对象序列化，对象属性遍历，对象属性删除
var obj = {name:'zhangsan',
age:'12',
test:123};
var test = 'age';
// obj.age
// obj[test]
// obj['age'] //[]访问属性，内可存放变量
console.log(obj[test]); //12
console.log(obj['test']);//123
// 删除test属性,用关键字delete
delete obj.test;
console.log(obj);
var obj2 = {
username:'lisi',
password:'123456',
gender:'male',
age:'',
hobby:'',
info:'我是一个xxx的人',
sno:1001,
};
//遍历对象，获取属性值，如果属性值为空，删除属性
console.log(obj2);
for(var key in obj2){
//key--属性名
// console.log(key,obj2[key]);
if(!obj2[key]){
delete obj2[key];
}
}
console.log(obj2);
JSON字符串形式和JS字符串形式之间的转换
var obj = {
name:'zhangsan',
age:12
};
console.log(obj);
console.log(obj.toString());
console.log(JSON.stringify(obj));//将js对象转换成JSON字符串，JSON打印出来的格式{"name":"zhangsan","age":12}
var jsonstr = '{"name":"zhangsan","age":12}';
console.log(JSON.parse(jsonstr));//JSON.parse()可以将JSON字符串转换成js能识别的对象；
2.JS函数
在函数内使用var修饰的是局部变量，只能在函数内访问。在函数外不可以访问函数内的局部变量。
在函数内可以访问全局变量。
在函数内没有使用var修饰的是全局变量。在函数外声明的变量是全局变量。
变量声明会提升，函数声明也会提升，函数声明会提升到最前方，然后是变量声明的提升。
函数内的arguments对象，是一个类数组对象，内部存放的是实参。arguments只能在函数内访问。
使用Array.from(arguments)将类数组对象转成数组对象。
累加计算
function add(){
//arguments，类数组对象，只能在函数内部访问，代表所有的实参存放的位置
console.log(arguments);
var arr = Array.from(arguments);
//console.log(arr);
var total = 0; //累加的话这里是0，累乘的话是1
for(var i = 0;i<arr.length;i++){
total += arr[i]; //累加的话这里是+=，累乘的话是*=
}
return total;
}
console.log(add(6,8));
//计算多个数的累加
console.log(add(3,5,6,8,9,11,8));
关于全局变量和局部变量
var d = 34;
function test(a,b) {
//var a,b;
a = 3;
b = 4;
console.log(a,b);
var c = 12;
console.log(c);
d = 78;
var d = 56; //在上一行有d=78的情况下，var修饰的变量会提前，“var d;”会放到函数的开头,这里就变成“d=56”，所以这里函数内部的d=78和d=56实际上是修改函数内部的d，函数内打印出来的是最终赋值的d=56。//在上面没有d=78的情况下，这里加了var，所以他变成了函数里的局部变量，所以下面打印出来的d是34而不是56.
console.log(d,'----')
}
test(1,2);
//console.log(c); //c不能在函数外进行使用，因为他是函数内的局部变量，它是在函数里面声明的，所以它只能在函数内部访问
console.log(d,'+++++');
函数可作为参数传递，也可作为返回值。
var test = function(){
console.log(123);
}
//test();
useFun(test);
//函数作为参数传递
function useFun(fun) {
var c = 3;
fun(c);
}
//回调函数
useFun(function (a) {
//a 3
console.log(a);
})
/*
Array.forEach(function (item,index) {
console.log(item.index);
})
success:function (res) {
res;
}
*/
//函数作为返回值
function start() {
return function () {
return {
name:'lisi',
age:12,
sayName:function () {
console.log(this.name);
}
}
};
}
start()().sayName();
/*
var a = start();//a就是function.
a();
var a = function(){
console.log(1);
}
*/
/*
var obj = {
name:'zhangsan',
age:12,
sayName:function () {
// console.log(1,'****');
console.log(this.name); //打印obj的name，也可以用console.log(obj.name);
},
};
obj.sayName();
*/
问题模块
要学会就不只是要跟着老师敲代码那么简单，所以在自习时间，自己又重新敲了一遍，果然出现了很多错误：
1.在给变量赋值的时候出现了错误
2.累加的时候出现了undefined的错误，为什么呢？因为少了“return sum；”，函数里面没有给返回值。
扫一扫
1648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
