JavaScript学习笔记 | 云雀笔记

type

Post

status

Published

date

Oct 28, 2022

slug

summary

个人JavaScript的学习笔记记录

一、创建HTML文件及javascript的使用方式

1、直接在html中使用script标签

创建html文件

这就表示用script标签写了一个h1的标签


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title>云雀的网页</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <script>
            document.write("<h1>这是云雀的网页</h1>");
        </script>
    </body>
</html>

效果如下：

2、引入外部的javascript文件

创建一个sctipt.js文件


document.write("<h1>这是云雀的网页</h1>");

在html中引入sctipt.js文件


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title>云雀的网页</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <!-- 引入script.js文件 -->
        <script src="script.js"></script>
    </body>
</html>

效果如下:

可以看出两种方式结果相同

二、javascript的基本用法

1、JS的注释

单行JS注释可以用 // 来表示

多行注释可以用 /* 和 */ 包起来

注释的内容不会被浏览器读取


//这是单行注释
/*
    这是多行注释
    注释行1
    注释行2
*/

2、基本资料形态及变数

JS的三种基础资料形态

字符串

字符串要用一对双引号包起来

数字

数字可以直接输入，可以是小数

布尔值

布尔值有true和false两种


//下面是字符串
document.write("字符串");
document.write("<br/>");
//下面是文字
document.write(9);
document.write("<br/>");
//下面是布尔值
document.write(false);

效果如下

变数

变数的命名只能是英文、数字、$和_的组合，但是开头不能是数字。


//创建一个变数my_name
var my_name = "云雀";
var my_age = 18;

//可以通过变数和字符串的相加来实现字符串的拼接
document.write("我叫" + my_name + ",我的年龄是" + my_age + "岁");

效果如下：

修改变数的值，使上下文显示不同的内容


//创建一个变数my_name
var my_name = "云雀";
var my_age = 18;

//可以通过变数和字符串的相加来实现字符串的拼接
document.write("我叫" + my_name + ",我的年龄是" + my_age + "岁");
document.write("<br/>");
//可以在JS里面修改变数的值实现上下文显示不同的值
my_name = "小黑子";

document.write("我不是" + my_name);

效果如下

3、字符串的用法

要在字符串中使用 “ 需要使用符号 \


var phrase = "hello\"world";
document.write(phrase);

效果如下

字符串命令的常见用法


var phrase = "Hello World";
//            0123456789
//输出字符串内容
document.write(phrase);
document.write("<br/>");
//输出字符串长度,中间的空格也会被计算为一个字符
document.write(phrase.length);
document.write("<br/>");
//将所有字符转为大写并输出
document.write(phrase.toUpperCase());
document.write("<br/>");
//将所有字符转为小写并输出
document.write(phrase.toLowerCase());
document.write("<br/>");
//输出字符串排序第0位的字符,字符排序从0开始
document.write(phrase.charAt(0));
document.write("<br/>");
//输出字符串排序第2位的字符,字符排序从0开始
document.write(phrase.charAt(2));
document.write("<br/>");
//查找字符在字符串中的排序
document.write(phrase.indexOf("H"));
document.write("<br/>");
//当字符不在字符串中会显示结果-1
document.write(phrase.indexOf("q"));
document.write("<br/>");
//当字符在字符串中有多个时会显示最早出现的那个的排序
document.write(phrase.indexOf("l"));
document.write("<br/>");
//输出字符串排序第0位到第5位之前的字符
document.write(phrase.substring(0,5));
document.write("<br/>");

效果如下

4、数字的用法

常见用法如下：


//输出整数
document.write(6);
document.write("<br/>");
//输出小数
document.write(6.2334);
document.write("<br/>");
//输出负数
document.write(-6.8);
document.write("<br/>");
//加减乘除的运算 
document.write(9+3-(3-2)*3+6/2);
document.write("<br/>");
//%--取余数,10除以3余1
document.write(10%3);
document.write("<br/>");
//加入变数
var number = -6;
//取绝对值
document.write(Math.abs(number));
document.write("<br/>");
//取最大值
document.write(Math.max(12,23,45,56));
document.write("<br/>");
//取最小值
document.write(Math.min(12,number,45,56));
document.write("<br/>");
//四舍五入
document.write(Math.round(3.5));
document.write("<br/>");
//2的3次方
document.write(Math.pow(2,3));
document.write("<br/>");
//开根号
document.write(Math.sqrt(9));
document.write("<br/>");
//0-1的随机数
document.write(Math.random());
document.write("<br/>");
//0-10的随机整数
document.write(Math.round(Math.random()*10));
document.write("<br/>");

输出效果：

5、制作一个简单的计算器


//prompt("请输入你的名字")在浏览器出现一个提示为输入你的名字的弹窗,输入的内容默认以字符存储
var num1 = prompt("请输入数字1");
var num2 = prompt("请输入数字2");

//将输入的字符转换成数字 parseInt将数字转换成整数,自动舍弃小数点,parseFloat转换成小数
num1 = parseFloat(num1);
num2 = parseFloat(num2);

//将运算结果输出到浏览器
document.write(num1 + num2);

使用效果

6、阵列


//创建一个阵列,阵列里面可以是数字,字符串,布尔值
var scores = [10,20,30,40,50,60];
var my = ["云雀",20,false];
//输出阵列
document.write(scores);
document.write("<br/>");
//输出阵列中的某一个值
document.write(scores[0]);
document.write("<br/>");
//修改阵列中的某一个值
scores[2] = 70;
//输出阵列的长度,既里面值的数量
document.write(scores.length);

效果如下：

7、函数 function

使用函数的两步方法

第一步、定义一个函数

第二步、呼叫函数


//创建一个hello函数,函数内容为输出你好
function hello(){
    document.write("你好");
}
//呼叫hello函数
hello();

document.write("<br/>");

//创建一个add函数,函数内容为输出num1+num2的结果
function add(num1 , num2){
    document.write(num1 + num2);
}
//呼叫add函数,并给num1和num2赋值
add(1 , 2);

效果如下

第二种方法，这个方便回传数据进行进一步的处理，函数碰到return会自动结束，后面的函数不会运行。


//创建一个hello函数,函数内容为输出你好
function hello(){
    document.write("你好");
}
//呼叫hello函数
hello();

document.write("<br/>");

//创建一个add函数,函数内容为输出num1+num2的结果
function add(num1 , num2){
    //回传num1+num2的值并覆盖add(1 , 2)
    return num1 + num2;
}
//呼叫add函数,并给num1和num2赋值
document.write(add(1 , 2));

效果如下：

💡

思考：下面运行下面的函数会出现什么样的结果呢？


function add(num1 , num2){
    document.write(num1 + num2);
    document.write("<br/>");
    return 10;
    document.write(11);
}

var value = add(3 , 2);
document.write(value);

8、if判断

且判断用&&表示，或判断用｜｜表示


//设定数学和英语成绩
var math = 56;
var english = 90;
//如果有两科都考了100,我就给你1000块钱
if(math==100 && english==100){
    document.write("这1000块钱你收着!");
}
//如果一科考了100,另一科考了90或以上,我就给你500块钱
else if(math==100 && english>=90){
    document.write("这500块钱你收着!");
}
else if(math>=90 && english==100){
    document.write("这500块钱你收着!");
}
//如果两科都考了90或以上,我就给你300块钱
else if(math>=90 && english>=90){
    document.write("这300块钱你收着!");
}
//如果两科都及格了,好孩子我不会打你
else if(math>=60 && english>=60){
    document.write("小子,下次小心点!");
}
//只要有一科不及格,我就给你两个大逼斗
else if(math<60 || english<60){
    document.write("别客气,这两大逼斗你收着");
}
//没有理论上不存在其他情况,除非分数大于100,,但是大于100的情况已经被上面的情况包含,所以这一项没有意义
else {
    document.write("好家伙,你这分和老师借的吧");
}

效果如下

9、物件 object

基本使用方法如下


//物件包含key和value
//key可以是函数和阵列

var person = {
    name:"云雀",
    age:18,
    is_male:true,
    //function之后不需要再给一个名字
    print_add:function(num1,num2){
        document.write(num1+num2);
    },
    //this表示当前物件
    print_name:function(){
        document.write(this.name);
    }
}

person.print_add(1,2);
document.write("<br/>");
document.write(person.name);
document.write("<br/>");
person.print_name();

效果如下

10、循环 while

使用如下


//给i赋予一个原始值1
var i = 1;
//当1<=3时,按以下循环,输出i的值,在当前i的值上加1,换行

//第一种先判断在执行
while(i<=3){
    document.write(i);
    //也可以用i=i+1;
    i++;
    document.write("<br/>");
}
//第二种先执行后判断
do{
    document.write(i);
    //也可以用i=i+1;
    i++;
    document.write("<br/>");
}while(i<=3)

效果如下

可以看出前面的1、2、3是由第一个循环执行出来的结果，4是由第二个循环执行出来的结果

11、密码检验程序


//正确密码123456
var password = 123456;
//创建一个input变量
var input;
//密码输入次刷
var entry_count = 0;
//输入限制次数
var entry_limit = 3;
//输入是否超限
var out_off_limit = false;
//当密码不正确并且输入次数没有超限时进入循环
while (password!=input && !out_off_limit){
    //输入次数加1
    entry_count++;
    //判断输入次数是否超限
    if(entry_count>entry_limit){
        //如果输入次数超限,修改超限状态为true
        out_off_limit=true;
    }
    else{
        //如果输入次数未超限,弹出请输入密码弹窗,并将值赋予input变量
        input=prompt("请输入密码");
    }
};
//当不满足循环条件,对其跳出循环条件进行判断
if(out_off_limit){
    //如果是因为输出超限跳出循环则弹窗显示登录次数超出限制
    alert("登录次数超出限制");
}
else{
    //否则弹窗显示登录成功
    alert("登录成功");
}

效果如下

12、for循环


//创建一个friends阵列
var friends = ["小明","小红","小蓝","阿华"];
//创建一个for循环,初始值q为0,循环条件为q小于阵列长度时执行循环,循环完成执行q+1
for(var q = 0; q < friends.length; q++){
    document.write(friends[q]);
    document.write("<br/>");
}

效果如下

13、创建一个问答程序


//创建三个问答题
var question = [
    {
        prompt:"1+1等于几",
        answer:"2",
    },
    {
        prompt:"2+2等于几",
        answer:"4",
    },
    {
        prompt:"4+4等于几",
        answer:"8",
    },
]
//创建初始成绩
var score = 0;
//创建for循环,i的初始值为0,当i小于阵列长度时进行循环,完成一次循环i的值加1
for(i=0;i<question.length;i++){
    //将用户输入的值赋予input变数
    var input = prompt(question[i].prompt);
    //对input和答案进行对比判断,相等必须用两个==
    if(input==question[i].answer){
        //当input值与答案相同时,成绩加1并弹窗提示回答正确
        score++;
        alert("回答正确");
    }
    else{
        //答错时弹窗提示回答错误
        alert("回答错误");
    }
}
//完成循坏后,弹窗提示答对题目的数量
alert("你答对了" + score + "题");

效果如下

14、二维阵列和多重循环


//二维阵列,多重循环
//创建一个二维数字整列
var numbers = [
    [1,2,3],
    [4,5,6],
    [7,8,9],
    [0],
];
//第一重循环,i为初始值为0的变数,当i小于numbers阵列长度时进行循环,完成一次循环i+1
for(var i=0; i<numbers.length; i++){
    //第二重循环,j为初始值为0的变数,当j小于numbers[i]阵列长度时进行循环,完成一次循环j+1
    for(var j=0; j<numbers[i].length; j++){
        //输出numbers[i][j]的值
        document.write(numbers[i][j]);
    }
    //完成一次第一重循环后进行换行
    document.write("<br/>");
}

效果如下：

15、class模版


//创建一个命名为Person的class模版,模版命名一般为大写字母
class Person {
    //这个模版的三个基本属性
    constructor(name,birth_year,is_male){
        this.name = name;
        this.birth_year = birth_year;
        this.is_male = is_male;
    }
    //计算年纪
    age(){
        return 2022 - this.birth_year;
    }
}
//创建三个人物并赋予三个基本属性
var person1 = new Person("小明",1999,true);
var person2 = new Person("小红",2003,false);
var person3 = new Person("云雀",2005,true);
//模版的应用
document.write("第一个人2022年" + person1.age() + "岁");
document.write("<br/>");
document.write("第三个人的名字是" + person3.name);
document.write("<br/>");
document.write("第二个人的名字是男生?" + person2.is_male);

效果如下：

16、取得html元素

原html文件


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title>云雀的网页</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <!-- 引入script.js文件 -->
        <h1 id="header">云雀的网页</h1>
        <a id="link" href="https://www.baidu.com">百度</a>
        <!-- html中<script src="script.js"></script>必须放在两个id下面，否则js无法获取html -->
        <script src="script.js"></script>
    </body>
</html>

未设置js之前效果

设置js命令


//取得id为header的html,并附值给h1
var h1 = document.getElementById("header");
//在console中显示h1
console.log(h1);
//修改h1的文本
h1.innerText = "这不是云雀的网页";
//修改h1的背景颜色
h1.style.backgroundColor = "red";
//取得id为link的html,并附值给link
var link = document.getElementById("link");
//在console中显示link
console.log(link);
//修改link链接的网址到谷歌
link.href = "https://www.google.com";
//修改link的文本
link.innerText = "谷歌";

效果如下：

17、事件监听器

第一种，写在html中，监听事件前要加on，如onclick


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title>云雀的网页</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <!-- 引入script.js文件 -->
        <img id="img" src="https://cdn.jsdelivr.net/gh/FuKun0113/picture/brand/logo-yunque.svg" width="200px"/>
        <br/>
        <!-- onclick表示监听按按钮的动作,handle_click是一个按下按钮之后执行的函数,this表示获取监听的这个标签 -->
        <button id="btn" onclick="handle_click(this)">按我</button>
        <script src="script.js"></script>
    </body>
</html>

js这样写


//handle_click(btn)表示将获取到的html标签写入btn
function handle_click(btn){
    //在console中显示btn
    console.log(btn);
    //修改按键的文字
    btn.innerText = "不要按人家啦";
    btn.style.color = "red";
}

效果如下

第二种方法，直接写在js中

html文件


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title>云雀的网页</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <!-- 引入script.js文件 -->
        <img id="img" src="https://cdn.jsdelivr.net/gh/FuKun0113/picture/brand/logo-yunque.svg" width="200px"/>
        <br/>
        <button id="btn">按我</button>
        <script src="script.js"></script>
    </body>
</html>

js文件


//获取id为btn的html标签并写入btn
var btn = document.getElementById("btn");
//在console中显示btn
console.log(btn);
//进行监听,监听动作为click,出现动作后执行function
btn.addEventListener("click",function(){
    //修改按键文字和颜色
    this.innerText = "不要按我啦";
    this.style.color = "red";
})

效果如下：

18、制作博客

html文件


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title>云雀的网页</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <!-- 引入script.js文件 -->
        <h1>云雀博客</h1>
        <p>标题</p>
        <input id="title" type="text"/>
        <p>内容</p>
        <textarea id="content" rows="8" ></textarea>
        <br/>
        <button id="btn">发布</button>
        <div id="list">
            <div class="article">
                <h2>这是一篇博客</h2>
                <p>这是一段文字</p>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

js文件


//获取以下四个id的html标签
var title = document.getElementById("title");
var content = document.getElementById("content");
var btn = document.getElementById("btn");
var list = document.getElementById("list");
//按下按键时执行动作
btn.addEventListener("click",function(){
    //获取list的html文件并在后面新增,新增内容用``来包起来,${title.value}表示输入的值
    list.innerHTML = list.innerHTML + `
    <div class="article">
        <h2>${title.value}</h2>
        <p>${content.value}</p>
    </div>
    `;
    //清空输入
    title.value = "";
    content.value = "";
})

效果如下：

三、教学视频

视频如下：

如果视频看不了，请看油管原视频

四、附件

本文的附件请通过下面的链接点击下载

JS.zip

2.7KB