前端基础JS笔记之一（基础语法）
一.初入js
1.js的组成
ECMAscript（Javascript语法）DOM（页面文档对象模型）BOM(浏览器对象模型）
2.js的三种引入方式
行内式
<input type="submit" value="点点戳戳" onclick="alert('惊不惊喜,意不意外')">
嵌入式
<script>
alert('我是alert,我可以弹出框框')
</script>
导入式（引入）
<script src="my.js"></script>
3.注释
单行注释
//被注释的内容
多行注释
/*
我
被
注释
了
*/
4.输出和输入
输入框
prompt("提示文本")
注释：
prompt返回的数据类型为string。
输出
alert('在屏幕弹出文本')
console.log('输出文本到浏览器控制台console')
5.变量
申明：
使用var申明
var 变量名；
赋值
变量 = 值；
//隐式的申明变量，但是不推荐这样写，在函数中这样写，定义的是全局变量，可能会造成变量的覆盖。
调用
console.log(变量名)；
变量的初始化
var age = 18; //声明的同时直接赋值
注意点：
变量的覆盖，多次给同一个变量名赋值，变量只会保留最后一次。
命名规范：
可以由字母A-Z，a-z，数字，下划线和$符号组成
严格区分大小写
不能包含关键字：var for while
不能以数字开头
6.数据类型
js是弱语言类型(动态语言），变量的数据类型等于等号右边的类型。
| 类型 | 描述 |
|---|---|
| number | 数字型 |
| Boolean | 布尔类型，True ,False等价于1和0 |
| String | 字符串 |
| Undefined | 申明了，但是没有赋值，var num |
| Null | var a=null ,声明了变量a,值为空。 |
typeof判断变量的类型
<script> var input=prompt('请输入'); //prompt的返回值为字符串型 console.log(typeof input ); //输出的值为String</script>
（1）数字
进制表示
八进制 ： 数字的前面加 0
var a=010 ; //表示八进制10
十六进制 ; 数字前面加0x(数字的范围：0~9 A~F)
var b= 0xA;
几个特殊的数字：
| 值 | 类型 |
|---|---|
| Number.MAX_VALUE | 最大 |
| Number.MIN_VALUE | 最小 |
| Infinity | 无穷大 |
| NaN | 非数字 |
判断是否是非数字,isNaN
console.log(isNaN(12)); //输出falseconsole.log(isNaN('不负代码,不负卿')) //输出true
（2）字符串
都带有引号，单双引号都可以，推荐使用单引号。
转义符 \
| 值 | 描述 |
|---|---|
| \n | 换行符 n是newline |
| \\ | 斜杠 |
| \' | 单引号 |
| \ " | 双引号 |
| \t | tab缩进 |
| \b | 空格 b是blank的意思 |
获取长度length
<script>
var x='不负代码,不负卿'
console.log(x.length) //输出8
</script>
拼接字符串 +
口诀：字符相连，数值相加
字符串 + 任何类型=拼接之后的字符串
demo
<script>
console.log('你好，' + '我是程序猿') //输出 :你好,我是程序猿
console.log('你好' + 123) // 输出: 你好123
console.log('你好' + true) // 输出: 你好true
console.log(12 + 12) //输出: 24
</script>
7.数据类型的转换
(1)转换为字符串类型
.toString( )
<script>
var num = 1;
alert(num.toString());
</script>
String()
<script>
var num = 1;
alert(String(num))
</script>
.tostring() 和string()的区别：
.toString()可以除了null 和 undefined以外的数据型转换为字符串型，并且支持输出不同的进制格式。
<script>
.toString(2); //二进制
.toString(8); //八进制
.toString(10); //十进制
.toString(16); //十六进制
</script>
<script>
var num = 10;
str = num.toString(16);
console.log(ord_num, typeof ord_num); //输出 a，string
</script>
string()支持所有的数据类型转换，但是不支持输出不同的进制格式
加号拼接字符串（隐式转换）
<script>
var num = 1; alert(num+"字符串") //可以是空字符串 ""
</script>
(2)转换为数字型
parselnt(sting)
转换为整数型，小数点后面的全部舍去
<script>
var input=prompt('请输入'); //输入11.111111
console.log(parseInt(input)); //输出11
</script>>
parseFl oat(sting) ：转换为浮点型数值
Number(sting): 转换为浮点型数值
隐式转换（- * /） 利用算数运算进行转换为数值型
注释
parselnt(sting)，parseFloat(sting)，Number(sting)如果参数无法被转换为数字，则返回 NaN
<script>
var age = '12';
console.log(age-0);
</script>
js计算器
<script>
//计算年龄
var num = prompt('请输入你的出生年份')
sui = 2020-Number(num)
alert('你的年龄为' + sui)
</script>
(3)布尔值转换
Boolean()
<script>
console.log('----------都输出false-----------');
console.log(Boolean(''));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log('----------都输出true-----------');
console.log(Boolean('字符串类型'));
console.log(Boolean(111111));
</script>
二.运算符
1.算数运算符
| 符号 | 描述 |
|---|---|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 取余 |
注意点：
浮点数直接参与运算会出问题，尽量避免。
2.递增和递减
前置递增*
<script>
var num = 1;
// 前置递增: 先自加1,后返回值 ,一般和变量搭配使用
console.log(++num + 10); //等于 num = (num + 1) + 10
console.log(num); //输出12
</script>
后置递增
<script>
var num = 1;
num++;
console.log(num)
</script>
注意点：
1.前置和后置递增，如果单独使用，效果是一样的。
2.后置递增： 先用原值参与当前运算，之后在给原值加1
3.前置递增: 先自加1,后返回值(后参与运算)
<script>
var num = 1;
console.log(num++ + 1); //先返回表达式num++的原值 1，输出2
console.log(num); //后自加1 ,输出 2
</script>
小练习
<script>
var num = 1;
console.log(num);
console.log(num++ + ++num);
/*
num++ ——>num=2
++num——>num=2+1
最后输出4
*/
</script>
3.比较运算符号
| 符号 | 描述 |
|---|---|
| > | 大于 |
| >= | 大于等于 |
| < | 小于 |
| <= | 小于等于 |
| == | 等于 |
| != | 不等于 |
| === | 全等 |
4.逻辑运算符
| 符号 | 描述 |
|---|---|
| and—— && | 逻辑与 |
| or——|| | 逻辑或 |
| not—— ！ | 逻辑非 |
口诀
True && True ——> TrueTrue && False ——> False //逻辑与，一假则假True || True ——> TrueTrue || False——> True //逻辑或，一真则真
5.短路运算（逻辑中断）
逻辑与的中断：
如果表达式1为假，则返回表达式1；如果表达式1为真，则返回表达式2；
<script> console.log(0 && 123); //输出0 console.log(0 && 1+2 && 268*5877); //因为0为假造成逻辑中断,输出第一个表达式0</script>
逻辑或的中断：
如果表达式1为真,则返回表达式1，如果表达式1为假,则返回表达式2
<script> console.log(0 || 123); //输出0 console.log(123 || 456); //输出123 console.log(123 || 456 || 789); //表达式123为真产生中断,返回123</script>
小练习
<script>
var num = 0;
console.log(123 || num++); //123为真产生逻辑中断,输出123
console.log(num); //输出 0
</script>
6.赋值运算符
| 符号 | 描述 |
|---|---|
| = | 直接赋值 |
| += -= | 加减赋值 |
| *= /= | 乘除赋值 |
| %= | 取余赋值 |
7.运算符优先级
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | （） |
| 2 | 一元运算符 | ++ -- ！ |
| 3 | 算数运算符 | 先* / % 后 + - |
| 4 | 关系运算符 | > < >= <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先&&后或 |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | ， |
demo
1.
console.log(4>=6 || '人' !='阿凡达' && !(12*2==144)&&true) //输出 true
var num=10;
console.log(5 == num/2 && (2 + 2 *num).toString()==='22'); //输出True
三.流程控制语句
1.判断语句
(1)if ... else
if (条件表达式1）{
执行语句1；
}else {
执行语句块2；
}
demo
<script>
var age = prompt('多大了');
if (age >= 18) {
alert("带你去网吧偷耳机");
} else {
alert("回家写作业去")
}
</script>
（2）if ... else if ... else
if (条件表达式1）{
执行语句1；
} else if (条件表达式2){
执行语句2；
} else if (条件表达式.....n){
执行语句.....n；
} else{
执行的代码块......n+1；
}
demo
<script> var performance=prompt("输入你的成绩"); if (performance>=90) { alert("可以哦小伙子"); } else if (performance >= 80 ){ alert('再接再厉'); } else { alert('111111') }</script>
(3)三元表达式
等价于if....else...
条件表达式 ？ 表达式1 ：表达式 //如果条件为真，执行表达式1，为假执行表达式2
补零demo
<script> var time = prompt("请输入0~59"); var result = time < 10 ? '0'+time : time; alert(result);</script>
2.选择语句
switch... case ... default
注：
根据传入不同的值，执行不同代码块。
switch(表达式或变量) { case value1： 执行语句1; break; case value2： 执行语句2; break; default： 执行最后的语句}
demo
<script>var flower = prompt('输入要查询的花');switch(flower) { case '玫瑰': alert('爱情、爱与美、容光焕发，勇敢'); break; case '百合': alert('百年好合美好家庭、伟大的爱之含意，有深深祝福的意义'); break; default: alert('没有此花'）; }</script>
注意点：
1.case匹配的是全等
2.如果当前case没有写break,则会继续执行下一个case里面的执行语句。
3.循环结构
(1)for语句
语法：
for (初始化变量；条件表达式；操作表达式）{ //循环体；}//条件表达式： 控制循环//操作表达式： 用来控制条件表达式
demo1
输出1-100，等于1输出他出生了，他有一岁，等于100，输出他是人瑞，否则，输出他有N岁了。
<script>
for(var i = 1;i<=100;i++){
if (i==1){
console.log('他出生了，他有一岁');
}
else if (i==100){
console.log('他是人瑞');
}
else {
console.log('他有' + i + '岁了');
}
}
</script>
demo2
依次输入每个同学的成绩，最后计算班级平均分
<script>
var zong= prompt("请输入班级人数");
var average=0;
var sum=0;
for(var x=1; x<=zong;x++ ){
var score=prompt('请输入第' + x +'位同学的成绩');
sum+=parseFloat(score)
}
average=sum / parseFloat(zong);
alert('班级的平均分为'+average);
</script>
嵌套for
打印N行N列@
<script>
var h='';
var x=1; //控制行数
var j=1; //控制列数
for(x; x<=5;x++)
{
for(j; j<=x;j++)
{
h=h+'@';
}
console.log(h);
}
</script>
打印5行，每行5个@
var str='';
for(var x=1;x<=5;x++) //外层for控制行数
{
for(var y=1; y<=5;y++) //里层for每行打印5个@
{
str+="@";
}
str+="\n";
}
console.log(str);
倒三角
<script>
var str='';
for(var i=1; i<=10; i++)
{
for(var j=i;j<=10;j++)
{
str+="@";
}
str+="\n";
}
console.log(str);
</script>
九九乘法表
<script>
var str='';
for(var i=1;i<=9;i++)
{
for(var j=1;j<=i;j++)
{
str += j + 'x' + i + '=' + i*j +'\t';
}
str+='\n';
}
console.log(str);
</script>
（2）while语句
while （表达式条件）{
//循环体；
}
(3)do...whill语句
do {
//循环体；
}
while (条件表达式)；
//先执行一边循环体,在进行判断是否继续执行。
（4)continue和break
continue：
立即跳出当前的一次循环，继续执行剩下的代码块
break:
跳出当前循环，不执行剩下的代码块
参考来源：黑马程序员pink老师讲课视频
浙公网安备 33010602011771号