发表于： 2019-11-17 23:48:10

1 907

今日完成:

JavaScript 事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件可以是浏览器行为，也可以是用户行为。
HTML 事件的实例：
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
语法:
用单引号或者双引号都可以,把js语法包裹起来,但是当js内引用代码时,必须与包裹用的异同
<some-HTML-element some-event='JavaScript 代码'> = <some-HTML-element some-event="JavaScript 代码">
ex:
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
显示:
点击后:
描述:点击按钮后下方显示当天具体时间,JavaScript 代码将修改 id="demo" 元素的内容
ex:
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
显示:
点击后:
描述:代码将修改自身元素的内容 (使用 this.innerHTML)
ex:
<script>
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
描述:通过事件来调用
... ...
多种方法来执行 JavaScript 事件代码：
HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
可以为 HTML 元素指定自己的事件处理程序
可以阻止事件的发生。
... ...
//
JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
    // 执行代码
}
当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用
ps:JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
/
调用带参数的函数
在调用函数时，可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
可以发送任意多的参数，由逗号 (,) 分隔：
myFunction(argument1,argument2)
当声明函数时，请把参数作为变量来声明：
function myFunction(var1,var2)
{
代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。
ex:
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){                  //一 一对应
    alert("Welcome " + name + ", the " + job);//在这里调用
}
</script>
显示:
点击后:
使用不同的参数来调用该函数，这样就会给出不同的消息：
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{
    alert("Welcome " + name + ", the " + job);
}
</script>
显示
点击第二个后:
总结:声明时,给定不同的参数,可以多次套用相同的函数,展示不同的效果
/
带有返回值的函数
在使用 return 语句时，函数会停止执行，并返回指定的值。
通过使用 return 语句就可以实现函数将值返回调用它的地方。
ex:
function myFunction()
{
    var x=5;
    return x;
}
上面的函数会返回值 5
ps:整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。
ex:
使返回值基于传递到函数中的参数：
计算两个数字的乘积，并返回结果：
<p id="demo"></p>
<script>
function myFunction(a,b){
    return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
显示:12
描述:参数对应调用,返回4x3的结果
ex:
仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：
function myFunction(a,b)
{
        if (a>b)
        {
                return;
        }
        x=a+b
}
如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。
/
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
/
向未声明的 JavaScript 变量分配值
把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。
这条语句：
carname="Volvo";
将声明 window 的一个属性 carname。
非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。
var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性
console.log(this.var1); // 1
console.log(window.var1); // 1
delete var1; // false 无法删除
console.log(var1); //1
delete var2;
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义
//
JavaScript 作用域
作用域是可访问变量的集合。
在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。
JavaScript 局部作用域
变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。
因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
JavaScript 全局变量
变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
总结:
相同点:
与less语法相似,设置一个变量,它同级或者同级的子集都可以调用,
但是,当他相对与父元素的兄弟元素来说又是局部元素,不可调用
不同点:如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
即:如果变量没有声明，它将自动成为全局变量
ex:
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
    "我可以显示 " + carName;
function myFunction()
{
    carName = "Volvo";
}
显示:  我可以显示 Volvo
描述:直接调用carName
函数参数
函数参数只在函数内起作用，是局部变量。
HTML 中的全局变量
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
//
JavaScript 字符串
JavaScript 字符串用于存储和处理文本。
字符串可以是插入到引号中的任何字符。可以使用单引号或双引号,
可以在字符串中使用引号，但是字符串中的引号不要与字符串的引号相同
/
特殊字符
可以在字符串添加转义字符来使用引号：
ex:
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
显示:
It's alright
He is called "Johnny"
总结:\和后面的引号会被编译成引号,不会与包围字符串的引号冲突
应用:在 JavaScript 中，字符串写在单引号或双引号中。
但是,如"We are the so-called "Vikings" from the north."
JavaScript 无法解析
字符串 "We are the so-called " 被截断
可以使用反斜杠 (\) 来转义 "Vikings" 字符串中的双引号
"We are the so-called \"Vikings\" from the north."
反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：
转义字符 (\) 可以用于转义撇号，换行，引号，等其他特殊字符
/
字符串可以是对象
通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"
但也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John")
原始值字符串，如 "John", 没有属性和方法(因为他们不是对象)。
原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。
JavaScript 条件(判断) 语句
JavaScript if...Else 语句
条件语句用于基于不同的条件来执行不同的动作。
在 JavaScript 中，可使用以下条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
if 语句
只有当指定条件为 true 时，该语句才会执行代码。
语法
if (condition)
{
    当条件为 true 时执行的代码
}
ps:使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！
ex:
<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x="";
    var time=new Date().getHours();
    if (time<20){
        x="Good day";
    }
    document.getElementById("demo").innerHTML=x;
}
</script>
显示:
点击后:
总结:与if...else 语句的区别就是只有在指定条件为 true 时才执行代码,没有else,不为true就不执行
/
if...else 语句
请使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。
语法
if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}
ex:
... ...
if (time<20){
         x="Good day";
     }
    else{
        x="Good evening";
    }
... ...
描述:当时间小于 20:00 时，生成问候 "Good day"，否则生成问候 "Good evening"。
/
if...else if...else 语句
使用 if....else if...else 语句来选择多个代码块之一来执行。
语法
if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}
ex:
... ...
if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<16)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}
... ...
描述:如果时间小于 10:00，则生成问候 "Good morning"，如果时间大于 10:00 小于 20:00，则生成问候 "Good day"，否则生成问候 "Good evening"：
总结:html中从上往下读取,触发两次判断,第一次是,就输出,不是第二次判断,(注意范围不能与第一次重合),是输出,
不是都归为else前两个都不是输出第三段代码(默认范围不会与前两个判断条件重合)
//
JavaScript switch 语句
switch 语句用于基于不同的条件来执行不同的动作。
语法
switch(n)
{
        case 1:
                执行代码块 1
                break;
        case 2:
                执行代码块 2
                break;
        default:
                与 case 1 和 case 2 不同时执行的代码
}
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，
则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
代理解
//
JavaScript for 循环
循环可以将代码块执行指定的次数。
一遍又一遍地运行相同的代码，并且每次的值都不同，可以使用循环实现。
不同类型的循环
JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
/
For 循环
for 循环的语法：
for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}
语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
语句 1
通常使用语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的，也就是说不使用语句 1 也可以。
可以在语句 1 中初始化任意（或者多个）值：
ex:
for (var i=0,l=cars.length; i<l; i++){
    document.write(cars[i] + "<br>");
}
总结:
语句之间用分号隔开,初始化多个值,值与值之间用逗号隔开,且语句1是可选项,不是必选项,不选时,空的语句直接打个分号(;)表示
语句 2
通常语句 2 用于评估初始变量的条件。
语句 2 同样是可选的。
如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。
ps:如果省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。
语句 3
通常语句 3 会增加初始变量的值。
语句 3 也是可选的。
语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+15)。
语句 3 也可以省略（比如当循环内部有相应的代码时）：
ex:
<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0,len=cars.length;
for (; i<len; ){
    document.write(cars[i] + "<br>");
    i++;
}
</script>
显示:
BMW
Volvo
Saab
Ford
/
JavaScript 函数定义
JavaScript 使用关键字 function 定义函数。
函数可以通过声明定义，也可以是一个表达式
函数声明的语法 :
function functionName(parameters) {
  执行的代码
}
函数声明后不会立即执行，会在需要的时候调用到。
函数存储在变量中，不需要函数名称，通常通过变量名来调用。
函数以分号结尾，因为它是一个执行语句。
JavaScript 函数有 属性 和 方法。
函数定义作为对象的属性，称之为对象方法。
函数如果用于创建新的对象，称之为对象的构造函数。
JavaScript HTML DOM
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
总结:js能做到的事情,感觉全能
查找html元素的三种方式
1.通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
ex:
<p id="intro">你好世界!</p>
<p>该实例展示了 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>
显示:
你好世界!
该实例展示了 getElementById 方法!
文本来自 id 为 intro 段落: 你好世界!
总结:通过getElementById("intro")来查找对应(p)标签中的对应的id,id名可以为任意字符串
2.通过标签名查找 HTML 元素
ex:
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>
显示:
你好世界!
DOM 是非常有用的。
该实例展示了 getElementsByTagName 方法
id="main"元素中的第一个段落为： DOM 是非常有用的。
描述:查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素
总结:getElementsByTagName("xx"),中,xx可以为任意标签,意为查找所有的xx标签元素,前面可以加id等,把它局限在某个范围
3.通过类名找到 HTML 元素
通过 getElementsByClassName 函数来查找 class="xx" 的元素：
ex:
<p class="aaa">你好世界!</p>  //这是目标类,引用文本
<script>
x=document.getElementsByClassName("aaa");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>
<p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
显示:文本来自 class 为 aaa 段落: 你好世界!
总结:通过getElementsByClassName("xxx");锁定目标为"xxx"类,可以直接调用,也可以为这个函数命名,xx="xxx",用xx来引入目标类的内容
总结:通过什么方式来确定js的作用对象
开始js任务一:
解答任务一需求的知识点:
任务一需要的知识点:
1.js的基本数据类型有哪些?
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
2.数据类型的方法怎么调用?
遇到问题:
函数,对象,方法,类,成员.属性等的区别?
待解决
3.判断和循环语句的使用?
if...Else 语句判断
3种条件语句
1.满足xx,执行代码aa,不满足,不执行
2.满足xx执行代码aa,否则,执行bb
3.满足xx执行代码aa,不满足,看是否满足yy,满足,执行bb,不满足执行cc
ps:代码要有严谨性,比如第三个语法,中间段,要有(类似)最大值和最小值包裹
使用for循环
for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}
语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
4.函数是什么，DOM和BOM是什么，事件是什么。
JavaScript 函数:
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript 事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
DOM:
当网页被加载时，浏览器会创建页面的文档对象模型

3种方式锁定目标元素


遇到问题:
学的东西多,单个还能理解,现在多了,各个东西在脑中混在了一起,不是特别明确,
需要对各个属性,类,函数,对象,方法有个清晰的认知,不然不知道该怎么下手
收获:
js的一些基础知识的初步了解,最起码知道单个该怎么用,但是不会组合
明日计划:
1.任务一需要的知识了解的差不多了,首先先把各个函数,对象之类的问题,在脑中搞明确,不要混合在一起
2.再思考根据实际任务怎么把它们组合在一起使用


上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1