前端2026年3月27日
javascript基础入门笔记
久流
javascript基础部分,从基础变量到逻辑运算,入门可以参考一下。
javascript
// alert(‘#’) 弹出对话框 alert(‘hello world’)
/* 文档输出内容 */document.write(‘我是谁?’) document.write(‘标题’)
//可以直接使用html内容 //控制台打输出 给程序员调试用的 直接输入log 点第二个也行 console.log(‘看看对不?’)
//prompt(‘#’) 弹出一个有输入框的警示对话框 // prompt(‘请输入年龄:’)
//声明变量 let var已经淘汰了/* let age 声明年龄变量 age = 未填写
//变量赋值为18 */ let age = prompt(‘请输入年龄:’), username = ‘吴彦祖’
//声明的同时直接赋值 变量的初始化 ‘,’可以声明多个变量 //age = 19 //变量会直接覆盖 所以输出是19 同一个变量不能声明2次 var声明2次不会报错按最后一次声明来 //最好一行声明一个变量 等后面会打包 console.log(‘名字:’, username, ‘年龄为:’, age);
//控制台打印变量 document.write(‘名字是:’, username, ‘<br>’) document.write(‘年龄是:’, age, ‘<br>’) / / 变量交换 要求变量1与变量2 数据互换 //声明变量 let num1 = 10 let num2 = 20 document.write(‘交换前:’, num1) document.write(num2, ‘<br>’)let temp = num1
//设置一个变量 作为临时用的 后面用不到引擎会自动销毁这个变量//吧num2的变量给num1 num1 = num2 num2 = temp document.write(‘交换后:’, num1)document.write(num2, ‘’)
/* 关于变量 变量的名字不能为一些特殊字符 或者js内置的一些单词 比如 let var if for 等 只能用下划线 字母 数字 $组成 且数字不能开头 字母是区分大写小写的 比如 A和a 是不同的变量 */js对应的html css页面:
html
<!DOCTYPE html><html lang="zn_ch">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css"></head>
<body class="box"> <!--<button onclick="alert('点我干啥') //内部js书写位置">点我</button>--> <script src="style.js"> /* js一定要放到body最底部 顺序是先加载完html然后js抓取 行内js位置 script里面有src的话 中间不要写内容 不执行 */ alert('我不会被加载') // 单行注释 ctrl + / /* 多行注释 : shift alt + A */ /* js没必要加分号 js引擎会自动加载 */ </script></body>
</html>style.css
css
.box { color: rgb(47, 115, 163);}关于var的缺点
var声明现在已经过时了,目前新的都用let来声明 只有在老版程序中会出现。
var声明的缺点:
- 可以先使用,再声明(不河里)
- var声明过的变量可以再声明一边(不河里)
- 不如变量提升,全局变量,没有块级作用域等。
javascript
// 数组示例let username1 = [12, 13, 14, 15, 16, 17]; // 数组是有序的,每个都有一个固定的编号 (0,1,2,3,4,5)document.write(username1 + '<br>'); // 使用 <br> 换行console.log(username1[1]); // 打印第二个数据 13
// 数组长度console.log(username1.length); // 索引号是从0开始,数组长度从1开始
// 常量示例const Chang = '常量'; // 常量声明的时候必须赋值console.log(Chang); // 输出常量
// 数据类型示例let r = prompt('输入圆的半径:');let re = 3.14 * r * r;document.write('圆的面积:' + re + '<br>'); // 使用 <br> 换行
// 字符串示例let ziFu = "test";let ziFu1 = 'test';let ziFu2 = `test`;document.write(ziFu + '-' + ziFu1 + '-' + ziFu2 + '<br>'); // 使用 <br> 换行
// 模板字符串示例let age = 20;document.write(`我今年${age}岁了<br>`); // 使用 <br> 换行
// 布尔型示例let chengNian = true;console.log(`布尔类型变量输出:${chengNian}`);
// 未定义型示例let unUmnm;console.log(`未定义类型变量输出:${unUmnm}`);
// null 示例let obj = null;console.log(`null类型变量输出:${obj}`);
// 类型检测示例let jianCe = 123;let jianCe1 = '中文';let jianCe2 = false;let jianCe3 = null;let jianCe4;document.write(typeof jianCe + '-'); // 类型: numberdocument.write(typeof jianCe1 + '-'); // 类型: stringdocument.write(typeof jianCe2 + '-'); // 类型: booleandocument.write(typeof jianCe3 + '-'); // 类型: objectdocument.write(typeof jianCe4 + '<br>'); // 类型: undefined
// 隐式转换示例document.write(1 + 1 + '<br>'); // 2个都是数字,所以结果是2document.write('文字' + 1 + '<br>'); // 其中有一个是字符串,所以将后面的1转换为字符串,结果是:文字1document.write(2 - '2' + '<br>'); // - * / 等都会把字符串转换成数字类型,这里将字符串的2转换成数字2console.log(+'123'); // +号可以将数据转换成数字型
// 显式转换示例let shuJu = '123';console.log(Number(shuJu)); // 强制转换成数字型,如果有非数字内容会显示NaN,NaN也是数字类型只不过代表非数字console.log(typeof Number(shuJu)); // 输出为number
// 示例let nianXin = Number(prompt('你的年薪')); // 变量数据为数字型let nianXin1 = +prompt('你的年薪'); // 使用 +号转换为数字型
// parseInt 和 parseFloat 示例console.log(parseInt('100.123px')); // 结果是100,只保留整数console.log(parseFloat('100.123px')); // 结果是100.123,保留小数
// 练习:输入2个数,计算二者的和并打印到页面let jiSuan = parseFloat(prompt('输入第一个数:')); // 用户输入转化为数字型,过滤其他字符let jiSuan1 = parseFloat(prompt('输入第二个数:'));alert(`输出的结果是${jiSuan + jiSuan1}`); // 输出相加结果关于小数的精度问题:
javascript
// 关于小数的精度问题 先演示一下解决let shu1 = 0.1 + 0.2console.log(shu1); //答案是0.30000000000000004 因为小数点的2进制计算很麻烦有精度问题//解决方法let shu2 = 0.1 * 10 + 0.2 * 10shu2 = shu2 / 10console.log(shu2); //答案是0.3javascript
/* 赋值运算符 使用赋值运算符简化代码 它是对变量进行赋值的运算符 叫赋值运算符 */// 赋值运算符: += -= *= /= %= 比如以前我们给变量加1是这样写的:let Num = 1Num = Num + 1console.log(Num)
//现在用赋值运算符有更简单的写法:let Num1 = 1//采用赋值运算符Num += 1 // 赋值运算执行过程 将等号右边的值赋值给左边 要求左边必须是一个容器, -= *= /= %=依次类推。javascript
/* 一元运算符 可以根据表达式的个数分为 一元,二元,三元运算符 */
// 例: 二元运算符:let BV = 10 + 20//一元运算符 例: 正负号/* 自增: 符号 ++ 是让变量的值加+1 减号(--)就是让变量的值-1 */// 使用场景: 经常用来计数 比如进行10次操作 用它来计算进行了多少次
// 自增运算符的用法 前置自增:let num = 1++num //让num值加1变成2console.log(num)//后置自增:let i = 1i++console.log(i)
/* 前置自增和后置自增单独写是没有区别的前置与后置如果参与运算了就有区别了 */let I = 1console.log(++I + 1) //结果是3let A = 1console.log(A++ + 1) //结果是2 此时的A是1 先和1相加 先运算完i再自加 (了解一下就行)javascript
//比较运算符 使用场景:比较2个数的大小 是否相等/* 运算符种类及作用> 左边是否大于右边< 左边是否小于右边>== 左边是否大于等于右边<== 左边是否小于等于右边== 左右2边值是否相等=== 左右2边是否值和类型都相等!== 左右2边是否不全等比较运算符结果为Boolean类型 只会得到true和false */
console.log(3 > 5);// falseconsole.log(3 >= 3);// trueconsole.log(2 == 2);// trueconsole.log(2 == '2');// true 比较运算也有隐式转换console.log(2 === '2');// false 双等只判断值 三等要数据和值都一样才行 (实际开发中强烈推荐用三等)console.log(undefined === null); //false 三等可以避免很多问题console.log(NaN === NaN); //false NaN不等于任何 包括它自己console.log(2 !== '2'); //true// 单等于是叫赋值 不要记错console.log('--------分割线---------');
// 比较运算符 字符串比较,是比较的ASCII码 用的比较少 了解一下就行// c:UsersROGAppDataRoamingTencentTIMTempHK]DY6O([E51@DLJW)7MWY1.pngconsole.log('a' < 'b'); //trueconsole.log('aa' < 'ab'); //true 是第一个a一后面第一个比较 后面的a和后面的b比较 第一位一样就比较第二位console.log('我' > '他'); //true 中文根据拼音比较javascript
// *逻辑运算符 经常用来解决多重条件判断
/* 逻辑运算的种类&& 名称:逻辑与 日常读法:并且 特点是2边都为true结果才为true|| 名称:逻辑或 日常读法:或者 特点是2边有一个为true就为true! 名称:逻辑非 日常读法:取反 特点是true变成false false变成true */
// 逻辑与 一假则假console.log(true && true); //trueconsole.log(false && true); //falseconsole.log(3 < 5 && 3 > 2); //trueconsole.log(3 < 5 && 3 < 2); //falseconsole.log('--------分割线---------');// 逻辑或 一真则真console.log(true || true); //trueconsole.log(false || true); //trueconsole.log(false || false); //falseconsole.log('--------分割线---------');// 逻辑非 取反 (是一元运算)console.log(!true);console.log(!false);
//例let shu = 6console.log(shu > 5 && shu < 10); //结果为truejavascript
//做一个案例//需求:用户输入一个数字 判断能被4整除但是不能被100整除页面弹出true 否弹出false
//用户输入let num = prompt('请输入一个数字')//弹出结果alert(num % 4 === 0 && num % 100 !== 0)
// 运算符优先级// 1 小括号 ()// 2 一元运算符 ++ -- !// 3 算数运算符 先*/ 后 +-// 4 关系(比较)运算符 < > >= <=// 5 相等运算符 == != === !==// 6 逻辑运算符 先&& 后||// 7 赋值运算符 =// 8 逗号运算符 ,
//表达式和语句的区别//表达式是可以求值的代码 js引擎会计算出一个结果 比如:/* x = 73 = 4num++ *///语句是一段可以执行的代码 比如prompt()//可以弹出一个输入框 还有 if for循环等
//表达式可以求值所以可以卸载赋值语句的右侧 而语句不一定有值 所以比如alert()等语句不能用于赋值
/* 分支语句 *///程序三大流程控制语句 之前我们写的代码 写几句就往下执行几句 叫顺序结构//有的时候根据条件选择执行代码 这种叫分支结构//比如代码1 满足条件 可以执行代码2 再执行代码3 如果不满足条件 则直接执行代码3//某段代码被重复执行叫循环结构
/* 分支语句包含:if分支语句三元运算符switch语句 */
//if分支分为单分支 双分支 多分支
/*单分支使用语法 if (条件) { 满足条件要执行的代码}只有括号里面的条件为true时 进入大括号里面执行代码小括号里面的结果若不是布尔型的时候 发生隐式转换为布尔类型如果大括号里面只有一个语句 大括号可以省略 但是不提倡这么做 */if (true) { console.log(`执行语句`);}
if (3 > 5) { //转化false console.log(`执行语句`);}if (2 === '2') { //false console.log(`执行语句`);}//除了0 所有数字都为真 小数和负数都为真 除了空字符串 其他的都为真if (2) { console.log(`执行语句`);}评论
0 个评论在此篇文章
暂无评论