JavaScript基础-20220801

已于 2022-08-02 20:12:50 修改
阅读量441 收藏 1
点赞数 1
分类专栏： js基础语法 文章标签： javascript 前端
于 2022-08-02 18:53:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52696618/article/details/126128278
版权

  第一天的内容

---
typora-root-url: img
---

# JavaScript概述

## 为什么学习JavaScript

一个页面构成由三个部分组成：结构(html)+表现(css)+行为（js）

![1659316286320](/1659316286320.png)

## JavaScript的介绍

JavaScript是一种支持面向对象的跨平台的脚本编程语言（编程语言）

面向对象：属于编程语言中核心思想

跨平台：可以在不同的操作系统中运行

脚本语言：依赖于某些特点的环境才可以运行

## JavaScript发展史

ECMAScript简称ES 用于制定语法标准。规定了代码应该如何编写

## JavaScript应用场景

1、表单验证

2、特效

3、小游戏

总结：只要是基于浏览器的相关功能都可以实现

## JavaScript组成

在**浏览器端js**是由三个部分组合起来

1、ES

2、BOM 表示浏览器对象模型  就可以控制到浏览器功能

3、DOM 表示文档对象模型 用于控制页面上的元素

# JS在HTML中书写位置

## 行内

```html
<!-- 1、js的书写位置  行内方式 -->
<!-- onclick 表示 当元素被点击时做什么 javascript:; 表示执行js代码 其中js的代码写在:与;之间，如果没有js代码表示什么都不做-->
<button onclick="javascript:;" >按钮</button>
<!-- alert 是js中内置的函数 用于弹出内容  内容中注意使用引号 -->
<button onclick="javascript:alert('你好');" >按钮</button>
```

## 内嵌

由于行内方式 结构与行为不分离导致代码维护困难

```html
<!-- 2、js的书写位置 内嵌方式  此方式跟页面载入事件有关系，在不理解情况下先写到最后 -->
<script>
    alert("hello world");
</script>
```

## 外联

1、创建js文件

![1659318311692](/1659318311692.png)

2、引入文件

![1659318338029](/1659318338029.png)

注意：一旦使用外联方式(src属性指定) script标签中嵌套的代码无效

>总结：三种方式推荐使用的是外联，但是课堂上为了方便写代码。大多都使用内嵌方式

# JS中的输出语句

## alert()

页面上弹出一些内容

```html
<!-- 1、alert 系统弹出内容 在alert中指定内容 -->
<script>
    alert('你确定要删除数据吗？')
</script>
```

## document.write()

```html
<!-- 2、document.write() 直接在页面上输入内容 -->
<script>
document.write('<h1>今日头条</h1>')
</script>
```

## prompt()

```html
<!-- 
    3、prompt() 询问 
    var res = prompt('你喜欢谁？') 表示将用户输入的结果接受 并且保存到res变量中
    alert(res); 表示将res变量的结果弹出
-->
<script>
    var res = prompt('你喜欢谁？');
    alert(res);
</script>
```

## confirm()

```html
<!-- 4、confirm  询问 只可以 选中是与否 -->
    <script>
        confirm('你今天18岁？')
    </script>
```

## console.log()

```html
<!-- 5、console.log() 控制台中输出内容 以后可以使用该语句进行代码的测试，可以在怀疑出问题的位置 对内容进行输出 查看结果 -->
    <script>
        console.log('js代码的测试方式，目测')
    </script>
```

# JS中注释

```html
<script>
        // 1、表示单行注释

        /*
            2、多行注释。只要在注释符号中间的内容 都是备注说明
        */
    </script>
```

# JS的变量（重点）

## 表达式

例如需要进行一些数学的运算，每一种运算都是一种表达式，例如 1 + 1 就是一种表达式 可以得到一定结果。表

达式的结果后期是绝对会使用。在编程语言中，也是需要进行大量的计算。每一次计算的结果也是后期要使用的。

也需要存储。所以需要存储数据的一种容器 变量就是存储数据的容器

## 变量声明

```javascript
// 1、变量声明  就是创建一个变量
// 语法是: var 变量名称  
// var 是关键字  变量名称是我们自己指定的一个标识(只要满足变量命名规则即可)
var name;
```



## 变量赋值

```javascript
  // 2、变量赋值 一定要保证变量先存在 变量的第一次赋值也叫做初始化
var age;
// 变量赋值 读法 将18这个值赋值给变量age
age = 18;
// 将age变量中的值在控制台中输出
console.log(age);
// 3、一般创建变量与赋值同时使用
var money = -1000;
console.log(money);

// 同时创建多个变量 变量之间使用逗号分割
var height = 1.8,
    weight = 180;
// 变量连续赋值
var a = b = c = d = 20;
// 表示同时输出多个变量
console.log(a, b, c, d)
```

## 变量命名规则

```html
/*
    规则
    1、可以使用数字0-9，字母a-zA-Z，下划线_，美元符$ 组成
    2、不允许以数字开头
    3、不允许使用中文
    4、区分大小写
    5、不允许使用关键字和保留字
    规范
    1、尽量语义化 - 词必达意
    2、尽量驼峰式 - 由多个单词组成时，每个单词的首字母大写  变量名称使用小驼峰，函数、类使用大驼峰
*/
// 1、没有遵守规范 使用特殊字符表示变量名称
// var  !@# = 20;
// 2、不能使用数字表示变量名称开头
// var 5n=20;
// 3、JS中严格区分大小写 age 与Age是完全不同的变量
var age = 20;
var Age = 30;
// 4、不允许使用关键字和保留字 
```

# JS数据类型(重点)

## 数据类型分类

将变量中存储的值进行归类操作，归类的类别就叫做数据类型。将值进行归类之后JS可以统一的进行控制，提供某

些功能

```javascript
1、基本类型
	1、数字类型
    2、字符串类型
    3、布尔类型
    4、undefined
    5、null
2、引用类型
	1、数组
    2、对象
    3、函数等
```

## 数字类型

只要是平常使用的数字 都是归属与数字，例如正数、负数、小数、整数都是数字类型

### 整数的基本使用

```javascript
// 1、数字类型的基本使用
var number = 10;
// 在js中可以使用typeof 关键字查看变量的数据类型
// typeof 关键字()表示调用 中间指定查看变量的名称
var res = typeof (number); //number 小写
var res2 = typeof number; //number 小写
// 使用逗号分割  同时输出res res2
console.log(res, res2);

// 修改number变量值
number = 20;
// js语言属于弱类型语言，变量可以存储任何数据类型的值
```

### 小数的使用

```javascript
// 2、小数使用
var n1 = 0.1;
var n2 = 0.2;
// 等价于 var res3 = typeof(n1) console.log(re3)
console.log(typeof(n1));
var res4 = n1 + n2;
console.log(res4);//0.30000000000000004
// 上面的结果不是0.3是因为在编程语言中是没有小数的 所以就存在精度问题
// res4.toFixed(2); 将res4变量的结果保留2位小数点
var res5 = res4.toFixed(2);
console.log(res5)
// 如果需要考虑精度问题  就需要下降单位
```

### NAN

```javascript
// 3、NAN Not a Number 表示不是一个数字 但是 确实是数字类型,但是这个值是无法表示
var n3 = 10;
var s1 = "abc";//字符串
console.log(s1*n3);
console.log(typeof(s1*n3));
```

### 数字的范围

```javascript
// 4、数字的范围  Number表示数字的构造函数名称
console.log(Number.MAX_VALUE);//MAX_VALUE 表示得到最大值
console.log(Number.MIN_VALUE);//MAX_VALUE 表示得到最小值
console.log(Number.MAX_SAFE_INTEGER);//MAX_SAFE_INTEGER 表示最大的安全整数
console.log(Infinity);//正无穷
console.log(-Infinity);//负无穷
```

## 字符串数据类型

### 存储字符串数据类型的数据

```javascript
// 1、字符串类型基本使用
// 使用单引号或者双引号将内容包裹 就是字符串类型
var s1 = '10';
console.log(typeof(s1));
// 使用双引号包裹
var s2 = "你好！你还有头发吗?";
console.log(s2,typeof s2);
```

### 字符串单双引号的嵌套

```javascript
 // 2、字符串单双引号的嵌套 默认情况下 单引号不能嵌套单引号 双引号也不能嵌套双引号 单引号可以嵌套双引号 双引号可以嵌套单引号(不能嵌套自己，只能嵌套其他)
// var s3 = ' my name's xxx'
var s4 = "my name's xxx";
console.log(s4)
```

### 字符串转义符

```javascript
// 3、转义符号  \ 表示将后面的字符原有的含义取消
        var s3 = 'my name\'s xxx';
        console.log(s3)
```

### 字符串拼接

```javascript
// 4、字符串拼接 将两个字符串组合到一起
var s4 = 'hello'
var s5 = ' world'
// 使用+符号就可以完成拼接，在JS中+符号有2个作用 同时可以进行数学加法运算与拼接字符串功能，+只有运算的都是数字才会进行加法运算 否则一律作为拼接使用
var s6 = s4 + s5;
console.log(s6)
// 先计算s4+10的结果再对结果进行输出
console.log(s4 + 10)
console.log(10 + 10)
console.log('10' + 10);
```

### 输出HTML标签

```javascript
var name = '张三';
var age = 18;
// 单引号或者双引号中间的变量名称只是一个普通的字符串
var str = '<table><tr><td>'+name+'</td><td>'+age+'</td></tr></table>';
document.write(str);
```

## 布尔类型

布尔类型只有两种值 true与false 布尔值可以用于表示事物的两面(真与假)。布尔值作用用于后面的条件判断

```javascript
var flag = true;
console.log(typeof(flag));//boolean
var flag2 = false;
console.log(typeof(flag2));
```

## undefined

```javascript
当创建一个变量 但是又不给变量赋值，系统默认就将变量设置为undefined
 // undefined
var number;
console.log(typeof(number));
```

## null

```javascript
null 表示空 也是什么都没有的含义
// null
var obj = null;
console.log(typeof obj);//object 因为null 在js中是对象
```

>建议：
>
>1、平常在使用变量时 尽可能为每一个变量设置初始值，数字 可以设置初始化为0 字符串初始值为''(空字符串) 布尔值 随意选择一个，数组初始值设置为\[](表示空数组)、对象设置为空对象{}
>
>2、建议每次使用变量 先代码顶部创建变量 最后在使用

# 运算符

## 算数运算符

```javascript
+:表示加法运算或者字符串拼接
-：减法运算
*：乘法运算
/:表示除法运算
%：求余数
var n1 = 10;
var n2 = 2;
// 数学运算 要求一定是数字
console.log('n1+n2=', n1 + n2);
console.log('n1*n2=', n1 * n2);
console.log('n1-n2=', n1 - n2);
console.log('n1/n2=', n1 / n2);
// % 求余数 除以某一个数字 得多少余多少 求余数最终得到的结果就是那个余数 例如 10 % 3  得3余1  使用余数这个符号 可以判断是否是指定数字的倍数
console.log(10%3);//1
var n3 = 5;
// n3 % 2 如果余数是0 就证明是偶数  如果余数是1 就证明是奇数
```

## 比较运算符

**比较运算符最后得到的结果永远是布尔类型**

```javascript
>:判断左边大于右边
<：判断左边小于右边
>=：判断左边大于或者等于右边
<=：判断左边小于或者等于右边
==：判断左右是否相等(只判断值) 相等得到的为真 否则为假
!=:判断左右是否不相等
===：判断左右是否全等(值与数据类型一定相同)
!==:判断左右是否不全等(只要值与数据类型有一个不一样 就是真)
var n1 = 10;
var n2 = 20;
var n3 = '10';
// >
console.log(n1>n2);//false
// <
console.log(n1<n2);//true;
// >= 
console.log(n1>=n2);//false;
// <= 
console.log(n1<=n2);//true;
// == 注意 两个等号判断相等 一个等号表示赋值
console.log(n1 == n2);//只判断值
console.log(n1 == n3);//true值判断了值 没有判断数据类型 
console.log(n1 != n2);//true
// ===
console.log(n1===n3);//值相等 数据类型不同 false
console.log(n1 !== n3);//只与数据类型中只要有一个不同就是真
```

课后习题 

1-计算两个文本框的和

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

</body>
<script type="text/javascript">
    // 注意数据类型 可以字符串-0后得到的是数字
    var num1 = prompt("请输入第一个数字：")-0;
    var num2 = prompt("请输入第二个数字：")-0;
    // var res = Number(num1) + Number(num2);
    // console.log(res)
    // -0 减法 需要使用数字  如果某一个变量 不是数字类型 触发自动转换机制
    var res = num1 + num2;
    console.log(res);
</script>

</html>

2-小明换算温度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

</body>
<script type="text/javascript">
    /* 
    小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。
    它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
    提示：摄氏度与芈氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)保留3位小数
    小数点后保留3位，使用   数字.toFixed(要保留的位数) 例：3.1415926.toFixed(3) ===> 3.142
*/
    var number = 80;
    var res = (5 / 9.0) * (number - 32);
    console.log(res.toFixed(3))
</script>

</html>

 3-递增运算

4-交换两个变量的值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
<script type="text/javascript">
var a = 1;
var b = 2;
// 根据上面两个变量，运用变量的赋值或计算，得出a=2;b=1
var tmp = a;
// 那个变量先将值赋值给 临时变量 就先修改这个变量
a = b
// 在将b变量的值进行修改
b = tmp;
console.log(a,b);
// b=a;
// a=b;
// console.log(a,b)
</script>
</html>

5-写出奇数偶数的条件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
<script type="text/javascript">
var num = prompt("输入数字：");
if(num % 2 == 0){
    console.log('偶数')
}else{
    console.log('奇数')
}
</script>
</html>

6-战士抗洪

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
<script type="text/javascript">
// 为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？
var hours = 89; // 总小时数;
var day = parseInt(89/24)
// var lastHours = 89 % 24
var lastHours = hours - day * 24;
console.log('天数:',day,'小数：',lastHours)

</script>
</html>

7-逻辑运算

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

</body>
<script type="text/javascript">
    // 输入一个数字，判断是否能被3整除并且能被5整除
    var num = prompt("请输入你要判断的数字：");
    if ((num % 3 == 0) && (num % 5 == 0)) {
        console.log('ok')
    }
</script>

</html>

8-写出闰年的条件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

</body>
<script type="text/javascript">
    // 需要使用逻辑运算符
    var year = prompt("请输入年份：");
    // 闰年:条件 整除4 但是 不能整除100 或者 整除400 
    // if (year % 4 == 0 && year % 100 != 0) {
    //     console.log('是闰年');
    // } else {
    //     if (year % 400 == 0) {
    //         console.log('是闰年')
    //     } else {
    //         console.log('是平年')
    //     }
    // }

    if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
        console.log('是闰年');
    } else {
        console.log('是平年');
    }

    // if(){
    //     if(){
    //         if(){

    //         }
    //     }else{

    //     }
    // }else{

    // }
    // 错误优先
    // if(XXX错误情况){
    //     代码执行到这里就不执行了
    // }
    // if(XXX错误2){
    //     代码执行到这里就不执行了
    // }

    // if(){
    //     1000行
    // }else{
    //     1行代码
    // }

</script>

</html>

goto_w
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
javascript基础----Typora.rar
08-31
Typora：javascript基础总结
“字符型减'0'可以得到整数型”的原因分析
wynplay的博客
01-10 918
哈哈“字符型减’0’可以得到整数型”的原因分析： 我们如果对c语言里数据是如何存储的不清楚的话，就会导致我们对程序的理解越来越困难。说白了c语言就是人与机器交流的一种规则，而机器和芯片能明白的只能是0和1这两种高低电平。他们什么也不懂。只是一堆模拟电子和数字电路板集合。那人们怎么会操作这些破玩意儿呢？刚开始人们真的是010101的通过打孔来操作的。后来，人们学聪明了有了汇编又有了c语言、c++、
用javascript实现从两个文本框中获取输入的数字，点击求和按钮，在文本框中得到结果。
aigo_2021的博客
04-25 6760
编程完成以下效果 <!doctype html> <html lang="en"> <head> <title>Document</title> <script> function button1(){ var t1=document.getElementById("text1"); var t2=document.getElementById("text2"); var sum1=parseInt.
计算两个文本框的和（用户随意输入2个值a 、b）
小福气的博客
06-30 507
题目：用户随意输入两个整数，请计算它们的和是多少？ <scripttype="text/javascript"> varnum1=prompt("请输入第一个数字："); varnum2=prompt("请输入第二个数字："); varnumSum=Number(num1)+Number(num2) alert('第一个数字和第二个数字之和为'+numSum) </script> 注：因为数据类型的转换 ...
【JavaScript】文本框的数值之和
qq_53322582的博客
03-07 586
var num1 = prompt("请输入第一个值:"); var num2 = prompt("请输入第二个值:"); num1 = Number(num1); num2 = Number(num2); var sum = num1 - num2; console.log(sum); prompt（在网页弹出提示框） 将num的值转换为数字 num1 = Number(num1); num2 = Number(num2); ...
js 计算两个文本框数值和（差、商）
热门推荐
Vericlongmore的专栏
05-28 1万+
js 计算两个文本框数值和（差、商） 在前面两个输入框内输入数字看效果。 function SumNum() { var sumValue a=eval(www_zzjs_net_1.value); b=eval(www_zzjs_net_2.value); if (isNaN(a)) {a=0} if (isNaN(b)) {b=0} sumValue = a+b; self['www
javascript基础-动力节点共10页.pdf.zi
11-22
javascript基础__动力节点共10页.pdf.zip
Web前端开发 北京林业大学 JavaScript基础-单元测试
01-08
JavaScript基础 单元测试6 单元作业4 JQuery & HTML5 & Bootstrap 单元测试7 期末考试 客观选择题 这个还是自己写吧 1.toString()的作用是（ ）。 编号 选项 A 将任意类型的数据转换为字符串类型 ...
JavaScript案例-JavaScript
02-16
JavaScript案例-JavaScript
数字字符减去数字字符0就是数字
i_m_jack的博客
11-08 1878
package com.jack; public class Test { public static void main(String[] args) { System.out.println("9:"+(Integer.valueOf('9'))); System.out.println("8:"+(Integer.valueOf('8'))); System.out....
css+js温度计的特效页面设计
06-29
温度计页面动画特效，jquery+css实现，方便调用，画面美观
js实现的温度计
12-19
如果想实现温度计的效果 1.首先将层拖动到温度计图片上作为温度计的指针 2.在文本框中填写温度值 3.填写完之后单击一下文本框 观察温度计的变化 4.温度计2为可直接运行的
Html5、JS--温度计
05-13
Html5、JS--温度计，动态显示数据。
字符串学习1——字符串为什么减‘0’成整数
海淀摆烂王
09-05 9035
1.二进制求和 class Solution { public:     string addBinary(string a, string b) {         string res="";         int m = a.size()-1,n = b.size()-1,carry=0;         while(m &gt;= 0 || n&gt;= 0)         {   ...
JavaScript运算符
weixin_43755513的博客
08-13 174
JavaScript运算符（以下运算符按优先级从高到低书写） 1.括号运算符：() 2. 非运算符：! 3.数学运算符：+ - * / %(取余，其他编辑语言也称摩尔运算) 4单目运算符： ++：表示自增（右++、左++） 右++不参与本次运算，本次运算结束后自增1 html var k=0; control.log(k+++k+++k);//输出3 –:表示自减（左–...
计算两个文本框的和
sunny_Destiny的博客
11-06 1290
计算两个文本框的和 今天我们来学习如何计算两个文本框的和。我们首先来看一张动图。 求和.gif 很显然这不是我们想要的结果，12+5=17才对，因此接下来我们要引入一个新的东西parseInt(可以将字符串转成数字)，还有一个parseFloat(将字符串转成小数)，这里目前我们只需要parseInt。 求和 看来我们想要的效果已经达到了，但是呢，如果我...
Java基础知识练习题
BlizCp的博客
11-04 1191
1、小明要到美国旅游，但那边的温度是以华氏温度为单位记录的。他需要一个程序把华氏温度转换为摄氏温度，并以华氏温度和摄氏温度为单位分别显示该温度，编写程序实现此功能。要求：可以从控制台录入温度信息。 代码如下： public class Test { public static void main(String[] args) { Scanner sc=new Scanner(System.in); System.out.print("当前华式度:"); double fah
JavaScript:实现温度转换算法（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
08-22 507
JavaScript:实现温度转换算法（附完整源码）
javaScript蓝桥杯----外卖给好评
最新发布
10-25
JavaScript蓝桥杯是一个计算机编程竞赛，而外卖给好评是一个具体的问题，需要更多的上下文信息才能回答。不过，如果你想在JavaScript中实现外卖给好评的功能，可以考虑以下步骤： 1. 创建一个包含外卖评价的HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

goto_w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值