【前端基础-Javascript】JS语法

已于 2023-09-24 20:01:21 修改
阅读量83 收藏
点赞数
分类专栏： Web前端 JavaScript 文章标签： 前端 javascript 开发语言
于 2023-09-24 19:59:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51179832/article/details/133249879
版权

1. 初识JavaScript

脚本语言：不需要编译，运行过程中由js解释器逐行来进行解释并执行，逐行解释执行

1.1 JS的作用

表单动态校验（密码强度检测）、网页特效、服务端开发(Nodejs)、桌面程序(Electron)、App(Cordova)、控制硬件-物联网(Ruff)、游戏开发(cocos2d-js)

1.2 浏览器执行JS

浏览器：渲染引擎+JS引擎

1.3 JS的组成

ECMAScript：规定了JS的基础语法

DOM：页面文档对象模型

BOM：浏览器对象模型

1.4 三种书写位置

行内、内嵌和外部

1.行内式JS

  • 单引号
  • 特殊情况下使用

2.内嵌式JS

  • 最常用，将多行JS代码写到

3.外部JS文件：

<script src="my.js"></script>

1.5 JS注释

  1. 单行注释：ctrl+/

  2. 多行注释：shift+alt+a

    可修改多行注释为：Ctrl+Shift+/

1.6 JS输入输出语句

在这里插入图片描述

在这里插入图片描述

2. 变量

var age;  //声明变量，var即variable变量
age=10;   //赋值
console.log(age);      //输出结果
var myname='Yumty杨雨婷';       //变量初始化

案例

1.弹出一个输入框，提示用户输入姓名

2.出一个对话框，输出用户刚才输入的姓名

<script>
	// 1.用户输入姓名 存储到一个 myname的变量里面
    var myname = prompt('请输入您的名字');
	// 2.输出这个用户名
	alert(myname);
</script>

2.1 变量语法扩展

  1. 更新变量：一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准

  2. 同时声明多个变量：同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开

  3. 声明变量的特殊情况

    在这里插入图片描述

//1.更新变量
var myname =pink老师;
console.log(myname);
myname =迪丽热巴';
console.log(myname);
//2.声明多个变量
// var age = 18;
// var address = 火影村'，
// var gz = 2000;
var age = 18,
    address='火影村',
    gz = 2000;
//3.声明变量的特殊情况
//3.1 只声明不赋值 结果是?程序也不知道里面存的是啥 所以结果是 undefined 未定义的
var sex;
console.log(sex); // undefined
//3.2 不声明 不赋值 直接使用某个变量会报错滴
console.log(tel);
3.3 不声明直接赋值使用
qq = 110;console.log(qq);

2.2 变量命名规范

  1. 由字母(A-Z，a-z)、数字(0-9)、下划线(_)、美元符号($)组成，如 : usrAge,num01，_name
  2. 严格区分大小写。var app;和 var App;是两个变量
  3. 不能以数字开头。18age是错误的
  4. 不能是关键字、保留字。例如:var、for、while
  5. 变量名必须有意义。MMD BBD， nl ➡️ age
  6. 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
  7. 推荐翻译网站:有道、爱词霸

3. 数据类型

<script>
	// int num = 10; java
	// var num; //这里的num 我们是不确定属于哪种数据类型的
    var num = 10; // num 属于数字型
	//js 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的var str =pink'; 	// str 字符串型//js是动态语言 变量的数据类型是可以变化的
	var x = 10; //  是数字型
	x ='pink'; // x 字符串型
</script>

3.1 简单数据类型

在这里插入图片描述

3.1.1 数字型Number
<script>
    var num = 10; // num 数字型
	var PI = 3.14; // PI 数字型
	// 1.八进制  0~7 我们程序里面数字前面加 表示八进制
	var num1 = 010;
	console.log(num1); // 010 八进制 转换为 十进制 就是8
	var num2 = 012;
	console.log(num2);
	// 2.十六进制 0~9 a~f   #ffffff  数字的前面加 0x 表示十六进制
	var num3 = 0x9;
	console.log(num3);
	var num4 = 0xa;
	console.log(num4);
	// 3.数字型的最大值
	console.log(Number.MAX VALUE);
	// 4.数字型的最小值
	console.log(Number.MIN VALUE);
	// 5.无穷大
	console.log(Number.MAX_VALUE * 2);    //Infinity
	// 6.无穷小
	console.log(-Number.MAX_VALUE * 2);    //-Infinity
	// 7.非数字
	console.log('杨雨婷' - 100);   //NaN
</script>

isNaN()：判断一个变量是否为非数字类型，是数字false，不是数字true。

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum);           //false,21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName)); //true,"andy"是一个非数字
3.1.2 字符串型String

  1. 字符串引号嵌套

    JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

  2. 转义字符

    在这里插入图片描述

<script>
	//'pink'  'pink老师' '12'  'true'
	var str = '我是一个"高富帅”的程序员';
	console.log(str);
	//字符串转义字符
	//都是用\开头,但是这些转义字符写到引号里面
	var str1 ="我是一个'高富帅'的\n程序员”;
	console.log(str1);
</script>

  1. 字符串长度

    字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length 属性可以获取整个字符串的长度。

var strMsg ="我是帅气多金的程序猿!";
alert(strMsg.length); // 显示 11

  1. 字符串拼接

    • 多个字符串之间可以使用 +进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符

    • 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

    • 数值相加，字符相连

      console.log("沙漠’+骆驼');       //字符串的 沙漠骆驼
console.log('pink老师’+ 18);    //pink老师18
console.log('pink' + true);    // pinktrue
console.log(12 + 12);          // 24
console.log('12' + 12);        //'1212'

  2. 字符串拼接加强

    console.log('pink老师' + 18);         //只要有字符就会相连
var age = 18;
//console.log('pink老师age岁啦');     // 这样不行哦
console.log('pink老师' + age);        // pink老师18
console.log('pink老师' + age + '岁啦'); // pink老师18岁啦
案例：显示年龄

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年xx 岁啦”

<title>显示年龄</title>
<script>
    var age = prompt('请输入您的年龄');
    var str = '您今年'+age+'岁啦!';
    alert(str);
</script>
3.1.3 布尔型Boolean

在这里插入图片描述

var flag = true;                // flag 布尔型
var flag1 = false;              // flag1 布尔型
console.log(flag + 1);          // true 参与加法运算当1来看
console.log(flag1 + 1);         // false 参与加法运算当0来看
//如果一个变量声明未赋值 就是 undefined 未定义数据类型
var str;
console.log(str);
var variable = undefined;
console.log(variable + 'pink'); // undefinedpink
console.log(variable + 1);      // NaN undefined 和数字相加 最后的结果是 NaN
// nul1 空值
var space = null;
console.log(space + 'pink');   // nullpink
console.log(space + 1);        // 1

3.2 获取变量数据类型

3.2.1 typeof可用来获取检测变量的数据类型
  • 也可通过颜色判别
var num = 10;
console.log(typeof num); // number
var str = 'pink';
console.log(typeof str); // stringvar 
flag = true;
console.log(typeof flag); // boolean
var vari = undefined;
console.log(typeof vari); // undefined
var timer = null;
console.log(typeof timer); // object
//prompt 取过来的值是 字符型的
var age = prompt( 请输入您的年龄');
console.log(age);
console.log(typeof age);
3.2.2 字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值

  • 数字字面量:8,9,10
  • 字符串字面量:“黑马程序员”，"大前端“
  • 布尔字面量:true，false

3.3 数据类型转换

3.3.1 转为字符串型

在这里插入图片描述

<script>
	// 1.把数字型转换为字符串型：变量.tostring()
	var num = 10;
	var str = num.tostring();
	console.log(str);
	console.log(typeof str);
	// 2.我们利用：string(变量)
	console.log(string(num));
	// 3.隐式转换，利用 + 拼接字符串的方法实现转换效果
	console.log(num +'');
</script>
3.3.2 转为数字型

在这里插入图片描述

<script>
	// var age = prompt( 请输入您的年龄');
    // 1. parseInt(变量) 可以把 字符型的转换为数字型 得到是整数
    console.log(parseInt(age));
    console.log(parseInt('3.14')); // 3 取整
	console.log(parseInt('3.94')); // 3 取整
	console.log(parseInt('120px')); // 12 会去掉px单位
	console.log(parseInt('rem120px')); // NaN

	// 2.parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数			
	console.log(parseFloat('3.14')); // 3.14
	console.log(parseFloat("12@px')); // 12 会去到这个px单位 
    console.log(parseFloat('rem120px')); // NaN</script>

	// 3.利用 Number(变量)
	var str ='123';
	console.log(Number(str));
	console.log(Number('12'));
	
	// 4.利用了算数运算 -*/ 隐式转换
	console.log('12'-0);//12
	console.log('123'-'120');//3
	console.log('123'*1);
</script>
案例1 计算年龄

输入出生年份，便能计算年龄

<script>
    var year = prompt('请输入您的出生年份');
	var str = '您今年'+(2023-year+1)+'岁啦!';
	alert(str);
</script>
案例2 简单加法器

计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果。

<script>
    /*计算两个数的值，用户输入第一个值后，继续弹出第二个输入框
        并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果。*/
    var num1 = prompt('请输入第一个数值');
    var num2 = prompt('请输入第二个数值');
    var sum = parseFloat(num1)+parseFloat(num2);
    alert('您的结果为：'+sum);
</script>
3.3.3 转为布尔型
  • 代表空、否定的值会被转换为 false，如‘ ’、0、NaN、null、undefined
  • 其余值都会被转换为true
console.log(Boolean(')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(nul1)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(小白));// true
console.log(Boolean(12)); // true

课后作业

依次询问并获取用户的姓名、年龄、性别，并打印用户信息

<script>
    var name=prompt('请输入您的姓名');
    var age=prompt('请输入您的年龄');
    var sex=prompt('请输入您的性别');
    alert('您的姓名是:'+name+'\n您的年龄是:'+age+'\n您的性别为:'+sex);
</script>

4.条件运算符

进入网吧案例

弹出一个输入框，要求用户输入年龄，如果年龄大于等于18岁，允许进入网吧。

<script>
    var age=prompt('请输入您的年龄');
	if(age>=18)
        alert('可以去网吧');
	else
        alert('18岁了再来哦');
</script>
查询水果案例

用户在弹出框输入一个水果，如果没有该水果就弹出”没有此水果“

<script>
    var fruit=prompt('请输入要查询的水果:');
    switch(fruit){
        case'苹果':
            alert('苹果的价格是3.5元/斤');
            break;
        case'香蕉':
            alert('香蕉的价格是1.9元/斤');
            break;
        default:
            alert('没有您要查询的水果');
    }
</script>

5. 循环语句

九九乘法表
<script>
    var str='';
    for(var i=1;i<=9;i++){
        for(var j=1;j<=i;j++){
            str+=j+'*'+i+'='+i*j+'\t';
        }
        str+='\n';
    }
    console.log(str);
</script>
while循环
<script>
    //while循环案例
    //1.打印一个人的一生，从1岁到100岁
    var i=1;
    while(i<=100){
        console.log('这个人今年'+i+'岁了')
        i++;
    }
    //2.计算1~100之间所有整数的和
    var sum=0;
    var j=1;
    while(j<=100){
        sum += j;
        j++;
    }
    console.log(sum);
    //3.弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则一直询问
    var result = prompt("你爱我吗？");
    while(result!=='我爱你'){
        result = prompt("你爱我吗？");
    }
    alert('我也爱你呀，好油！');
</script>
do while循环
<script>
    var sum=0;
    var j=1;
    do{
        sum+=j;
        j++;
    }while(j<=100);
    console.log(sum);
    do{
        var result = prompt("你爱我吗？");
    }while(result!=='我爱你')
    alert('我也爱你呀，好油！');
</script>
continue和break
continue
<script>
	// continue 关键字退出本次(当前次的循环)
	for (var i = 1; i <= 5; i++) {
        if (i == 3) {
        	continue; // 只要遇见 continue就退出本次循环 直接跳到 i++
        }
		console.log("我正在吃第’+ i +，个包子');
    }
	// 1.求1~100之间， 除了能被7整除之外的整数和
	var sum = 0;
	for (var i = 1; i <= 1; i++) {
    	if (i % 7 == 0) continue;
		sum += i;
    }
	console.log(sum);
</script>
break

用于立即跳出整个循环

<script>
    for (var i = 1; i <= 5; i++) {
        if (i == 3){
            break;
        }
    console.log('我正在吃第'+ i +'个包子');
    }
</script>

在这里插入图片描述

6. 命名规范以及语法格式

标识符命名规范
  • 变量、函数的命名必须要有意义
  • 变量的名称一般用名词，函数的名称一般用动词
操作符规范
  • 操作符左右两侧各保留一个空格

简易ATM机

  • 里面现存有100块钱
  • 如果存钱，就用输入钱数加上先存的钱数之后弹出显示余额提示框
  • 如果取钱，就减去取的钱数，之后弹出显示余额提示框
  • 如果显示余额，就输出余额
  • 如果退出，弹出退出信息提示框
var money=100;
while(1){
    var choice = prompt('请输入您想要执行的操作:'+'\n1.存钱'+'\n2.取钱'+'\n3.show'+'\n4.exit');
    switch(choice){
        case '1':
            var add = prompt('您要存储的金额为:');
            money += parseFloat(add);
            alert('当前金额:'+ money);
            break;
        case '2':
            var minus = prompt('您要取出:');
            if(minus <= money){
                money -= minus;
                alert('当前金额:' + money);
            }
            else{alert('金额不足');}
            break;
        case '3':
            alert('当前金额:'+ money);
            break;
        case '4':
            alert('正在退出…');
        default:
            add = prompt('请重新输入:');
    }
}

7.数组

// 1.数组(Array) : 就是一组数据的集合 存储在单个变量下的优雅方式
// 2.利用new 创建数组
var arr = new Array(); // 创建了一个空的数组
// 3.利用数组字面量创建数组 []
var arr = []; // 创建了一个空的数组
var arr1 = [1，2，pink老师'，true];
// 4.我们数组里面的数据一定用逗号分隔
// 5.数组里面的数据 比如1,2， 我们称为数组元素
// 6.获取数组元素 格式 组名[索引号]
console.log(arr1);
console.log(arr1[2]); // pink老师console.log(arr1[3]); // true
var arr2 = ['迪丽热巴','古丽扎娜’,'佟丽丫丫'];
console.log(arr2[e]);
console.log(arr2[1]);
console.log(arr2[2]);
console.log(arr2[3]); // 因为没有这个数组元素 所以输出的结果是 undefined
案例1 删除数组指定元素（数组去重）

将数组[2，0，6，1，77，8，52，9，25，7]中的0去掉后，形成一个不包含0的新数组。
1、需要一个新数组用于存放筛选之后的数据。
2、遍历原来的数组， 把不是0的数据添加到新数组里面(此时要注意采用数组名 + 索引的格式接收数据).
3、新数组里面的个数，用 length 不断累加。

<script>
    var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
    var arr1 = [];
    for(var i=0; i < arr.length; i++){
        if(arr[i] != 0){
            arr1[arr1.length] = arr[i];
        }
    }
    console.log(arr1);
</script>
案例2 翻转数组

要求:将数组[‘red’，’green‘，’blue‘，’pink‘，’purple‘]的内容反过来放

输出:[‘purple’,‘pink’,‘blue’,‘green’,‘red’]

<script>
    //要求:将数组[‘red’，’green‘，’blue‘，’pink‘，’purple‘]的内容反过来放
    // 输出:['purple','pink','blue','green','red']
    var arr=['red','green','blue','pink','purple'];
    var arr2 = [];
    for(var i = arr.length - 1;i >= 0;i--){
        arr2[arr2.length]=arr[i];
    }
    console.log(arr2);
</script>
案例3 冒泡排序
<script>
    // 冒泡排序
    // var arr = [5，4，3，2,1];
    var arr = [4,1,2,3,5];
    for (var i = 0; i <= arr.length - 1; i++){  // 外层循环管趟数
        for (var j = 0;j<= arr.length - i - 1; j++){ // 里面的循环:管每一趟的交换次数
            //内部交换2个变量的值 前一个和后面一个数组元素相比较
            if (arr[j] > arr[j + 1]){
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    console.log(arr);
</script>
YUMTY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端学习-JavaScript基础语法
qq_48772498的博客
03-15 979
1.变量与运算符 变量： 变量是存储值的容器；在最新的 JavaScript 中，用let来声明可变变量，用const来声明常量（不可变） 相关规范： 驼峰命名法：如果变量是由两个以上的单词组成时，需要采用驼峰命名法，即第一个单词小写，后面单词首字母大写 不能包含数字：不能使用数字序号来命名，比如 name1，name2，func1，func2 禁止用var：在支持let和const的环境中，不允许再使用var声明变量的方式，防止代码的污染 运算符： &&：逻辑与，如果...
第课-JavaScript-语法优秀文档.ppt
11-14
在JavaScript语法基础中，变量是存储数据的基本单元。变量名需要遵循特定的规则：以字母或下划线开头，可包含数字、字母，区分大小写。声明变量通常使用`var`关键字，如`var a;`。变量可以在声明时直接赋值，如`var ...
前端学习-JavaScript基础（ES6）
weixin_51346866的博客
03-26 5239
简单了解ES6新增语法。
前端知识案例54-javascript基础语法-数组测试
qq_41632427的博客
12-05 74
前端
前端知识案例57-javascript基础语法-多维数组
qq_41632427的博客
12-05 123
前端
前端知识案例64-javascript基础语法-this
qq_41632427的博客
12-05 67
前端
前端知识案例77-javascript基础语法-成员变量
qq_41632427的博客
12-06 147
前端
前端知识案例3-javascript基础语法-什么是js
qq_41632427的博客
12-03 69
前端
前端知识案例53-javascript基础语法-数组过滤
qq_41632427的博客
12-05 87
前端
前端知识案例107-javascript基础语法-setInterval
qq_41632427的博客
12-08 65
前端
前端知识案例66-javascript基础语法-原型
qq_41632427的博客
12-05 53
前端
html5前端基础之JavaScript基础
04-06
1. **JavaScript语法** JavaScript的语法与C++和Java类似，它是一种弱类型、解释型的脚本语言。它的语句通常以分号结尾，如`var x = 10;`。块级作用域通过花括号 `{}` 定义，例如条件语句或循环。 2. **数据类型**...
JavaScript基础语法（ppt）
05-31
JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）...
JavaScript基础语法 自学笔记
10-20
JavaScript，也被称为JS，是一种广泛应用于网页和网络应用的编程语言，尤其在前端开发中扮演着核心角色。作为轻量级的解释型语言，它基于ECMAScript规范，被设计用来增强网页的交互性，使用户能够与网页进行动态交互...
web-使用web开发的聊天室项目-Vue-javascript-前端项目-附完整流程及效果展示.zip
01-19
在这个基于Web的聊天室项目中，开发者利用Vue.js和JavaScript技术构建了一个动态、实时的前端应用，旨在提供一个互动的在线交流平台。Vue.js是一个轻量级的前端框架，以其简洁的API和高效的虚拟DOM更新策略深受...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 424
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 214
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 277
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 445
对于上云api开发学习过程中的错误教训积累总结
JavaScript语法基础与应用
学习和掌握JavaScript语法对于前端开发人员来说至关重要，因为它能帮助创建动态、响应式的用户体验，并且随着技术的发展，JavaScript的应用领域也在不断扩展，如Node.js使得JavaScript也能用于服务器端开发。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值