发表于： 2019-12-11 19:51:40
1 1248
今日完成
函数(补充)
使用关键字 function 定义函数。
两种表现形式:
1.函数可以通过声明定义.
2.函数表达式定义
1.之前学过的简单描述
通过function 函数名(形参){执行代码}
其中函数的形参,根据实际情况,决定设置or不设置
函数运行(两种)
1.直接运行(调用时),要在js代码中,先设置一个执行代码,需要时调用
2.设置事件,触发事件运行函数
ps:函数内有多个值,用return回调需要的值(函数输出)
ex:两种表现形式
声明
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
函数表达式(效果相同)
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
描述:JavaScript 函数可以通过一个表达式定义。函数表达式可以存储在变量中
在函数表达式存储在变量后，变量也可作为一个函数使用
以上函数实际上是一个 匿名函数 (函数没有名称)。
函数存储在变量中，不需要函数名称，通常通过变量名来调用。(学习调用方式,传递参数的方式)
-------------------------------------------------------------------------------------------------
变量提升
hoisting(变量提升)
变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
函数及变量的声明都将被提升到函数的最顶部。
变量可以在使用后声明，也就是变量可以先使用再声明。
ex:(对比)
<p id="demo"></p>
<script>
var x = 5; // 初始化 x
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
</script>
显示:5 7
总结:
1.想要两个数字不运算,而是相连,在两者之间加上空白字符串
2.x+"y"=5y,y失去赋予的值,所以这种是不可行的
3.5+"7"=57可行,+代表连接而不是运算
---
<p id="demo"></p>
<script>
var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = "x 为：" + x + "，y 为：" + y; // 显示 x 和 y
var y = 7; // 初始化 y
</script>
显示:x 为：5，y 为：undefined
描述:按照正常显示,变量没有提升,是没有y这个变量的,所以没有显示,因为没有y.
而在这里,变量y提升到顶部,变量y的值没有提升,所以显示y未定义
相当于:
var x = 5; // 初始化 x
var x = 5; // 初始化 x
var y; // 声明 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
y = 7; // 设置 y 为 7
//-------------------------------------------------------------------------
JSON
什么是 JSON?
JSON 英文全称 JavaScript Object Notation;是一种轻量级的数据交换格式;JSON是独立的语言
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。
文本可以被任何编程语言读取及作为数据格式传递。
JSON 语法规则
数据为 键/值 对;数据由逗号分隔;大括号保存对象;方括号保存数组
JSON 数据 - 一个名称对应一个值
JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。
键/值对包括字段名称（在双引号中），后面一个冒号，然后是值
ex: "name":"Runoob"
JSON 对象
JSON 对象保存在大括号内。
就像在 JavaScript 中, 对象可以保存多个 键/值 对：
{"name":"Runoob", "url":"www.runoob.com"}
JSON 数组
JSON 数组保存在中括号内。
就像在 JavaScript 中, 数组可以包含对象：
"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]
在以上实例中，对象 "sites" 是一个数组，包含了三个对象。
每个对象为站点的信息（网站名和网站地址）。
JSON 字符串转换为 JavaScript 对象
通常我们从服务器中读取 JSON 数据，并在网页中显示数据。
1.创建 JavaScript 字符串，字符串为 JSON 格式的数据
2.使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
3.在你的页面中使用新的 JavaScript 对象
ex:
<p id="demo"></p>
<script>
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
</script>
显示:Google www.google.com
------------------------------------------------------------------------------
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
//--------------------------------------------------------------
his
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。
(对象)方法中的 this
在对象方法中， this 指向调用它所在方法的对象
ex:
<p id="demo"></p>
<script>
// 创建一个对象
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// 显示对象的数据
document.getElementById("demo").innerHTML = person.fullName();
显示:John Doe
单独使用 this
单独使用 this，则它指向全局(Global)对象。
在浏览器中，window 就是该全局对象为 [object Window]
ex:
<p id="demo"></p>
<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>
显示:[object Window]
函数中使用 this（默认）
在函数中，函数的所属者默认绑定到 this 上。
ex:
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
</script>
显示:[object Window]
事件中的 this
在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素
ex:<button onclick="this.style.display='none'">点我后我就消失了</button>
显示:
描述:点击按钮,触发事件,this指向接收事件得的button,事件是隐藏,也就是按钮隐藏
//------------------------------------------------------------------------------------------
理解对象(补充理解)
在 JavaScript中，几乎所有的事物都是对象。
为变量赋值
var car = "Fiat";
为对象赋值,但对象可以包含多个值（多个变量）。
var car = {type:"Fiat", model:500, color:"white"};
描述:
3 个值 ("Fiat", 500, "white") 赋予变量 car
3 个值 ("Fiat", 500, "white") 赋予变量 car
3 个变量 (type, model, color) 赋予变量 car
"JavaScript 对象是变量的容器"( "JavaScript 对象是键值对的容器"。)。
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为 对象属性。
访问对象属性
两种方式
ex:
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
id : 5566
};
方式1:document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
方式2:document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>
描述:使用 .property 或 ["property"]效果相同
显示:John Doe
对象方法
对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
ex:(同上)
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
显示:John Doe
总结:回调 return this.firstName + " " + this.lastName;给函数,而函数又是对象属性得值,层层递进
总结:(整体认知)
对象:
1.对象就是一个变量的集合,声明一个变量(对象),为这个变量(对象)赋值(可以是多个),然后把变量的值(属性)当成变量再次赋值(也可以多个,类似选择器嵌套)
2.表现形式差异,声明一个变量(对象),它的属性(变量值,但不是具体值,一般是一个范围,再次赋值,也就是属性值才是具体值)用大括号包裹,
属性与属性间用逗号隔开,赋值用冒号而不是引号(这里直接当成变量,用冒号为变量赋值)
3.同一个对象,有多个叫法,一个对象括号内是它的属性和属性值(重新声明的变量和变量的值),对象名相当于这个变量集合的名字(类似数组),
可以说对象是变量的容器,也可以说是键值对的容器(以当做变量,但是属性变现形式还是有区别,这是一种正统的叫法),键值对键名就是属性名(变量名),值(value)就是值
4.调用对象(变量组)中某个(精确)属性(变量)的方式,(ps:调的是名字属性名/变量名,用(输出)的是它代表的值)
1.是用点连接对象名和属性名(键名):队形名.属性名
2.是用中括号连接对象名和属性名,且括号里面是属性名,且属性名要用引号包裹
5.属性值,可以是一个函数(方法),函数运行,把运行结果赋予函数(函数值),函数的值就是这个属性的值
6.有个名(变量名),有个值都可以叫做对象
//--------------------------------------------------------------------------------------------------------------------------
遇到问题:
1.心态还是没有调整好,有点学不进去,看的东西不进脑子,思考迟钝
2.json概念不理解
3.this概念(含义)理解,应用环境待理解
收获:
1.匿名函数(表达式)怎么设置,怎么传递参数运用
2.变量提升是什么
3.理解对象
明日计划:继续2-4
返回列表
评论