dukai954

javaScripty笔记

《JavaScript-笔记》

CSS的基本选择器

选择器分类	语法
标签选择器	标签名
类选择器	.类名
ID选择器	#ID
通用选择器	*

CSS的扩展选择器选择元素

扩展选择器	作用	语法符号
层级选择器	通过父选择器和子孙选择器来选择元素	空格
属性选择器	通过属性去选择元素	[]
伪类选择器	不同的操作状态下显示不同的样式	:
并集选择器	两种以上选择器的和	,
交集选择器	同时满足2个选择条件	标签名#ID 标签名.类名

能够说出盒子模型的属性

属性	作用
width	宽度
height	高度
margin	外边距
padding	内边距
border	边框：粗细线型颜色

五种数据类型

关键字	说明
number	数值
boolean	布尔
string	字符串
object	对象
undefined	未定义类型

学习目标

能够使用JS中的流程控制语句(if, switch,for, while)
能够在 JS 中定义命名函数和匿名函数(方法)
能够使用 JS 中常用的事件
能够使用 JavaScript 对 CSS 样式进行操作
能够使用数组中常用的方法
能够使用日期对象常用的方法

学习内容

流程控制：if 语句

目标

JS中if语句使用非boolean类型的条件

if 语句：

在一个指定的条件成立时执行代码。

if(条件表达式) {
     //代码块;
}

if…else 语句

在指定的条件成立时执行代码，当条件不成立时执行另外的代码。

if(条件表达式) {
     //代码块;
 }
 else {
     //代码块;
 }

if…else if…else 语句

使用这个语句可以选择执行若干块代码中的一个。

if (条件表达式) {
     //代码块;
 }
 else if(条件表达式) {
     //代码块;
 }
 else {
     //代码块;
 }

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if语句title>
head>
<body>
<script type="text/javascript">
    /*
    1. Java中判断条件必须是布尔类型的值
    2. 在JS中可以使用非布尔类型的表达式
                    真       假
        number      非0      0
        string      非空串   空串 ""
        object      非空     null
        undefined            永远为假
        NaN (Not a Number)   永远为假
    3. 建议判断条件还是使用boolean类型比较好
     */
    /*
    if(0) {
        document.write("真" + "
");
    }
    else {
        document.write("假" + "
");
    }
     */

    /*
    if("") {
        document.write("真" + "
");
    }
    else {
        document.write("假" + "
");
    }
     */

    /*
    var person = {};  //创建一个对象
    if(null) {
        document.write("真" + "
");
    }
    else {
        document.write("假" + "
");
    }
     */

    let u;   //undefined
    if(u) {
        document.write("真" + "
");
    }
    else {
        document.write("假" + "
");
    }
script>
body>
html>

小结：非布尔类型的表达式

数据类型	为真	为假
number	非0	0
string	非空串	“”
undefined		为假
NaN(Not a Number)		为假
object	非空	null

流程控制：switch语句

目标

switch语句与Java的区别
window对象的方法

语法一：case后使用常量，与Java相同

如果变量名等于某个分支的常量值，就执行这个代码段。如果所有的条件都不满足就执行default代码。

switch(变量名) {
   case 常量值:
      break;
   case 常量值：
      break;
   default:
       break;
 }

语法二：case后使用表达式

switch后面一定要是真
每个条件都可以使用表达式
如果上面所有的表达式都不匹配，就执行default

switch(true) {  //这里的变量名写成true
   case 表达式:     //如：n > 5
     break;
   case 表达式:
     break;
   default:
     break;
 }

window对象的方法名	作用
string prompt(“提示信息”,"默认值”)	输入框，参数： 1. 输入的提示信息 2. 一开始出现在输入框中值返回值：就是用户输入的信息，字符串类型
alert(“提示信息”)	输出信息框

案例：判断一个学生的等级

通过prompt输入的分数，如果90_{100之间，输出优秀。80}90之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出:分数有误。

分析

使用prompt得到输入的分数
使用switch对分数进行判断
如果在90到100之间，则输出优秀，其它依次类推。

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>switch语句的使用title>
head>
<body>
<script type="text/javascript">
    /*
    通过prompt输入的分数，如果90~100之间，输出优秀。80~90之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出:分数有误。
     */
    //1. 让用户输入分数
    let score = window.prompt("请输入您的分数：","60");  //score是一个字符串类型
    //document.write(typeof(score) + "
");
    //2. 通过分数判断用户的等级
    switch (true) {
        //3. 输出用户的等级(比较运算符，会自动将字符串转成数值类型进行比较)
        case score >=90 && score <=100 :
            document.write("优秀" + "
");
            break;
        case score >=80 && score <90 :
            document.write("良好" + "
");
            break;
        case score >=60 && score <80 :
            document.write("及格" + "
");
            break;
        case score >=0 && score <60 :
            document.write("不及格" + "
");
            break;
        default:
            document.write("分数有误" + "
");
    }

script>
body>
html>

小结

如果switch的case后面要使用表达式，switch后面值要写成什么？ true

流程控制：循环语句

目标

使用循环实现9x9乘法表

while语句：

当指定的条件为 true 时循环执行代码，也支持非boolean类型的条件

while (条件表达式) {
     需要执行的代码;
}

do-while语句：

最少执行1次循环

do {
     需要执行的代码;
 }
 while (条件表达式)

for 语句

循环指定次数

for (var i=0; i<10; i++) {
     需要执行的代码;
 }

break和continue

break: 结束整个循环
continue：跳过本次循环，执行下一次循环

案例：乘法表

需求

以表格的方式输出乘法表，其中行数通过用户输入

分析

先制作一个没有表格，无需用户输入的9x9乘法表
由用户输入乘法表的行数
使用循环嵌套的方式，每个外循环是一行tr，每个内循环是一个td
输出每个单元格中的计算公式
给表格添加样式，设置内间距

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乘法表title>
    <style>
        table {
            /*使用细边框样式*/
            border-collapse: collapse;
        }

        td {
            /*设置每个单元格的内间距*/
            padding: 3px;
        }
    style>
head>
<body>
<script type="text/javascript">
    let num = prompt("请输入乘法表的数：","9");  //字符串类型
    //放在表格中
    document.write("");//如果字符串中有双引号，必须使用\"进行转义//固定的行和列：9for(let i =1; i <= num; i++){//外循环控制多少行
        document.write("");//表示一行for(let j =1; j <= i; j++){//内循环控制多少列
            document.write("");}//每输出一行就换行
        document.write("");}
    document.write("   
    
           
             ");
            document.write(j + "×" + i + "=" + (i * j));     //×表示乘法符号
            document.write("
        
        
    
");
script>
body>
html>

命名函数和匿名函数

目标

命名函数和匿名函数的使用

函数的概述

什么是函数

一个代码块，给代码块起个名字，以后可以通过名字来调用它，实现重用的功能。类似于Java中方法
两种函数：
- 命名函数：有名字的函数，可以通过名字来多次调用
- 匿名函数：没有名字的函数，不可重用，只能使用一次。但可以通过一个变量来指向它，实现重用。

命名函数的格式

function 函数名(参数列表) {
  //代码块
  return 返回值;  //可选：如果这个函数有返回值，使用return，没有就不使用
}

自定义函数

需求

定义一个函数实现加法功能

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的使用title>
head>
<body>
<script type="text/javascript">
    /*
    定义一个函数实现加法功能，参数列表不需要写var或let关键字
     */
    function sum(a,b) {
        return a + b;
    }

    //函数不调用不执行
    let c = sum(3, 5);
    document.write("计算结果是：" + c + "
");
script>
body>
html>

注意事项


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于函数的重载title>
head>
<body>
<script type="text/javascript">
    /*
    1. 在JS中没有函数的重载，后面出现的同名函数会覆盖前面的同名函数
    2. 实参个数与形参的个数无关，只会按函数名字去调用
    3. 在每个函数的内部都有一个隐藏的数组，名字叫arguments
     */
    //定义了一个函数
    function sum(a,b) {
        alert(2);
    }

    function sum(a) {
        alert(1);
    }

    function sum(a,b,c) {  //形参
        alert(3);
    }
    //调用
    sum(3, 5);  //实参
script>
body>
html>

案例：在函数内部输出隐藏数组的长度和元素

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏的数组title>
head>
<body>
<script type="text/javascript">
    /*
    在函数内部输出隐藏数组的长度和元素
     */
    function sum(a,b) {
        //输出隐藏数组的长度
        let length = arguments.length;
        document.write("隐藏数组的长度是：" + length + "
");
        //输出数组中每个元素，模板代码：itar
        for (let i = 0; i < arguments.length; i++) {
            document.write("i=" + i + "元素的值：" + arguments[i] + "
");
        }
        document.write("
");
        //输出形参的值
        document.write("a=" + a + "
");
        document.write("b=" + b + "
");
    }

    //调用函数
    //sum(3, 7, 1);  //实参 > 形参
    sum(3);   //实参 < 形参
script>
body>
html>

匿名函数

应用场景

后期很多的事件处理函数都使用匿名函数，一般不重用。
也可以定义一个变量让匿名函数可以重用，这种情况使用比较少。

语法

var 变量名 = function(参数列表) {
   //函数体
   return 返回值;  //可选
}

后期可以通过变量名来调用函数

函数调用代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匿名函数title>
head>
<body>
<script type="text/javascript">
    //定义匿名函数，赋值给一个变量
    var sum  = function(a,b) {
        return a + b;
    }

    //通过变量名来调用
    let c = sum(2, 7);
    document.write("计算结果：" + c + "
");
script>
body>
html>

小结

定义函数的关键字是什么？函数参数和返回值需要指定数据类型吗？
函数是否有重载？后面的同名函数会覆盖前面的
每个函数内部都有一个隐藏数组名是：arguments

案例：轮播图

目标

函数的应用
定时函数的使用

方法说明

方法	描述
document.getElementById(“id”)	作用：通过id获取网页上唯一的元素(标签) 参数：ID的值
window.setInterval(“函数名()”,时间) window.setInterval(函数名,时间)	作用：每隔一段时间调用一次指定的函数参数1：要调用的函数名参数2：隔多久调用，单位是毫秒

需求

每过3秒中切换一张图片的效果，一共5张图片，当显示到最后1张的时候，再次显示第1张。

步骤

创建HTML页面，页面有一个img标签，id为pic，宽度600。
body的背景色为黑色，内容居中。
五张图片的名字依次是0~4.jpg，放在项目的img文件夹下，图片一开始的src为第0张图片。
编写函数：changePicture()，使用setInterval()函数，每过3秒调用一次。
定义全局变量：num=1。
在changePicture()方法中，设置图片的src属性为img/num.jpg。
判断num是否等于5，如果等于5，则num=0；否则num++。

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图案例title>
    <style>
        body {
            background-color: black;
            text-align: center;
        }
    style>
head>
<body>
    <img src="img/0.jpg" width="800" id="game">
body>
<script type="text/javascript">
    //过2秒调用一次下面的图片
    window.setInterval("changePic()", 2000);

    let num = 1;

    /*
    创建一个函数：换图片
    技术点：修改img元素的src属性即可
     */
    function changePic() {
        //通过id得到一个元素，注：这个方法必须在网页已经加载完元素之后执行。要注意这个代码出现的位置
        let imgObj = document.getElementById("game");
        //alert(imgObj);
        //修改图片元素的src属性：对象名.属性名
        imgObj.src = "img/" + num + ".jpg";
        //文件名数字加1
        num++;
        //如果等于5，设置为0
        if (num == 5) {
            num = 0;
        }
    }

script>

html>

小结

方法	描述
document.getElementById(“id”)	通过id得到唯一的元素注：这个代码必须要在元素加载完毕以后执行
window.setInterval(“函数名()”,时间) window.setInterval(函数名,时间)	每隔一段时间调用一次指定的函数，单位是毫秒

设置事件的两种方式

目标

使用命名函数和匿名函数设置事件

什么是事件

用户在操作网页的过程中，会有各种操作，每种操作都会产生事件。我们可以通过JS来监听这些事件，对这些事件编写函数进行处理，来实现与用户的交互。

设置事件的两种方式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的处理方式title>
head>
<body>


<input type="button" value="命名函数" id="b1" onclick="clickMe()">
<input type="button" value="匿名函数" id="b2">

<script type="text/javascript">
    /*
    有两个按钮，点第1个弹出一个信息框，点第2个弹出另一个信息框。分别使用两种不同的方式激活事件
    1. 使用命名函数的处理方式：
       在标签上直接使用 on事件名="处理函数()"

    2. 使用匿名函数的处理方式：
        元素对象.on事件名 = function() {
        }
     */
    function clickMe() {
        alert("命名函数");
    }

    //得到按钮2这个对象
    document.getElementById("b2").onclick = function () {
        alert("匿名函数");
    }
script>
body>
html>

小结

事件处理中命名函数的写法

onclick = "函数名()"

function 函数名() {

}

事件处理中匿名函数的写法

元素对象.onclick = function() {
  
}

事件介绍：onload、onclick、ondblclick

目标

加载完毕事件
鼠标单击
鼠标双击

加载完成事件

事件名：onload
示例：页面加载完毕以后，才执行相应的JS代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的处理方式title>
head>
<body>

<script type="text/javascript">
    //让整个页面全部加载完毕以后执行
    window.onload = function() {
        //得到按钮2这个对象
        document.getElementById("b2").onclick = function () {
            alert("匿名函数");
        }
    }

script>


<input type="button" value="匿名函数" id="b2">
body>
html>

鼠标点击事件

点击：onclick
双击：ondblclick (double)

案例演示

需求：单击复制文本内容，双击清除文本内容

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单击和双击title>
    <style>
        input {
            /*外边距*/
            margin: 5px;
        }
    style>
head>
<body>
姓名：<input type="text" id="t1"/> <br/>
姓名：<input type="text" id="t2" /> <br/>
<input type="button" value="单击复制/双击清除" id="b1">

<script type="text/javascript">
    /*
    单击复制文本内容，双击清除文本内容
     */
    //得到按钮对象，设置单击事件
    document.getElementById("b1").onclick = function () {
        //复制文本：把t1的value属性值，赋值给t2的value
        document.getElementById("t2").value = document.getElementById("t1").value;
    }

    //得到按钮对象，设置双击事件
    document.getElementById("b1").ondblclick = function () {
        //将2个value都设置成空串
        document.getElementById("t1").value = "";
        document.getElementById("t2").value = "";
    }
script>
body>
html>

小结

加载完成事件名：onload
单击事件名：onclick
双击事件名：ondblclick

事件介绍：得到焦点、失去焦点、改变事件

目标

得到焦点
失去焦点
改变事件

事件名

什么是焦点：一个元素得到光标的操作状态，表示获得了焦点

得到焦点：onfcous
失去焦点：onblur (模糊)

焦点事件示例

当文本框失去焦点时，显示后面的文字，获得到焦点时，后面的文字消失

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点title>
head>
<body>
用户名：
<input type="text" id="user"> <span id="info" style="color: red">span>
<script type="text/javascript">
    /*
    当文本框失去焦点时，显示后面的文字，获得到焦点时，后面的文字消失
    如果span中有字，就会显示，没有字就不显示。
    修改span中文字内容，使用属性：innerText
     */
    //设置user对象获得焦点的事件
    document.getElementById("user").onfocus = function () {
        document.getElementById("info").innerText = "";
    }

    //设置user对象失去焦点的事件
    document.getElementById("user").onblur = function () {
        //span元素
        document.getElementById("info").innerText = "用户名不能为空";
    }
script>
body>
html>

改变事件示例

事件名：onchange

需求

选中不同的城市，出现一个信息框显示选中城市的值
用户输入英文字母以后，文本框的字母全部变成大写

效果

下拉列表select，它的选项option发生变化
文本框内容发生改变，也会激活这个事件，它是在失去焦点以后才会激活。

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变事件title>
head>
<body>
城市：
<select id="city">
    <option value="广州">广州option>
    <option value="上海">上海option>
    <option value="南京">南京option>
select>
<hr/>
英文：
<input type="text" id="eng">

<script type="text/javascript">
    /*
    选中不同的城市，出现一个信息框显示选中城市的值
    this对象表示当前激活的对象
     */
    document.getElementById("city").onchange=function () {
        //当前元素选中那一项的值
        alert(this.value);
    }

    //用户输入英文字母以后，文本框的字母全部变成大写
    document.getElementById("eng").onchange=function () {
        //得到当前元素中value值
        this.value = this.value.toUpperCase();   //转成大写的函数
    }
script>
body>
html>

小结

得到焦点事件名：onfocus
失去焦点事件名：onblur
改变事件事件名：onchange

上午回顾

流程控制语句

if的判断条件，可以是非boolean类型
  number: 非0为真，0为假
  string: 非空串为真，空串为假
  object: 非null为真，null为假
  undefined: 为假
  NaN：为假

switch(true) {
	case "条件表达式"
	break;
}

for(var i=0; i<10; i++) 

while(true) {

}

函数

命名函数

function 函数名(参数列表) {
	 return 返回值
}

匿名函数

var 变量=function(参数列表) {
   return 返回值;
}

没有函数的重载，同名的函数后面会覆盖前面，实参的个数与形参的个数无关
每个函数的内部都一个隐藏的数组：arguments

事件

单击：onclick
双击：ondblclick
加载完毕：onload
得到焦点：onfocus
失去焦点：onblur
改变事件：onchange

事件介绍：鼠标移入和移出

目标

鼠标移入
鼠标移出
this关键字

事件名

移入：onmouseover 当鼠标指针移到这个元素上面的时候，激活这个事件
移出：onmouseout 当鼠标指针移出这个元素的时候，激活这个事件

示例

需求：将鼠标移动到img上显示图片，移出则显示另一张图片。图片设置边框，宽500px

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移上和移出事件title>
head>
<body>


<img src="img/1.jpg" width="900" id="pic" onmouseout="changePic(this)">
<script type="text/javascript">
    /*
    将鼠标移动到img上显示图片，移出则显示另一张图片。图片设置边框，宽500px
    分析：如果要换图片，只要修改src属性即可
     */
    document.getElementById("pic").onmouseover = function () {
        //this代表当前被激活的元素
        this.src = "img/2.jpg";
    }

    /*document.getElementById("pic").onmouseout = function () {
        this.src = "img/0.jpg";
    }*/

    /**
     * obj相当于img对象
     */
    function changePic(obj) {
        obj.src = "img/3.jpg";
    }
script>
body>
html>

this关键字的作用

出现在元素的事件方法中：

<img src="img/1.jpg" width="900" id="pic" onmouseout="changePic(this)">

出现在匿名函数的代码中：

  document.getElementById("pic").onmouseout = function () {
    this.src = "img/0.jpg";
  }

小结

鼠标移入(上)：onmouseover
鼠标移出：onmouseout

JavaScript 对 CSS 样式进行操作

目标

JS操作CSS的两种方式

在JS中操作CSS属性命名上的区别

CSS中写法	JS中的写法	说明
color	color	样式名如果是一个单词是一样
font-size	fontSize	如果有多个单词，样式名中短横去掉，后面每个单词首字母大小

示例：点按钮，修改p标签的字体、颜色、大小

效果

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JS来修改css的样式title>
    <style>
        .hello {
            /*css样式：字体，颜色，大小*/
            font-family: "隶书";
            color: blue;
            font-size: 40px;
        }
    style>
head>
<body>
<p id="p1">第一自然段p>
<p id="p2">第二自然段p>
<hr/>
<input type="button" id="b1" value="改变几个样式">
<input type="button" id="b2" value="改变类样式">

<script type="text/javascript">
    /*
    在JS中修改CSS样式有2种方式：
    1. 每条语句修改1个样式，语法：
    元素.style.样式名 = 样式值;

    2. 先使用class定义类样式，然后再使用以下方法，一次修改一批样式：
    元素.className = 类名;
     */
    document.getElementById("b1").onclick = function () {
        //得到p1元素
        let p1 = document.getElementById("p1");
        //使用方式1来修改css样式：字体，颜色，大小
        p1.style.fontFamily = "楷体";
        p1.style.color = "red";
        p1.style.fontSize = "40px";
    }

    document.getElementById("b2").onclick = function () {
        //得到p2元素
        let p2 = document.getElementById("p2");
        //一次修改一批样式
        p2.className = "hello";
    }
script>
body>
html>

网页变化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GLHAgxJ4-1593131861874)(C:/Users/User/Desktop/学习笔记/web/webday03/day03(JavaScript基础)]/讲义/assets/image-20200413143054348.png)

小结

JS修改CSS样式的两种方式

元素.style.样式名=样式值
元素.className=类名

内置对象：字符串对象

目标

学习String对象常用的方法

创建字符串


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内置对象：字符串对象title>
head>
<body>
<script type="text/javascript">
    let a = 3;
    let b = 4;
    let c = a + b;
    //字符串的拼接操作
    let s1 = a + "+" + b + "=" + c;
    document.write(s1 + "
");
    //反引号：${} 占位符，会被真实的变量代替
    let s2 = `${a} + ${b} = ${c}`;
    document.write(s2 + "
");
script>
body>
html>

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>string对象的函数title>
head>
<body>
<script type="text/javascript">
    let s1 = "我是中国人，我爱我的国家";
    //取子字符串：开始位置，结束位置 (索引从0开始)，包头不包尾
    let s = s1.substring(6, 9);
    document.write(s + "
");

    //取子字符串：开始位置，取多长
    let s2 = s1.substr(6, 3);
    document.write(s2 + "
");

    //将这个字符使用指定的分隔符，分割成一个字符串数组
    let s3 = "a-b-c-xyz-hello";
    let arr = s3.split("-");
    for (let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "
");
    }

    document.write("
");
    //转成大写
    document.write("abc".toUpperCase() + "
");

    //转成小写
    document.write("XYZ".toLowerCase() + "
");

    //去掉字符串前后的空格
    let s4 = "   hello world      ";
    document.write("长度：" + s4.length + "
");  //原长度
    document.write(s4 + "
");   //原字符串
    document.write(s4.trim() + "
");  //去掉前后空格
    document.write("去掉空格长度：" + s4.trim().length + "
");  //去掉前后空格的长度
script>
body>
html>

小结

方法名	作用
substring(startIndex,endIndex)	取子字符串，包头不包尾，索引从0开始。参数是起始位置
substr(startIndex, length)	取子字符串，起始位置，长度
split(delimiter)	把一个字符串使用指定的分隔符，切割成一个数组
toLowerCase()	变成小写
toUpperCase()	变成大写
trim()	去掉前后的空格

内置对象：数学对象

目标

学习Math对象的方法

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内置对象：数学对象title>
head>
<body>
<script type="text/javascript">
    //四舍五入保留到整数
    let n1 = Math.round(123.5);
    document.write(n1 + "
");

    //向下取整
    let n2 = Math.floor(123.45);
    document.write(n2 + "
");

    //向上取整
    let n3 = Math.ceil(123.45);
    document.write(n3 + "
");

    //产生随机数，0~1之间的小数，不等于1  [0,1)
    let n4 = Math.random();
    document.write(n4 + "
");
script>
body>
html>

小结

方法名	作用
round(x)	四舍五入保留到整数
floor(x)	向下取整
ceil(x)	向上取整
random()	随机生成0~1之间的小数，不等于1

全局函数

目标

学习全局函数的使用

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局函数</title>
</head>
<body>
<script type="text/javascript">
    /*
    //计算2个数的和
    let n1 = prompt("请输入第1个数","0");
    let n2 = prompt("请输入第2个数","0");
    //拼接2个字符串
    let n3 = n1 + n2;
    document.write("它们的和是：" + n3 + "
");
     */

    /*
    将一个字符串转成整数，从一开始向后去查找，碰到第一个不能转换的就停止了
     */
    let n4 = parseInt("2") + parseInt("3");
    document.write(n4 + "
");

    document.write(parseInt("abc") + "
");  //NaN = Not a Number 不是一个数
    document.write(parseInt("12abc") + "
");  //12 转换成功

    //将一个字符串转成小数，转换方式同上
    let n5 = parseFloat("2.3") + parseFloat("3.1");
    document.write(n5 + "
");

    let order = "明天晚上偷袭珍珠港";
    document.write(order + "
");
    //对汉字使用URI编码进行转换
    let s1 = encodeURI(order);
    document.write(s1 + "
");

    //对已经编码的字符串进行解码
    let s2 = decodeURI(s1);
    document.write(s2 + "
");

    //执行字符串中js代码
    let s3 = "alert('Hello 你好！')";
    eval(s3);
</script>
</body>
</html>

小结

字符串转为数字	说明
parseInt(字符串)	转成整数，如果转换失败，返回NaN
parseFloat(字符串)	转成小数
isNaN(字符串)	在转换前判断是否为非数字，非数字返回true，数字为false

编码和解码	说明
encodeURI(字符串)	对汉字进行URI编码
decodeURI(字符串)	对URI编码后的

执行字符串	说明
eval(字符串)	执行脚本

内置对象：数组对象

目标

数组的创建的方式
数组中的方法

创建数组的四种方式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组title>
head>
<body>
<script type="text/javascript">
    //创建数组四种方式：
    let a1 = new Array();  //创建一个长度为0的数组
    document.write(a1.length + "
");

    let a2 = new Array(5);  //创建一个长度为5的数组
    document.write(a2.length + "
");
    document.write(a2 + "
");

    let a3 = new Array(2, 5, 6, 8);  //指定每个元素，创建数组
    document.write(a3.length + "
");
    document.write(a3 + "
");

    let a4 = [4, 7, 10, 45];   //使用中括号创建数组，指定每个元素
    document.write(a4 + "
");
script>
body>
html>

数组的特点


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组title>
head>
<body>
<script type="text/javascript">
    //创建数组四种方式：
    let a1 = new Array();  //创建一个长度为0的数组
    document.write(a1.length + "
");

    let a2 = new Array(5);  //创建一个长度为5的数组
    document.write(a2.length + "
");
    document.write(a2 + "
");

    let a3 = new Array(2, 5, 6, 8);  //指定每个元素，创建数组
    document.write(a3.length + "
");
    document.write(a3 + "
");

    let a4 = [4, 7, 10, 45];   //使用中括号创建数组，指定每个元素
    document.write(a4 + "
");

    /*
    1. 元素类型：因为JS是弱类型，数组中每个元素类型是可以不同的
    2. 长度是可变的，动态的增加或减少长度
    3. 数组中还有不少方法
     */
    let a5 = ["abc", true, 50, 3.6];
    document.write(a5 + "
");
    a5[5] = "xyz";  //增加长度

    //循环输出每个元素
    for (let i = 0; i < a5.length; i++) {
        document.write(a5[i] + "
");
    }

    document.write("
");
    a5.length = 2;  //长度变成2
    for (let i = 0; i < a5.length; i++) {
        document.write(a5[i] + "
");
    }
script>
body>
html>

方法演示案例

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组的方法title>
head>
<body>
<script type="text/javascript">
    //两个或两个以上数组的拼接
    let a1 = [1, 1, 1];
    let a2 = [2, 2, 2];
    let a3 = a1.concat(a2, 99);
    document.write(a3 + "
");

    //对数组反转
    let a4 = [4, 1, 8, 9];
    a4.reverse();
    document.write(a4 + "
");

    //将一个数组通过分隔符拼接成一个字符串，与字符串中split函数功能相反
    let a5 = [4, 1, 8, 9];
    let str = a5.join("=");   //这是一个字符串
    document.write(str + "
");

    /*
    对字符串进行排序
    1. 按字符的ASCII码值进行比较
    2. 两个字符串比较，先比较第1个，如果谁大谁就大，后面不再比较。如果相同则继续比较第2个。
    3. 小写字母 > 大写字母 > 数字
    如：
     */
    document.write(("ac" > "abcdefgh") + "
");
    document.write(("x" > "ABCDE") + "
");

    //默认按字符串排序
    let strArr = ["Jack", "tom","Newboy", "rose"];
    document.write("排序前：" + strArr + "
");
    strArr.sort();
    document.write("排序后：" + strArr + "
");

    let a6 = [40, 100, 28, 9];   //默认是按字符的大小来排序
    document.write("排序前：" + a6 + "
");
    a6.sort(function (a, b) {
        return a - b;
    });  //如果按数字排序，指定比较器
    document.write("排序后：" + a6 + "
");

    //删除数组中最后一个元素
    let a7 = [2, 6, 7];
    a7.pop();  //返回最后这个元素
    document.write(a7 + "
");

    //向数组最后添加一个或多个元素
    a7.push(4, 90);
    document.write(a7 + "
");
script>
body>
html>

小结

方法名	功能
concat()	拼接数组
reverse()	反转
join(separator)	将数组接拼接成一个字符串
sort()	排序
pop()	删除最后一个元素
push()	添加元素

内置对象：日期对象

目标

日期对象方法的使用

创建日期对象

new Date() 创建当前时间的日期对象

日期对象的方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yWksS4fk-1593131861882)(C:/Users/User/Desktop/学习笔记/web/webday03/day03(JavaScript基础)]/讲义/assets/1552052803821.png)

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期对象title>
head>
<body>
<script type="text/javascript">
    let date = new Date();
    document.write("现在的时间是：" + date + "
");
    document.write("年份：" + date.getFullYear() + "
");
    //0-6: 0表示周日，1~6表示周一到周六
    document.write("周几：" + date.getDay() + "
");
    //得到1970-1-1到现在相差的毫秒数
    document.write("毫秒数：" + date.getTime() + "
");
    //得到本地格式的时间，类似于Java中：SimpleDateFormat
    document.write(date.toLocaleString() + "
");
script>
body>
html>

小结

说说下面方法的作用

getFullYear()：年份
getDay()：周几
getTime()：得到1970-1-1到现在的毫秒数
toLocaleString() ：本地格式的日期

学习总结

能够在 JS 中定义命名函数和匿名函数

function 函数名(参数列表) {
   return 返回值;
}

var 变量名=function(参数列表) {
   return 返回值;
}

元素.onclick = function() {

}

能够使用JS中常用的事件

事件名	作用
onclick	单击
ondblclick	双击
onload	加载完毕
onfocus	得到焦点
onblur	失去焦点
onchange	改变事件
onmouseover	鼠标移上
onmouseout	鼠标移出

能够使用 JavaScript 对 CSS 样式进行操作

元素.style.样式名=样式值

元素.className=类名

字符串对象的方法

方法名	作用
substring(startIndex,endIndex)	包头不包尾
split(delimiter)	切割字符串
toLowerCase()	转成小写
toUpperCase()	转成大写
trim()	去掉前后空格

全局函数

字符串转为数字	说明
parseInt(字符串)	转成整数
parseFloat(字符串)	转成小数
isNaN(字符串)	判断非数字

编码和解码	说明
encodeURI(字符串)	URI编码
decodeURI(字符串)	URI解码

执行字符串	说明
eval(字符串)	执行字符串中JS代码

能够使用数组中常用的方法

方法名	功能
concat()	拼接数组
reverse()	反转
join(separator)	将数组拼接成一个字符串
sort()	排序，默认按字符串大小
pop()	删除
push()	添加

能够使用日期对象常用的方法

方法名	作用
getFullYear()	得到年份
getDay()	得到周几
getTime()	得到毫秒数
toLocaleString()	转成本地的时间

《JavaScript高级-笔记》

回顾

能够在 JS 中定义命名函数和匿名函数

function 函数名(参数列表) {
   return 返回值
}

元素.onclick = function() {

}

能够使用JS中常用的事件

事件名	作用
onclick	单击
ondblclick	双击
onload	加载完毕
onfocus	获得焦点
onblur	失去焦点
onchange	改变事件
onmouseover	鼠标移上
onmouseout	鼠标移出

能够使用 JavaScript 对 CSS 样式进行操作

元素.style.样式名=样式值
元素.className=类名

字符串对象的方法

方法名	作用
substring(startIndex,endIndex)	取子字符串，包头不包尾
split(delimiter)	切割，将字符串切割成一个数组
toLowerCase()	转成小写
toUpperCase()	转成大写
trim()	去掉前后的空格

全局函数

字符串转为数字	说明
parseInt(字符串)	转成整数
parseFloat(字符串)	转成浮点数
isNaN(字符串)	是否非数字，非数字返回真

编码和解码	说明
encodeURI(字符串)	URI编码
decodeURI(字符串)	URI解码

执行字符串	说明
eval(字符串)	执行JS中代码

能够使用数组中常用的方法

方法名	功能
concat()	拼接数组
reverse()	反转
join(separator)	把数组拼接成一个字符串
sort()	排序，默认按字符串
pop()	删除
push()	添加

能够使用日期对象常用的方法

方法名	作用
getFullYear()	得到年份
getDay()	周几：0~6
getTime()	得到毫秒数
toLocaleString()	转成本地格式的日期

学习目标

能够掌握 json 的三种数据格式
BOM
1. 能够使用 window 对象常用的方法
2. 能够使用 location 对象常用的方法和属性
3. 能够使用 history 对象常用的方法
DOM
1. 能够使用 DOM 中来查找节点
2. 能够使用 DOM 来增删改节点
能够使用正则表达式进行表单的验证

学习内容

JSON的格式介绍

目标

什么是JSON
典型的格式有哪些

什么是json

JSON(JavaScript Object Notation, JavaScript对象标记)，是一种轻量级的数据交换格式，用于服务器与浏览器之间传输数据。以前我们都是使用XML来传递数据。

XML不足

描述的数据比需要的真实数据多
占用了更多的传输的带宽
解析XML比较麻烦

<contact>
	<name>貂蝉name>
	<gender>falsegender>
	<age>20age>
contact>

json

{
  name: "貂蝉",
  gender: false,
  age: 20
}

json的语法格式

类型	语法	解释
对象类型	{键:值, 键:值}	代表一个对象，可以有多个属性属性与值之间使用冒号，属性与属性之间使用逗号
数组/集合类型	[元素,元素,元素]	数组中每个元素类型是可以不同
混合类型	[{键:值},{键:值},{键:值}]	数组中每个元素是一个对象
	{键:[元素,元素,元素]}	是一个对象，但某个属性是一个数组或集合

练习1：创建一个JSON对象类型

创建这种格式的：{name:value,name:value…} 对象
创建一个person对象的JSON对象，属性名：firstname、lastname、age给三个属性赋值
输出每个属性的值。

练习2：创建一个数组，其中每个元素是JSON对象

创建这种格式的：[{key:value,key:value},{key:value,key:value}]
创建一个数组，包含三个JSON对象
每个JSON对象都有三个属性：firstname、lastname、age。给每个对象的属性赋不同的值
遍历输出每个JSON对象的属性值

练习3：创建一个JSON对象

要求

某个属性值是一个数组，数组中每个元素是JSON对象

步骤

创建这种格式的对象：{“param”:[{key:value,key:value},{key:value,key:value}]}
一个JSON对象，有一个brothers属性，属性值是一个数组
数组中的每个元素是一个JSON对象，属性名为：firstname,lastname,age。
数组中一共4个元素，给每个元素赋值
得到JSON对象的brothers属性，返回一个数组，对数组进行遍历输出每个元素中的firstname和age属性值

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-daiTy1aX-1593131861886)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/image-20200414093716240.png)]

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON数据格式title>
head>
<body>
<h2>JSON对象h2>
<script type="text/javascript">
    //一个person对象的JSON对象，属性名：firstname、lastname、age给三个属性赋值
    let person = {
        firstname: "孙悟空",
        lastname: "弼马温",
        age: 30
    };
    //输出对象：对象名.属性名
    document.write("姓名：" + person.firstname + "，昵称：" + person.lastname + "，年龄：" + person.age + "
");
script>
<hr/>

<h2>创建一个数组，其中每个元素是JSON对象h2>
<script type="text/javascript">
    let arr = [{
        firstname: "孙悟空",
        lastname: "弼马温",
        age: 30
    }, {
        firstname: "猪八戒",
        lastname: "天蓬元帅",
        age: 28
    }, {
        firstname: "沙悟静",
        lastname: "卷帘大将",
        age: 26
    }];
    //遍历输出每个JSON对象的属性值
    /*
    Java中写法：
    for(类型 变量名: 集合)

    JavaScript中写法：
    for(类型 变量名 of 集合)
     */
    for (let p of arr) {  //p表示集合或数组中每个元素
        document.write("姓名：" + p.firstname + "，昵称：" + p.lastname + "，年龄：" + p.age + "
");
    }
script>
<hr/>

<h2>JSON对象,其中属性是集合h2>
<script type="text/javascript">
     let master = {
         name: "唐僧",
         age: 20,
         brothers: [{
             firstname: "孙悟空",
             lastname: "弼马温",
             age: 30
         }, {
             firstname: "猪八戒",
             lastname: "天蓬元帅",
             age: 28
         }, {
             firstname: "沙悟静",
             lastname: "卷帘大将",
             age: 26
         }]
     };

     document.write("姓名：" + master.name + "，年龄：" + master.age + "
");
     document.write("徒弟们：" + "
");
     //快捷键：iter
     for (let p of master.brothers) {
         document.write("姓名：" + p.firstname + "，昵称：" + p.lastname + "，年龄：" + p.age + "
");
     }
script>
body>
html>

小结

JSON三种常用的格式：

对象：{属性名:值}
数组：[元素,元素]
混合：[{},{}]  {属性:[]}

JS中操作JSON的方法

目标

JS中与JSON有关的方法

语法

语法	功能
JSON.parse(字符串)	将一个字符串转成JSON对象注：JSON字符串中属性名一定要使用双引号引起来
JSON.stringify(JSON对象)	将一个JSON对象转成字符串

案例：parse方法的使用

需求

创建一个字符串：’{“name”: “张三”, “age”: 20}’，使用上面的方法转成JSON对象
再使用上面的方法，转回成字符串

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BVTzz2ti-1593131861891)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/image-20200414094549706.png)]

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON有关的函数title>
head>
<body>
<script type="text/javascript">
    //定义一个字符串，属性名一定是双引号
    let person = '{"name": "张三", "age": 20}';
    document.write("字符串：" + person + "
");

    //把字符串转成JSON对象
    let obj = JSON.parse(person);
    document.write("对象：" + obj + "
");
    document.write("姓名：" + obj.name + "，年龄：" + obj.age + "
");

    //把JSON对象转成字符串
    let str = JSON.stringify(obj);
    document.write("字符串：" + str + "
");
script>
body>
html>

小结

语法	功能
JSON.parse(字符串)	将字符串转成JSON对象
JSON.stringify(JSON对象)	将JSON对象转成字符串

BOM：location对象

目标

什么是BOM编程
location对象的方法和属性

什么是BOM

JavaScript有三个组成：

ECMA Script
BOM：Browser Object Model 浏览器对象模型，用来操作浏览器中各种对象
DOM

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6yIRhbWQ-1593131861893)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/1552052941943.png)]

BOM对象

windows对象


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window中的方法title>
head>
<body>
<script type="text/javascript">
    /**
     * 出现一个确定框，有2个按钮
     * 点确定，返回true，否则返回false
     */
    let con = window.confirm("你是女生吗");
    //document.write(con + "
");
    if (con) {
        document.write("约吗?" + "
");
    }
    else {
        document.write("捡肥皂" + "
");
    }
script>
body>
html>

BOM常用对象	作用
window	浏览器窗口，已经学过的方法： prompt(), alert(), setInterval() confirm() 确定框，有2个选择按钮(确定，取消)
location	代表浏览器的地址栏
history	浏览的历史记录

location对象

作用：代表浏览器上地址栏对象，主要用于页面的跳转

属性	功能
href	1. 获取属性值，得到当前访问的地址 2. 设置属性值，跳转到指定的页面
search	获取?后面的参数字符串 GET方法提交表单的时候，参数会显示在地址栏上

location常用方法

location的方法	描述
reload()	重载加载当前的页面，类似于刷新

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM：location对象title>
head>
<body>


<input type="button" onclick="location.reload()" value="刷新">

<script type="text/javascript">
    //1. 获取属性值，得到当前访问的地址
    //document.write(location.href + "
");
    //2. 设置属性值，跳转到指定的页面
    //location.href = "http://www.itcast.cn";

    //获取?后面的参数字符串
    //document.write(location.search + "
");

    //显示现在的时候
    document.write(new Date().toLocaleString() + "
");
script>
body>
html>

与window对象关系

location对象是window对象的一个属性，完整写法：window.location
location对象默认的属性是href

小结

location学习了哪些属性？
1. href 进行页面跳转
2. search 获取?后面的参数字符串
学习了哪些方法
1. reload 重新加载页面
它与window是什么关系?
1. 是window的一个属性

BOM：history对象

目标

history对象有哪些方法

作用

访问历史记录中页面

方法	作用
forward()	相当于浏览器上前进按钮，如果浏览器上前进按钮不可用，这个方法也不起作用
back()	相当于浏览器上后退按钮
go(正数或负数)	go(1)相当于前进，go(-1)相当于后退

注：浏览器上的前进和后退按钮可以点的时候，这个代码才起作用。

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM：历史记录对象title>
head>
<body>
<a href="demo04_location.html">跳转到demo04a>

<input type="button" value="前进" onclick="history.forward()">
<input type="button" value="前进" onclick="history.go(1)">
body>
html>

小结

方法	作用
forward()	前进
back()	后退
go()	既可以前进，又可以后退

案例：倒计时页面跳转

目标

window对象与location对象的综合案例应用

window中计时器有关的方法

window中的方法	作用
setTimeout(函数名, 间隔毫秒数)	过一段时间后调用一次指定的函数，单位是毫秒，只调用一次。返回值是一个整数类型，这就是计时器
clearTimeout(计时器)	清除上面的计时器，参数的计时器就是上面方法的返回值
setInterval(函数名, 间隔毫秒数)	每隔一段时间调用一次指定的函数，单位是毫秒，不停的调用。返回值是一个整数类型，这就是计时器
clearInterval(计时器)	清除上面的计时器，参数的计时器就是上面方法的返回值

需求

页面上显示一个倒计时5秒的数字，到了5秒以后跳转到另一个页面

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IhZBOOXD-1593131861897)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/1552053355566.png)]

分析

在页面上创建一个span用于放置变化的数字。
定义一个全局变量为5，每过1秒调用1次自定义refresh()函数
编写refresh()函数，修改span中的数字
判断变量是否为0，如果是0则跳转到新的页面
否则变量减1。并修改span中的数字

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳转title>
head>
<body>
<span id="counter">5span>秒以后跳转
<script type="text/javascript">
    /*
    分析：
    1.用到倒计时：window.setInterval()
    2.页面跳转：location.href
    3.修改标签中文字使用属性：innerText
    */
    let count = 5;

    setInterval("countDown()", 1000);  //每过1秒调用一次

    //调用的函数
    function countDown() {
        //1.将数字减1
        count--;
        //2.更新span中数字
        document.getElementById("counter").innerText = count;
        //3.判断数字是否为0
        if (count == 0) {
            //4.如果为0就进行页面跳转
            location.href = "http://www.itcast.cn";
        }
    }

script>
body>
html>

小结

每过一段时间执行的方法是：setInterval()
跳转到另一个页面使用：location.href
更新数字显示使用：innerText

案例：会动的时钟

目标

页面上有两个按钮，一个开始按钮，一个暂停按钮。点开始按钮时间开始走动，点暂停按钮，时间不动。再点开始按钮，时间继续走动。

步骤

在页面上创建一个h1标签，用于显示时钟，设置颜色和大小。
一开始暂停按钮不可用，设置disabled属性，disabled=true表示不可用。
创建全局的变量，用于保存计时器
为了防止多次点开始按钮出现bug，点开始按钮以后开始按钮不可用，暂停按钮可用。点暂停按钮以后，暂停按钮不可用，开始按钮可用。设置disabled=true。
点开始按钮，在方法内部每过1秒中调用匿名函数，在匿名函数内部得到现在的时间，并将得到的时间显示在h1标签内部。
暂停的按钮在方法内部清除clearInterval()的计时器。

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会动的时钟title>
head>
<body>
<input type="button" value="开始" id="btnBegin">

<input type="button" value="暂停" id="btnPause" disabled="disabled">
<hr/>

<h1 id="clock" style="color: darkgreen">h1>

<script type="text/javascript">

    let timer;  //计时器

    //开始按钮的点击事件
    document.getElementById("btnBegin").onclick = function() {
        timer = setInterval("showTime()", 1000);  //每过1秒调用1次
        //修改disabled的属性为true，表示不可用，false表示可用
        //让开始按钮不可用，让暂停按钮可用
        document.getElementById("btnBegin").disabled = true;
        document.getElementById("btnPause").disabled = false;
    }

    //暂停按钮的点击事件
    document.getElementById("btnPause").onclick=function () {
        document.getElementById("btnBegin").disabled = false;  //开始按钮可用
        document.getElementById("btnPause").disabled = true;   //暂停按钮不可用
        //让计时器失效
        clearInterval(timer);   //计时器是setInterval()的返回值
    }

    /**
     * 分析：
     * 每过1秒钟输出现在的时间
     * 不能使用document.write方法
     * 应该放在一个标签内部，修改标签内部的内容，使用innerText或innerHTML
     */
    function showTime() {
        //得到现在的时间
        let now = new Date().toLocaleString();
        //在有些浏览器上，会覆盖整个网页，导致这些脚本都没有了
        //document.write(now);
        //在h1中显示时间
        document.getElementById("clock").innerText = now;
    }
script>
body>
html>

小结

清除计时器的方法：clearInterval()
让元素不可用的属性是：disabled

innerHTML和innerText的区别


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerText和innerHTML的区别title>
head>
<body>
<input type="button" value="改内容" id="btn">
<hr/>
<span id="content">span>

<script type="text/javascript">
     document.getElementById("btn").onclick = function () {
         //innerText：修改是纯文本的内容，如果内容中有标签，标签是不起作用
         //document.getElementById("content").innerText = "幸福来敲门
";
         //innerHTML：修改是HTML的内容，标签是起作用
         document.getElementById("content").innerHTML = "幸福来敲门
";
     }
script>
body>
html>

DOM查找元素的方法

目标

什么是DOM编程
通过案例：学习DOM查找元素的方法

节点与DOM树

DOM: Document Object Model 文档对象模型

作用：操作网页中各种元素，可能通过修改DOM树来实现修改网页结构的目的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9X3HIPsL-1593131861905)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/1552054005396.png)]

查找节点的方法

获取元素的方法	作用
document.getElementById(“id”)	通过id得到一个元素
document.getElementsByTagName (“标签名”)	通过标签名得到一组元素
document.getElementsByName(“name”)	通过name属性得到一组元素
document.getElementsByClassName(“类名”)	通过类名得到一组元素

根据CSS选择器获取元素	作用
document.querySelector(CSS选择器)	通过css选择器获取一个元素，如："#id" “.类名” “标签名”
document.querySelectorAll(CSS选择器)	通过css选择器获取一组元素

案例：查找节点

步骤

点第1个按钮，给所有tr奇数行和偶数行添加不同的背景色
点击第2个按钮，选中所有商品
点击第3个按钮给所有的a链接添加href属性。

效果

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM：查找元素的方法title>
    <style>
        table {
            /*细边框样式*/
            border-collapse: collapse;
            width: 500px;
        }
    style>
head>
<body>
<input type="button" value="(通过标签名)给表格奇偶行添加不同的背景色" id="b1">
<hr/>
<table border="1">
    <tr>
        <td>100td>
        <td>100td>
        <td>100td>
    tr>
    <tr>
        <td>100td>
        <td>100td>
        <td>100td>
    tr>
    <tr>
        <td>100td>
        <td>100td>
        <td>100td>
    tr>
    <tr>
        <td>100td>
        <td>100td>
        <td>100td>
    tr>
    <tr>
        <td>100td>
        <td>100td>
        <td>100td>
    tr>
table>

<script type="text/javascript">
    //0.按钮的点击事件
    document.getElementById("b1").onclick=function () {
        //1.获取所有的tr
        //let trs = document.getElementsByTagName("tr");   //传统的写法
        let trs = document.querySelectorAll("tr");   //新的写法, css的标签选择器
        //2.遍历tr集合，判断是奇数还是偶数，遍历快捷键：itar, iter
        for (let i = 0; i < trs.length; i++) {
            let tr = trs[i];  //得到每个tr
            //3.设置不同的背景色
            if (i % 2 == 0) {  //偶数
                tr.style.backgroundColor = "lightgreen";
            }
            else {  //奇数
                tr.style.backgroundColor = "lightyellow";
            }
        }
    }
script>

<hr/>
<input type="button" value="(通过name属性)选中所有的商品" id="b2"/>
<hr/>

<input type="checkbox" name="product">自行车
<input type="checkbox" name="product">电视机
<input type="checkbox" name="product">洗衣机

<script type="text/javascript">
    //通过css的#id选择器来选中元素
    document.querySelector("#b2").onclick=function () {
        //1.得到所有的复选框
        let products = document.getElementsByName("product");
        //2.遍历集合，将每一项checked=true
        for (let product of products) {  //每个元素是一个checkbox
            product.checked = true;
        }
    }
script>
<hr/>

<input type="button" value="(通过类名)给a添加链接" id="b3"/>
<hr/>
<a class="company">传智播客a>
<a class="company">传智播客a>
<a class="company">传智播客a>

<script type="text/javascript">
    document.getElementById("b3").onclick=function () {
        //1.通过类名得到所有的a标签
        let companies = document.getElementsByClassName("company");
        //2.遍历集合，给每个a标签添加href属性
        for (let company of companies) {
            company.href = "http://www.itcast.cn";
        }
    }
script>
body>
html>

小结

获取元素的方法	作用
document.getElementsByTagName (“标签名”)	通过标签名得到一组元素
document.getElementsByName(“name”)	通过name属性得到一组元素
document.getElementsByClassName(“类名”)	通过类名得到一组元素

根据CSS选择器获取元素	作用
document.querySelector(CSS选择器)	通过css选择器，获取一个元素
document.querySelectorAll(CSS选择器)	通过css选择器，获取一组元素

上午的回顾

JSON的格式

JSON对象：{属性名:值,属性名:值}
数组或集合：[元素,元素]
混合类型：[{},{},{}]   {键:[元素,元素]}

JSON的方法

JSON.parse(): 将字符串转成JSON对象
JSON.stringfy(): 将JSON对象转成字符串

BOM：window对象

prompt() 输入
alert() 信息框
confirm() 确认框
setInterval() / clearInterval()
setTimeout() / clearTimeout()

BOM：location对象

href：页面跳转
search: 得到?后参数字符串

reload() 重新加载当前页面

BOM：history对象

forward() 前进
back() 后退
go() 既可以前进，又可以后退

innerHTML和innerText的区别

innerHTML: 标签体内的子标签是起作用的
innerText：标签体内的文字是纯文本

DOM查找元素的方法

getElementById() 通过id得到一个元素
getElementsByTagName() 通过标签名得到一组元素
getElementsByName() 通过name属性得到一组元素
getElementsByClassName() 通过类名得到一组元素
querySelector() 通过CSS选择器得到一个元素
querySelectorAll() 通过CSS选择器得到一组元素

DOM树修改的方法

目标

DOM树上如何创建节点
DOM树上如何添加元素节点
删除DOM树上的元素

添加元素的步骤

创建元素，只是在内存中创建了
将元素添加到DOM树上

创建元素的方法

创建元素的方法	作用
document.createElement(“标签名”)	创建一个元素

修改DOM树的方法

将元素挂到DOM树上的方法	作用
父元素.appendChild(子元素)	将元素追加成最后一个子元素
父元素.removeChild(子元素)	通过父元素删除子元素(他杀)
元素.remove()	删除自己(自杀)

小结

创建元素：document.createElement()
添加成最后一个子元素：父元素.appendChild(子元素)
删除子元素：父元素.removeChild(子元素)
删除本身：元素.remove()

案例：省市级联

案例需求

页面上有两个下拉列表框，页面加载的时候访问数据库，得到所有的省份显示在第1个列表框中。当选择不同的省份的时候，加载这个省份下所有的城市显示在第二个下拉列表中。

案例效果

实现步骤

创建两个下拉列表，一个显示省份，一个显示城市
注册网页加载事件：在网页加载完毕只会显示省份信息
给省份下拉列表注册值改变事件：在省份发生变化时更新城市下拉列表信息

示例代码


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>省市联动title>
head>
<body>
<select id="province">
    <option>--请选择省份--option>
select>
<select id="city">
    <option>--请选择城市--option>
select>
body>

<script>
    // 省份数据
    var provinces= ["广东省","湖南省","广西省"];
    // 城市数据，数据是一个二维数组，一维中每个元素是一个数组
    var cities = [["深圳","广州","东莞"],["长沙市","郴州市","湘潭市"],["南宁市","桂林市","柳州市"]];

    /*
    在页面加载完毕以后读取所有的省份，并且填充到#province中
    分析：动态创建option对象，并且设置  这个value就是它对应的城市数组索引
     */
    window.onload = function () {
        //1.得到省份这个select对象
        let selectProvince = document.getElementById("province");
        //遍历省份这个数组
        for (let i = 0; i < provinces.length; i++) {
            let province = provinces[i];  //i=0  province=广东省
            //2.创建option对象
            let optionElement = document.createElement("option");
            //3.设置value和文本
            optionElement.value = i;
            optionElement.innerText = province;
            //4.添加到select的最后一个子元素: 父元素.appendChild(子元素)
            selectProvince.appendChild(optionElement);
        }
    }

    /**
     * 省份下拉列表的改变事件
     */
    document.getElementById("province").onchange = function () {
        //alert(this.value);  //value就是它的索引
        var arr = cities[this.value];  //得到相应城市的数组
        //得到城市下拉select对象
        let city = document.getElementById("city");  //city下拉列表对象
        //修改city中innerHTML
        city.innerHTML = "";  //覆盖原来的HTML子元素
        //向城市下拉列表添加option
        //1. 遍历城市数组
        for (let i = 0; i < arr.length; i++) {
            let arrElement = arr[i];  //每个城市字符串
            //2. 创建option对象 
            let optionElement = document.createElement("option");
            //3. 设置文本
            optionElement.innerText = arrElement;
            //4. 添加到select的最后一个子元素: 父元素.appendChild(子元素)
            city.appendChild(optionElement);
        }
    }
script>
html>

小结

正则表达式的规则

目标

了解正则表达式的规则

引入

提问：如果要验证一个手机号码，我们以前应该如何写代码？

判断是否全是数字，isNaN
长度要是11个字符
必须以1开头，第2个数字是345789，后面的数字随意

正则表达式作用

用于校验一个字符串是否匹配规则
查找字符

回顾正则表达式的规则

符号	作用
[a-z]	中括号表示1个字符，a-z中任意一个字符
[xyz]	x或y或z，三个字符一个
[^xyz]	除了xyz之外的任意字符
\d	数字
\w	单词，相当于[a-zA-Z0-9_]
.	任意字符，如果要匹配点号需要转义 \.
()	分组
{n}	前面的字符出现n次
{n,}	前面的字符出现大于等于n次
{n,m}	前面的字符出现n次到m之间的次数，包头包尾
+	前面的字符出现1~n次
*	前面的字符出现0~n次
?	前面的字符出现0~1次
\|	多组字符串选择1个
^	匹配开头
$	匹配结尾

小结

正则表达式主要有哪两个作用？

1. 判断字符串是否匹配
2. 查找字符串

使用正则表达式

目标

创建正则表达式有哪2种方式

演示代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式title>
head>
<body>
<script type="text/javascript">
    /**
     * 创建正则表达式的2种方式：
     * 1. new RegExp("正则表达式")
     * 2. /正则表达式/
     *
     * 判断正则表达式是否匹配字符串的方法：
     * boolean 正则表达式对象.test(字符串) 如果匹配返回true，否则返回false
     * 与Java不同，Java默认是精确匹配。JS默认是模糊匹配，只要包含这个正则表达式的内容就可以
     * 结论：如果要在JS中精确匹配，必须以^开头，以$结尾
     */
    var reg = new RegExp("\\d{3}");
    document.write(reg.test("123") + "
");  //true
    document.write(reg.test("abc") + "
");  //false
    document.write(reg.test("a123b") + "
");  //true
    document.write("
");

    var reg = new RegExp("^\\d{3}");  //匹配3个数字开头
    document.write(reg.test("a123b") + "
");  //false
    document.write(reg.test("123b") + "
");  //true

    document.write("
");
    var reg = new RegExp("\\d{3}$");  //匹配3个数字结尾
    document.write(reg.test("a123") + "
");  //true

    document.write("
");
    var reg = new RegExp("^\\d{3}$");  //精确匹配，必须匹配3个数字
    document.write(reg.test("123abc123") + "
");  //false
    document.write(reg.test("456") + "
");  //true

    /*
    使用第2种写法
     */
    var reg = /^\d{3}$/;
    document.write(reg.test("456") + "
");  //true
script>
body>
html>

两种方式的区别

方式一：正则表达式是做为字符串参数出现的，可以定义成变量，可以进行字符串拼接，相对更加灵活。但\等字符需要转义。
方式二：本身是一个正则表达式对象，\等字符不需要转义。

匹配模式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式匹配模式title>
head>
<body>
<script type="text/javascript">
    /*
    i 忽略大小写比较
    1. new RegExp("正则表达式","匹配模式")
    2. /正则表达式/匹配模式
     */
    var reg = new RegExp("cat","i");
    document.write(reg.test("cat") + "
");  //true
    document.write(reg.test("CAT") + "
");  //true
    document.write("
");

    var reg = /cat/i;
    document.write(reg.test("cat") + "
");  //true
    document.write(reg.test("CAT") + "
");  //true
script>
body>
html>

小结

判断正则表达式与字符串是否匹配的方法是？

boolean 正则表达式对象.test(字符串)
如果匹配返回true

案例：校验注册表单

目标

onsubmit事件说明

 onsubmit事件，如果return false就可以阻止表单提交

案例需求

用户注册，需要进行如下验证，请在JS中使用正则表达式进行验证。

用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
密码：大小写字母和数字6-20个字符
确认密码：两次密码要相同
电子邮箱: 符合邮箱地址的格式 /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/
手机号：/^1[3456789]\d{9}$/
生日：生日的年份在1900～2009之间，生日格式为1980-5-12或1988-05-04的形式，/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/

案例分析

创建正则表达式
得到文本框中输入的值
如果不匹配，在后面的span中显示错误信息，返回false
如果匹配，在后面的span中显示一个打勾图片，返回true
写一个验证表单中所有的项的方法，所有的方法都返回true，这个方法才返回true.

代码


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>验证注册页面title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font-size: 12px;
            line-height: 20px;
        }

        .main {
            width: 525px;
            margin-left: auto;
            margin-right: auto;
        }

        .hr_1 {
            font-size: 14px;
            font-weight: bold;
            color: #3275c3;
            height: 35px;
            border-bottom-width: 2px;
            border-bottom-style: solid;
            border-bottom-color: #3275c3;
            vertical-align: bottom;
            padding-left: 12px;
        }

        .left {
            text-align: right;
            width: 80px;
            height: 25px;
            padding-right: 5px;
        }

        .center {
            width: 280px;
        }

        .in {
            width: 130px;
            height: 16px;
            border: solid 1px #79abea;
        }

        .red {
            color: #cc0000;
            font-weight: bold;
        }

        div {
            color: #F00;
        }

        span {
            color: red;
        }
    style>
    <script type="text/javascript">
        /**
         * 校验所有的表单项
         */
        function checkAll() {
            return checkUser() && checkMobile();
        }

        /**
         * 检查用户名是否正确
         * 由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
         */
        function checkUser() {
            //1.得到文本框的值
            let value = document.getElementById("user").value;
            //2.创建正则表达式
            let reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
            //3.比较正则表达式与文本框的值是否匹配
            if (reg.test(value)) {
                //4.如果匹配就通过，在后面显示打勾的图片，返回true
                document.getElementById("userInfo").innerHTML = "";
                return true;
            } else {
                //5.如果不匹配，在后面显示错误信息，返回false
                document.getElementById("userInfo").innerHTML = "用户名格式有误";
                return false;
            }
        }

        /**
         * 判断手机号
         */
        function checkMobile() {
            //1.得到文本框的值
            let value = document.getElementById("mobile").value;
            //2.创建正则表达式
            let reg = /^1[3456789]\d{9}$/;
            //3.比较正则表达式与文本框的值是否匹配
            if (reg.test(value)) {
                //4.如果匹配就通过，在后面显示打勾的图片，返回true
                document.getElementById("mobileInfo").innerHTML = "";
                return true;
            } else {
                //5.如果不匹配，在后面显示错误信息，返回false
                document.getElementById("mobileInfo").innerHTML = "手机格式有误";
                return false;
            }
        }
    script>
head>

<body>

<form action="server" method="post" id="myform" onsubmit="return checkAll()">
    <table class="main" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td><img src="img/logo.jpg" alt="logo"/><img src="img/banner.jpg" alt="banner"/>td>
        tr>
        <tr>
            <td class="hr_1">新用户注册td>
        tr>
        <tr>
            <td style="height:10px;">td>
        tr>
        <tr>
            <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        
                        <td class="left">用户名：td>
                        <td class="center">
                            
                            <input id="user" name="user" type="text" class="in" onblur="checkUser()"/>
                            <span id="userInfo">span>
                        td>
                    tr>
                    <tr>
                        
                        <td class="left">密码：td>
                        <td class="center">
                            <input id="pwd" name="pwd" type="password" class="in"/>
                        td>
                    tr>
                    <tr>
                        
                        <td class="left">确认密码：td>
                        <td class="center">
                            <input id="repwd" name="repwd" type="password" class="in"/>
                        td>
                    tr>
                    <tr>
                        
                        <td class="left">电子邮箱：td>
                        <td class="center">
                            <input id="email" name="email" type="text" class="in"/>
                        td>
                    tr>
                    <tr>
                        
                        <td class="left">手机号码：td>
                        <td class="center">
                            <input id="mobile" name="mobile" type="text" class="in" onblur="checkMobile()"/>
                            <span id="mobileInfo">span>
                        td>
                    tr>
                    <tr>
                        
                        <td class="left">生日：td>
                        <td class="center">
                            <input id="birth" name="birth" type="text" class="in"/>
                        td>
                    tr>
                    <tr>
                        <td class="left"> td>
                        <td class="center">
                            <input name="" type="image" src="img/register.jpg"/>
                        td>
                    tr>
                table>
            td>
        tr>
    table>
form>
body>
html>

小结

表单提交的时候会激活哪个事件？onsubmit

学习总结

能够掌握 json 的三种数据格式

类型	语法
对象类型	{键:值}
数组/集合类型	[元素,元素]
混合类型	[{},{}] {键:[元素,元素]}

语法	功能
JSON.parse(字符串)	字符串->JSON对象
JSON.stringify(JSON对象)	JSON对象->字符串

能够使用window对象常用的方法

window中的方法	说明
setInterval()/setTimeout()	每过一段时间调用1次/过一段时间只调用1次
clearTimeout() / clearInterval()	清除上面的计时器，上面的返回值就是计时器
alert()/prompt()/confirm()	信息/输入/确认

能够使用location对象常用的方法和属性

属性	功能
href	跳转页面
search	获得到参数字符串

location的方法	描述
reload()	刷新

能够使用history对象常用的方法

方法	作用
forward()	前进
back()	后退
go()	前进/后退

能够使用DOM中来查找节点

获取元素的方法	作用
document.getElementById(“id”)	通过id得到一个元素
document.getElementsByTagName (“标签名”)	通过标签名得到一组元素
document.getElementsByName(“name”)	通过name属性得到一组元素
document.getElementsByClassName(“类名”)	通过类名得到一组元素

根据CSS选择器获取元素	作用
document.querySelector(CSS选择器)	通过CSS选择器得到一个元素
document.querySelectorAll(CSS选择器)	通过CSS选择器得到一组元素

能够使用DOM来增删改节点

创建元素的方法	作用
document.createElement(“标签名”)	创建一个元素

将元素挂到DOM树上的方法	作用
父元素.appendChild(子元素)	追加成最后一个子元素
父元素.removeChild(子元素)	删除子元素
元素.remove()	删除自己

能够使用正则表达式进行表单的验证

创建正则表达式格式：

new RegExp("正则表达式","匹配模式")
/正则表达式/匹配模式

正则表达式的判断方法：

boolean 正则表达式.test(字符串)

type=“text” class=“in” οnblur=“checkMobile()”/>

生日：


### 小结

2. 表单提交的时候会激活哪个事件？onsubmit



# 学习总结

- 能够掌握 json 的三种数据格式

| 类型          | 语法                      |
| ------------- | ------------------------- |
| 对象类型      | {键:值}                   |
| 数组/集合类型 | [元素,元素]               |
| 混合类型      | [{},{}]  {键:[元素,元素]} |

| 语法                     | 功能             |
| ------------------------ | ---------------- |
| JSON.parse(字符串)       | 字符串->JSON对象 |
| JSON.stringify(JSON对象) | JSON对象->字符串 |

- 能够使用window对象常用的方法

| window中的方法                   | 说明                                     |
| -------------------------------- | ---------------------------------------- |
| setInterval()/setTimeout()       | 每过一段时间调用1次/过一段时间只调用1次  |
| clearTimeout() / clearInterval() | 清除上面的计时器，上面的返回值就是计时器 |
| alert()/prompt()/confirm()       | 信息/输入/确认                           |

- 能够使用location对象常用的方法和属性

| 属性   | 功能             |
| ------ | ---------------- |
| href   | 跳转页面         |
| search | 获得到参数字符串 |

| location的方法 | 描述 |
| -------------- | ---- |
| reload()       | 刷新 |

- 能够使用history对象常用的方法

| 方法      | 作用      |
| --------- | --------- |
| forward() | 前进      |
| back()    | 后退      |
| go()      | 前进/后退 |

- 能够使用DOM中来查找节点

| 获取元素的方法                           | 作用                     |
| ---------------------------------------- | ------------------------ |
| document.getElementById("id")            | 通过id得到一个元素       |
| document.getElementsByTagName ("标签名") | 通过标签名得到一组元素   |
| document.getElementsByName("name")       | 通过name属性得到一组元素 |
| document.getElementsByClassName("类名")  | 通过类名得到一组元素     |

| 根据CSS选择器获取元素                | 作用                      |
| ------------------------------------ | ------------------------- |
| document.querySelector(CSS选择器)    | 通过CSS选择器得到一个元素 |
| document.querySelectorAll(CSS选择器) | 通过CSS选择器得到一组元素 |

- 能够使用DOM来增删改节点

| 创建元素的方法                   | 作用         |
| -------------------------------- | ------------ |
| document.createElement("标签名") | 创建一个元素 |

| 将元素挂到DOM树上的方法    | 作用                 |
| -------------------------- | -------------------- |
| 父元素.appendChild(子元素) | 追加成最后一个子元素 |
| 父元素.removeChild(子元素) | 删除子元素           |
| 元素.remove()              | 删除自己             |

- 能够使用正则表达式进行表单的验证


创建正则表达式格式：

new RegExp(“正则表达式”,“匹配模式”)
/正则表达式/匹配模式


正则表达式的判断方法：

boolean 正则表达式.test(字符串)

你可能感兴趣的:(javaScripty笔记)

10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
《投行人生》读书笔记小蘑菇的树洞
《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数广龙宇一起学Rust #Rust设计模式 rust 设计模式开发语言
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
git常用命令笔记咩酱-小羊 git 笔记
###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"[email protected]"基本操作克隆远程仓库gitclone查看
509. 斐波那契数(每日一题) lzyprime
lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+
拥有断舍离的心态，过精简生活--《断舍离》读书笔记爱吃丸子的小樱桃
不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
高端密码学院笔记285 柚子_b4b4
高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
Day17笔记-高阶函数 ~在杰难逃~ Python 笔记 python 开发语言 pycharm 数据分析
高阶函数【重点掌握】函数的本质：函数是一个变量，函数名是一个变量名，一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数，B函数调用完成之后，会得到一个结果，则B函数被称为高阶函数常用的高阶函数：map(),reduce(),filter(),sorted()1.map()map(func,iterable)，返回值是一个iterator【容器，迭代器】func:函数iterab
Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Python python 开发语言大数据数据分析数据挖掘
大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
数据仓库——维度表一致性墨染丶eye 背诵数据仓库
数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计
【Git】常见命令(仅笔记) 好想有猫猫 Git Linux学习笔记 git 笔记 elasticsearch linux c++
文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"[email protected]
为什么你总是对下属不满意? ZhaoWu1050
【ZhaoWu的听课笔记】大多数公司，都存在两种问题。我创业四年，更是体会深切。这两种问题就是：老板经常不满意下属的表现；下属总是不知道老板想要什么；虽然这两种问题普遍存在，其实解决方法并不复杂。这节课，我们再聊聊第一个问题：为什么老板经常不满意下属表现?其实，这背后也是一条管理常识。管理学家德鲁克先生早就说过：管理者的任务，不是去改变人。*来自《卓有成效的管理者》只是大多数老板和我一样，都是一边
母亲节如何做小红书营销美橙传媒
小红书的一举一动引起了外界的高度关注。通过爆款笔记和流行话题，我们可以看到“干货”类型的内容在小红书中偏向实用的生活经验共享和生活指南非常受欢迎。根据运营社的分析，这种现象是由小红书用户心智和内容社区背后机制共同决定的。首先，小红书将使用“强搜索”逻辑为用户提供特定的“搜索场景”。在“我必须这样生活”中，大量使用了满足小红书站用户喜好和需求的内容。内容社区自制的高质量内容也吸引了寻找营销新途径的品
读书笔记|《遇见孩子，遇见更好的自己》5 抹茶社长
为人父母意味着放弃自己的过去，不要对以往没有实现的心愿耿耿于怀，只有这样，孩子们才能做回自己。985909803.jpg孩子在与父母保持亲密的同时更需要独立，唯有这样，孩子才会成为孩子，父母才会成其为父母。有耐心的人生往往更幸福，给孩子留点余地。认识到养儿育女是对耐心的考验。为失败做好心理准备，教会孩子控制情绪。了解自己的底线，说到底线，有一点很重要，父母之所以发脾气，真正的原因往往在于他们自己，
基于Python给出的PDF文档转Markdown文档的方法程序媛了了 python pdf 开发语言
注：网上有很多将Markdown文档转为PDF文档的方法，但是却很少有将PDF文档转为Markdown文档的方法。就算有，比如某些网站声称可以将PDF文档转为Markdown文档，尝试过，不太符合自己的要求，而且无法保证文档没有泄露风险。于是本人为了解决这个问题，借助GPT（能使用GPT镜像或者有条件直接使用GPT的，反正能调用GPT接口就行）生成Python代码来完成这个功能。笔记、代码难免存在
语文主题教学学习笔记之87 东哥杂谈
“语文主题教学”学习笔记之八十七（0125）今天继续学习小学语文主题教学的实践样态。板块三：教学中体现“书艺”味道。作为四大名著之一的《水浒传》，堪称我国文学宝库之经典。对从《水浒传》中摘选的单元，教师就要了解其原生态，即评书体特点。这也要求教师要了解一些常用的评书行话术语，然后在教学时适时地加入一些，让学生体味其文本中原有的特色。学生也要尽可能地通过朗读的方式，而不单是分析讲解的方式进行学习。细
Armv8.3 体系结构扩展--原文版代码改变世界ctw ARM-TEE-Android armv8 嵌入式 arm架构安全架构芯片 Trustzone Secureboot
快速链接:.ARMv8/ARMv9架构入门到精通-[目录]付费专栏-付费课程【购买须知】:个人博客笔记导读目录(全部)TheArmv8.3architectureextensionTheArmv8.3architectureextensionisanextensiontoArmv8.2.Itaddsmandatoryandoptionalarchitecturalfeatures.Somefeat
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
阅读《认知觉醒》读书笔记就看看书
本周阅读了周岭的《认知觉醒开启自我改变的原动力》，启发较多，故做读书笔记一则，留待学习。全书共八章，讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑
阅读笔记：阅读方法中的逻辑和转念施吉涛
聊聊一些阅读的方法论吧，别人家的读书方法刚开始想写，然后就不知道写什么了，因为作者写的非常的“精致”我有一种乡巴佬进城的感觉，看到精美的摆盘，精致的食材不知道该如何下口也就是《阅读的方法》，我们姑且来试一下强劲的大脑篇，第一节：逻辑通俗的来讲，也就是表达的排列和顺序，再进一步就是因果关系和关联实际上书已经看了大概一遍，但直到打算写一下笔记的时候，才发现作者讲的推理更多的是阅读的对象中呈现出的逻辑也
《转介绍方法论》学习笔记小可乐的妈妈
一、高效转介绍的流程：价值观---执行----方案一）转介绍发生的背景：1、对象：谁向谁转介绍？全员营销，人人参与。①员工的激励政策、客户的转介绍诱因制作客户画像：a信任；支付能力；意愿度；便利度（根据家长具备四个特征的个数分为四类）B性格分类C职业分类D年龄性别②执行：套路，策略，方法，流程2、诱因：为什么要转介绍？认同信任；多方共赢；传递美好；零风险承诺打动人心，超越期待。选择做教育，就是选择
JAVA学习笔记之23种设计模式学习 victorfreedom Java技术设计模式 android java 常用设计模式
博主最近买了《设计模式》这本书来学习，无奈这本书是以C++语言为基础进行说明，整个学习流程下来效率不是很高，虽然有的设计模式通俗易懂，但感觉还是没有充分的掌握了所有的设计模式。于是博主百度了一番，发现有大神写过了这方面的问题，于是博主迅速拿来学习。一、设计模式的分类总体来说设计模式分为三大类：创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式，共七种：适配器
解决Obsidian写笔记中的＜img＞标签无法显示图片的问题全能全知者笔记
Obsidian中写md笔记如果使用标签会显示不出图案，后来才知道因为Obsidian的问题导致只能用绝对路径定位。所以我本人写了一个py插件，将md笔记里的img标签批量替换成Obsidian能够读取的形式。安装FixObsImgDpy:pipinstallFixObsImgDpy安装完成后在需要修复的md文件的父目录下运行命令:FixObsImgDpy就会自动修复父目录以下的全部md文件仓库
2021年周总结 03 Ruby之家
这周的生活过得也是比较快，因为暂时住的离公司有点距离，所以通勤时间相对较长一点，而在地铁上的一个半小时如何充分利用起来，则是我最近一直在思考的问题，2021年想让自己的生活都运行在计划中。(有时候自己想干一件事情就总是给自己找很多借口，想着以后怎么怎么样？然而哪有那么多的以后，能够方便当下的工作生活就立马执行就OK，这仅仅只是我此时想到背的很重的老人机笔记本电脑，也算是陪伴我快8年的—当时买的时候
2021-12-11 人生导演
今天读到佛学书籍的一段话：初学者很难直接体验到无我，但可以经常提醒自己：一切事物都是无我的。不断强化这个观念，也会相当有帮助。比如生病了我们一般会说：“我不舒服！我很痛！我很惨！”这时候如果我们提醒自己：没有我，只是这个肉体的某些部分、某些功能出了问题，不舒服、疼痛也只是一时的感受，而感受随时在变化。仅仅是知道没有一个实存的我在生病、在受苦。然后把“一切事物都是无我的”这句话，记到笔记上，并且朗读
新能源汽车 BMS 学习笔记篇—BMS 基本定义及分类 WPG大大通其他笔记汽车 BMS 经验分享新能源电池
一、BMS定义1、概念：BMS（BatteryManagementSystem）即电池管理系统，其管理对象是二次电池（充电电池或蓄电池），其主要目的是电池的利用率，防止电池出现过度充电和过度放电，可应用于电动汽车、电瓶车、机器人、无人机等图片来源：腾讯网https://new.qq.com《标准普尔警告，电动汽车电池生产面临供应链和地缘政治风险》2、四大功能①感知和测量：检测电池的电压、电流、温度
机器学习-聚类算法不良人龍木木机器学习机器学习算法聚类
机器学习-聚类算法1.AHC2.K-means3.SC4.MCL仅个人笔记，感谢点赞关注！1.AHC2.K-means3.SC传统谱聚类：个人对谱聚类算法的理解以及改进4.MCL目前仅专注于NLP的技术学习和分享感谢大家的关注与支持！
LeetCode github集合，附CMU大神整理笔记 Wesley@ LeetCode github
GithubLeetCode集合本人所有做过的题目都写在一个java项目中，同步到github中了，算是见证自己的进步。github目前同步的题目是2020-09-17日之后写的题。之前写过的题会陆续跟新到github中。目前大概400个题目Github项目链接：https://github.com/sunliancheng/leetcode_github附上一份优秀的教材整合：这是卡内基梅隆(C
html页面js获取参数值 0624chenhong html
1.js获取参数值js function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = windo
MongoDB 在多线程高并发下的问题 BigCat2013 mongodb DB 高并发重复数据
最近项目用到 MongoDB , 主要是一些读取数据及改状态位的操作. 因为是结合了最近流行的 Storm进行大数据的分析处理，并将分析结果插入Vertica数据库，所以在多线程高并发的情境下, 会发现 Vertica 数据库中有部分重复的数据. 这到底是什么原因导致的呢？笔者开始也是一筹莫展，重复去看 MongoDB 的 API , 终于有了新发现： com.mongodb.DB 这个类有
c++ 用类模版实现链表(c++语言程序设计第四版示例代码) CrazyMizzz 数据结构 C++
#include<iostream> #include<cassert> using namespace std; template<class T> class Node { private: Node<T> * next; public: T data;
最近情况麦田的设计者感慨考试生活
在五月黄梅天的岁月里，一年两次的软考又要开始了。到目前为止，我已经考了多达三次的软考，最后的结果就是通过了初级考试（程序员）。人啊，就是不满足，考了初级就希望考中级，于是，这学期我就报考了中级，明天就要考试。感觉机会不大，期待奇迹发生吧。这个学期忙于练车，写项目，反正最后是一团糟。后天还要考试科目二。这个星期真的是很艰难的一周，希望能快点度过。
linux系统中用pkill踢出在线登录用户被触发 linux
由于linux服务器允许多用户登录，公司很多人知道密码，工作造成一定的障碍所以需要有时踢出指定的用户 1/#who 查出当前有那些终端登录（用 w 命令更详细） # who root pts/0 2010-10-28 09:36 (192
仿QQ聊天第二版肆无忌惮_ qq
在第一版之上的改进内容: 第一版链接: http://479001499.iteye.com/admin/blogs/2100893 用map存起来号码对应的聊天窗口对象,解决私聊的时候所有消息发到一个窗口的问题. 增加ViewInfo类,这个是信息预览的窗口,如果是自己的信息,则可以进行编辑. 信息修改后上传至服务器再告诉所有用户,自己的窗口
java读取配置文件知了ing
1，java读取.properties配置文件 InputStream in; try { in = test.class.getClassLoader().getResourceAsStream("config/ipnetOracle.properties");//配置文件的路径 Properties p = new Properties()
__attribute__ 你知多少？矮蛋蛋 C++gcc
原文地址: http://www.cnblogs.com/astwish/p/3460618.html GNU C 的一大特色就是__attribute__ 机制。__attribute__ 可以设置函数属性（Function Attribute ）、变量属性（Variable Attribute ）和类型属性（Type Attribute ）。 __attribute__ 书写特征是：
jsoup使用笔记 alleni123 java 爬虫 JSoup
<dependency> <groupId>org.jsoup</groupId> <artifactId>jsoup</artifactId> <version>1.7.3</version> </dependency> 2014/08/28 今天遇到这种形式，
JAVA中的集合 Collectio 和Map的简单使用及方法百合不是茶 list map set
List ,set ,map的使用方法和区别 java容器类类库的用途是保存对象，并将其分为两个概念： Collection集合：一个独立的序列，这些序列都服从一条或多条规则;List必须按顺序保存元素，set不能重复元素；Queue按照排队规则来确定对象产生的顺序（通常与他们被插入的
杀LINUX的JOB进程 bijian1013 linux unix
今天发现数据库一个JOB一直在执行，都执行了好几个小时还在执行，所以想办法给删除掉系统环境： ORACLE 10G Linux操作系统操作步骤如下：第一步.查询出来那个job在运行，找个对应的SID字段 select * from dba_jobs_running--找到job对应的sid &n
Spring AOP详解 bijian1013 java spring AOP
最近项目中遇到了以下几点需求，仔细思考之后，觉得采用AOP来解决。一方面是为了以更加灵活的方式来解决问题，另一方面是借此机会深入学习Spring AOP相关的内容。例如，以下需求不用AOP肯定也能解决，至于是否牵强附会，仁者见仁智者见智。 1.对部分函数的调用进行日志记录，用于观察特定问题在运行过程中的函数调用
[Gson六]Gson类型适配器(TypeAdapter) bit1129 Adapter
TypeAdapter的使用动机 Gson在序列化和反序列化时，默认情况下，是按照POJO类的字段属性名和JSON串键进行一一映射匹配，然后把JSON串的键对应的值转换成POJO相同字段对应的值，反之亦然，在这个过程中有一个JSON串Key对应的Value和对象之间如何转换(序列化/反序列化)的问题。以Date为例，在序列化和反序列化时，Gson默认使用java.
【spark八十七】给定Driver Program，如何判断哪些代码在Driver运行，哪些代码在Worker上执行 bit1129 driver
Driver Program是用户编写的提交给Spark集群执行的application，它包含两部分作为驱动： Driver与Master、Worker协作完成application进程的启动、DAG划分、计算任务封装、计算任务分发到各个计算节点(Worker)、计算资源的分配等。计算逻辑本身，当计算任务在Worker执行时，执行计算逻辑完成application的计算任务
nginx 经验总结 ronin47 nginx 总结
　　　深感nginx的强大，只学了皮毛，把学下的记录。　　　获取Header 信息，一般是以$http_XX（ＸＸ是小写）获取body,通过接口，再展开，根据Ｋ取Ｖ　　　获取uri,以$arg_XX &n
轩辕互动-1.求三个整数中第二大的数2.整型数组的平衡点 bylijinnan 数组
import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class ExoWeb { public static void main(String[] args) { ExoWeb ew=new ExoWeb(); System.out.pri
Netty源码学习-Java-NIO-Reactor bylijinnan java 多线程 netty
Netty里面采用了NIO-based Reactor Pattern 了解这个模式对学习Netty非常有帮助参考以下两篇文章： http://jeewanthad.blogspot.com/2013/02/reactor-pattern-explained-part-1.html http://gee.cs.oswego.edu/dl/cpjslides/nio.pdf
AOP通俗理解 cngolon spring AOP
1.我所知道的aop 初看aop,上来就是一大堆术语，而且还有个拉风的名字，面向切面编程，都说是OOP的一种有益补充等等。一下子让你不知所措，心想着：怪不得很多人都和我说aop多难多难。当我看进去以后，我才发现：它就是一些java基础上的朴实无华的应用，包括ioc，包括许许多多这样的名词，都是万变不离其宗而已。 2.为什么用aop&nb
cursor variable 实例 ctrain variable
create or replace procedure proc_test01 as type emp_row is record( empno emp.empno%type, ename emp.ename%type, job emp.job%type, mgr emp.mgr%type, hiberdate emp.hiredate%type, sal emp.sal%t
shell报bash: service: command not found解决方法 daizj linux shell service jps
今天在执行一个脚本时，本来是想在脚本中启动hdfs和hive等程序，可以在执行到service hive-server start等启动服务的命令时会报错，最终解决方法记录一下：脚本报错如下： ./olap_quick_intall.sh: line 57: service: command not found ./olap_quick_intall.sh: line 59
40个迹象表明你还是PHP菜鸟 dcj3sjt126com 设计模式 PHP 正则表达式 oop
你是PHP菜鸟，如果你：1. 不会利用如phpDoc 这样的工具来恰当地注释你的代码2. 对优秀的集成开发环境如Zend Studio 或Eclipse PDT 视而不见3. 从未用过任何形式的版本控制系统，如Subclipse4. 不采用某种编码与命名标准，以及通用约定，不能在项目开发周期里贯彻落实5. 不使用统一开发方式6. 不转换（或）也不验证某些输入或SQL查询串（译注：参考PHP相关函
Android逐帧动画的实现 dcj3sjt126com android
一、代码实现： private ImageView iv; private AnimationDrawable ad; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout
java远程调用linux的命令或者脚本 eksliang linux ganymed-ssh2
转载请出自出处： http://eksliang.iteye.com/blog/2105862 Java通过SSH2协议执行远程Shell脚本(ganymed-ssh2-build210.jar) 使用步骤如下： 1.导包官网下载: http://www.ganymed.ethz.ch/ssh2/ ma
adb端口被占用问题 gqdy365 adb
最近重新安装的电脑，配置了新环境，老是出现： adb server is out of date. killing... ADB server didn't ACK * failed to start daemon * 百度了一下，说是端口被占用，我开个eclipse，然后打开cmd，就提示这个，很烦人。一个比较彻底的解决办法就是修改
ASP.NET使用FileUpload上传文件 hvt .net C#hovertree asp.net webform
前台代码： <asp:FileUpload ID="fuKeleyi" runat="server" /> <asp:Button ID="BtnUp" runat="server" onclick="BtnUp_Click" Text="上传" />
代码之谜（四）- 浮点数（从惊讶到思考） justjavac 浮点数精度代码之谜 IEEE
在『代码之谜』系列的前几篇文章中，很多次出现了浮点数。浮点数在很多编程语言中被称为简单数据类型，其实，浮点数比起那些复杂数据类型（比如字符串）来说，一点都不简单。单单是说明 IEEE浮点数就可以写一本书了，我将用几篇博文来简单的说说我所理解的浮点数，算是抛砖引玉吧。一次面试记得多年前我招聘 Java 程序员时的一次关于浮点数、二分法、编码的面试，多年以后，他已经称为了一名很出色的
数据结构随记_1 lx.asymmetric 数据结构笔记
第一章 1.数据结构包括数据的逻辑结构、数据的物理/存储结构和数据的逻辑关系这三个方面的内容。 2.数据的存储结构可用四种基本的存储方法表示，它们分别是顺序存储、链式存储、索引存储和散列存储。 3.数据运算最常用的有五种，分别是查找/检索、排序、插入、删除、修改。 4.算法主要有以下五个特性：输入、输出、可行性、确定性和有穷性。 5.算法分析的
linux的会话和进程组网络接口 linux
会话：一个或多个进程组。起于用户登录，终止于用户退出。此期间所有进程都属于这个会话期。会话首进程：调用setsid创建会话的进程1.规定组长进程不能调用setsid，因为调用setsid后，调用进程会成为新的进程组的组长进程.如何保证？先调用fork，然后终止父进程，此时由于子进程的进程组ID为父进程的进程组ID，而子进程的ID是重新分配的，所以保证子进程不会是进程组长，从而子进程可以调用se
二维数组元素的连续求解 1140566087 二维数组 ACM
import java.util.HashMap; public class Title { public static void main(String[] args){ f(); } // 二位数组的应用 //12、二维数组中，哪一行或哪一列的连续存放的0的个数最多，是几个0。注意，是“连续”。 public static void f(){
也谈什么时候Java比C++快 windshome java C++
刚打开iteye就看到这个标题“Java什么时候比C++快”，觉得很好笑。你要比，就比同等水平的基础上的相比，笨蛋写得C代码和C++代码，去和高手写的Java代码比效率，有什么意义呢？我是写密码算法的，深刻知道算法C和C++实现和Java实现之间的效率差，甚至也比对过C代码和汇编代码的效率差，计算机是个死的东西，再怎么优化，Java也就是和C

javaScripty笔记

《JavaScript-笔记》

学习目标

学习内容

流程控制：if 语句

目标

if 语句：

if…else 语句

if…else if…else 语句

代码

小结：非布尔类型的表达式

流程控制：switch语句

目标

语法一：case后使用常量，与Java相同

语法二：case后使用表达式

相关的方法

案例：判断一个学生的等级

分析

代码

小结

流程控制：循环语句

目标

while语句：

do-while语句：

for 语句

break和continue

案例：乘法表

需求

分析

代码

命名函数和匿名函数

目标

函数的概述

命名函数的格式

自定义函数

需求

代码

注意事项

代码

匿名函数

应用场景

语法

函数调用代码

小结

案例：轮播图

目标

方法说明

需求

步骤

代码

小结

设置事件的两种方式

目标

什么是事件

设置事件的两种方式

小结

事件介绍：onload、onclick、ondblclick

目标

加载完成事件

鼠标点击事件

案例演示

代码

小结

事件介绍：得到焦点、失去焦点、改变事件

目标

事件名

焦点事件示例

代码

改变事件示例

需求

效果

代码

小结

上午回顾

流程控制语句

函数

事件

事件介绍：鼠标移入和移出

目标

事件名