JS基础笔记1:
引入方式:
行内式:
<a href="javascript:alert('新年快乐~')">点我有惊喜呦~</a>
嵌入式:
<script>
alert("生日快乐");
</script>
使用嵌入式,建议件script标签放在body标签后,即打开一个html文件先加载样式,在加载内容,最后加载js
外链式:
<script src="./demo01.js"></script>
/* src属性内填js文件路径*/
注释:
// 单行注释(CTRL+?)
/* 多行注释(alt+shift+a) */
弹窗:
//1. 弹窗(确定)
//window.alert("happy birthday!");
//alert("happy birthday!")
//2. 弹窗(确定、取消)
// window.confirm("123456");
// confirm("123456");
//3. 弹窗 (输入、确定、取消)
// window.prompt("shuru");
// prompt("shuru");
//4. 控制台输出
// console.log("123456789");
//5.网页中
// document.write("123456");
// document.write("<h1>这是标题部分</h1>");html标签可被识别。
// 在document.write中要显示多个内容,可以使用+进行拼接
//js的执行顺序:先加载样式(css),再显示内容(html),再加载功能(js)
常量:
字面量
// alert(100);
// 圆的半径 6.8
// 计算圆的周长 周长 = 2πr
// alert(2*3.14*6.8);
// 计算圆的面积 面积 = πr²
// alert(3.14*6.8*6.8);
// document.write(2*3.14*6.8);
变量:
作用:存储数据
声明:var 变量名;let 变量名;
/*
声明/定义变量格式: var关键字 变量名;
var关键字:可重复定义变量,可以变量提升
声明/定义变量格式: let关键字 变量名;
let关键字:不可重复定义变量,不能做变量提升
*/
// 变量赋值方式
// 1. 直接赋值
// var num = 2000;
// alert(num);
// 2.先声明再赋值
// var num;
// num = 50;
// 3.变量赋值变量
// var num = 10;
// console.log(num);
// var age = num;
// console.log(age);
// 修改变量值,重新赋值
// 同时声明多个变量
/* var x = 10,
y = 20,
z = 30;*/
//undefined 未定义(变量未声明或已声明但是未赋值)
// 全局变量(可以用在当前页面的任何地方)
// 局部变量(函数里定义的变量:在函数执行完后自动销毁)
命名规范:类似于java,常用小驼峰命名法。
数据类型:
基本数据类型:
字符串string
/* 基本数据类型 */
// 字符串string
var str = "星期四";
// typeof(变量)
// console.log(str);
// console.log(typeof(str));
console.log(str,typeof(str));
// 字符串中的转义符:反斜杠\
数字类型number
// 数字类型number
var num = 10;
console.log(num,typeof(num));
特殊的数字类型:
NaN 是一种特殊的数字(代表该值不是数字)
Infinity 正无穷(数值/0)
布尔类型boolean(true,false)
// 布尔类型boolean(true,false)
var bol = true;
console.log(bol,typeof(bol));
var bol = false;
console.log(bol,typeof(bol));
var bol = 20<10;
console.log(bol,typeof(bol));
null类型:检测的数据类型是object
// null类型:检测的数据类型是object
var x = null;
console.log(x,typeof(null));
undefined类型
// undefined类型
var y;
console.log(y,typeof(y));
数据类型转换:
自动转换:
// 自动类型转换
// let oldData = "10" * 2;
// let oldData = "10" * "2";
// let oldData = false - 1; //false是0 true是1
// let oldData = null - 1;
// let oldData = undefined + 1; //NaN是一种特殊的数字(代表该值不是数字)
// let oldData = false - true;
// let oldData = 200 / false; //Infinity
// console.log(oldData,typeof(oldData));
// var x = 123;
// x = "字符";
// x = true;
// console.log(typeof(x));
强制转换:
将其他类型转换成number类型
1. Number(value) value代表要转换的值
2. parseInt(value) 将value值转换为number类型并取整
3. parseFloat(value) 将value值转换为number类型并返回小数
/* =====================Number(value)======================= */
// 将string类型转换成number类型
// let oldData = "123";
// console.log(oldData,typeof(oldData)); //number
// let newData = Number(oldData);
// console.log(newData,typeof(newData));
// 将boolean类型转换为number类型
// let oldData = false; //true-->1 false-->0
// console.log(oldData,typeof(oldData));
// let newData = Number(oldData);
// console.log(newData,typeof(newData));
/* ===================parseInt(value)====================== */
// let oldData = "3.14";
// console.log(oldData,typeof(oldData));
// let newData = parseInt(oldData);
// console.log(newData,typeof(newData));
// let oldData = false;
// let newData = parseInt(oldData);
// console.log(newData,typeof(newData)); //NaN
// let oldData = 10/3;
// console.log(oldData);
// let newData = parseInt(oldData);
// console.log(newData,typeof(newData));
-
parseFloat(value)
/* =================parseFloat(value) ================= */ // let oldData = "123.123"; // let newData = parseFloat(oldData); // console.log(newData,typeof(newData)); // let oldData = "123"; // let newData = parseFloat(oldData); // console.log(newData,typeof(newData));//123 // let oldData = "123.1hello"; // console.log(oldData,typeof(oldData)); // let newData = parseFloat(oldData); // console.log(newData,typeof(newData));//123.1 let oldData = "hello123.1"; console.log(oldData,typeof(oldData)); let newData = parseFloat(oldData); console.log(newData,typeof(newData));//NaN number
将其他类型转换成string类型
// let oldData = true; // let newData = String(oldData); // console.log(newData,typeof(newData)); // let oldData = 123; // let newData = String(oldData); // console.log(newData,typeof(newData)); // let oldData = 20/6; // let newData = String(oldData); // console.log(newData,typeof(newData)); /* 连接运算符+ */ // let x = "hello" + 2022; //字符串和数字 // console.log(x,typeof(x)); let x = 10 + 20 + "hello" + "world"; console.log(x,typeof(x)); let y = true + "18"; //字符串和布尔值 console.log(y,typeof(y)); let z = 10 + +"2022"; // let z = 10 + 2022; onsole.log(z,typeof(z));
将其他类型转换为布尔类型:
/* Boolean(value) --->一般情况下转换的结果都为true 特殊情况(结果为false): "" 0 undefined null NaN false */ // let oldData = 3.14; // let newData = Boolean(oldData); // console.log(newData,typeof(newData));//true // let oldData = "将字符串转换为布尔值"; // let newData = Boolean(oldData); // console.log(newData,typeof(newData));//true // let oldData = ""; // let newData = Boolean(oldData); // console.log(newData,typeof(newData));//false // let oldData = 0; // let newData = Boolean(oldData); // console.log(newData,typeof(newData));//false // let oldData = undefined; // let newData = Boolean(oldData); // console.log(newData,typeof(newData));//false // let oldData = null; // let newData = Boolean(oldData); // console.log(newData,typeof(newData));//false // let oldData = NaN; // let newData = Boolean(oldData); // console.log(newData,typeof(newData));//false let oldData = false; let newData = Boolean(oldData); let changeData = !newData; // console.log(newData,typeof(newData));//false console.log(changeData); //true
运算:
var x = 123;
var y = "123";
var z = 456;
// =单等 代表赋值 ==双等 比较值 ===全等 比较的是值和数据类型
// !=不相等(==的取反:比较值) !==不全等(===的取反:比较的值和数据类型)
算术:
// 算术运算符 + - * / %
var x = 20;
y = 6;
// z = x + y;
// console.log(z);
// console.log(x,y); //打印x和y两个变量
// 加法运算
// console.log(x + y);//对两个变量进行运算
// 减法运算
// console.log(x - y);
// 乘法运算
// console.log(x * y);
// 除法运算
// console.log(x / y);
// 取模运算% (计算余数)
console.log(x % y);
/*
自增、自减运算符:在自身的基础上+1或-1
++x:先运算再赋值
x++:先赋值再运算
--x:先运算再赋值
x--:先赋值再运算
*/
/* var x = 10;
console.log(++x); //11
console.log(x++); //11
// x = 12
console.log(--x); //11
// x = 11
console.log(x--); //11
// x = 10
console.log(x++);//10
// x = 11
console.log(x);//11 */
/*
var y = 10;
++y; //y=11
console.log(y++);//11
// 运算后y=12
y++; //12 运算y=13
console.log(--y);12
*/
/* var x = 10;
var y = 20;
// 11+20=31
var z = ++x + y++;
console.log(z);
console.log(y); */
var x = 10,y = 20;
var z = ++x + y++;
console.log(z); //31 x = 11 y = 20
// y = 21 x = 11 z = 31
z = z + x++ + ++x;
// z = 31 + 11 + 13
console.log(z); //55
逻辑运算:
// &&短路与 两边都为真 结果为真
// var z = false && false;
// console.log(z);
// var z = (10 > 5) && (20 < 10);
// console.log(z);
// ||短路或 其中一个为真,则为真
// var z = false || true;
// console.log(z);
// var z = (10 < 5) || (20 < 10);
// console.log(z);
// !取反
// var z = !(10<5);
// console.log(z);
三元运算:
// 三元运算符
20 < 10 ? console.log("20小于10"):console.log("20不小于10");
拼接运算:
// 字符串拼接
/* var str = "Hello";
var st = "World";
// var s = str + st;
// console.log(s);
console.log(str + st);
console.log(str,st); */