初识JavaScript|青训营笔记

用户3598481607327
66 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第4天

JavaScript简介

JavaScript的引用

  • 行内式的js
<input type="button" value="夏天" onclick="alert('秋天')">
  • 内嵌式的js
<script>
        alert('冬天')
</script>
  • 外部的js
//my.html
<script src="my.js"></script>

//my.js
alert("春天");

JavaScript的注释

  • 单行注释 ctrl+/
<script> 
    // 这是注释内容 
    console.log("Hello,World!"); 
</script>
  • 多行注释 shift+alt+a
<script>
    /**
     * 这是注释内容
     */
    console.log("Hello,World!");
</script>

JavaScript的输入输出

  • 弹出输入框
prompt('请输入你的学号：')

image.png

  • 弹出窗口输出
alert('这是一条警告！')

image.png

  • 控制台输出
  console.log('程序员才能看到的');
  //console.info("输出一条信息"); 
  //console.warn("输出一条警告"); 
  //console.error("输出一条错误");

image.png

  • 页面输出
document.write("Hello,World!");

image.png

JavaScript基础语法

变量

//声明变量
var a;
//赋值
a=10;
//声明变量及赋值=变量的初始化
var a=10;

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

var age=19,name='迪丽热巴',address='广州';

数据类型

  1. 字符串型（String）

字符串需要使用 单引号 或 双引号 括起来。（外单内双)

常用字符串转义符如下：

转义符说明
\n换行
\\斜杠
\'单引号
\"双引号
\t缩进
\b空格
  1. 数值型（Number）

Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。

Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity。如果是非数字则得到NaN。isNaN()用来判断非数字。

  • 最大值：+1.7976931348623157e+308
  • 最小值：-1.7976931348623157e+308
  • 0以上的最小值：5e-324
  1. 布尔型（Boolean）

布尔型只能够取真（true）和假（false）两种数值。除此以外， 其它的值都不被支持。

  1. undefined型（Undefined）

在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。

var a；
console.log(a); //undefined
console.log('看到'+a);//看到undefined
console.log(11+a);//NaN
console.log(true+a);//NaN
  1. null型（Null）

Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。

var a=null；
console.log('看到'+a);//看到null
console.log(11+a);//11
console.log(true+a);//1
  1. typeof运算符

使用typeof操作符可以用来检查一个变量的数据类型。

console.log(typeof 123);
console.log(typeof "Hello,World!");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);

image.png

从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object

数据类型转换

  • 转换为String类型

方法一：变量.toString()

方法二：String(变量)

方法三：利用+""拼接字符串的方法实现转换

注意：null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错。

  • 转换为Number类型

方法一：parseInt() 把一个字符串转换为一个整数

console.log(parseInt(3.14));//3
console.log(parseInt(3.99));//3
console.log(parseInt(90px));//90
console.log(parseInt(re90px));//NaN

方法二：parseFloat() 把一个字符串转换为一个浮点数

console.log(parseFloat(3.14));//3.14
console.log(parseFloat(90px));//90
console.log(parseFloat(re90px));//NaN

方法三：使用Number()函数

方法四：利用算数运算 - * / 隐式转换

  • 转换为Boolean类型

使用Boolean（）函数，代表空、否定的值会被转换为false，如''、0、NaN、null、undefined，其余值都会被转换为true。

运算符

  1. 算数运算符
运算符说明
+加
-减
*乘
/除
%取余数
++前置自增先自增再运算，后置自增先运算再自增
--前置自减先自减再运算，后置自减先运算再自减
var e=10;
var f=e++ + ++e;//1.e++=10 e=11 2.++e=12 
console.log(f);//22

注意：浮点数的算数运算会有问题，尽量避免浮点数的运算，不要直接判断两个浮点数是否相等！！

  1. 赋值运算符
运算符说明
=直接赋值
+=、-=加、减一个数后再赋值
*=、/=、%=乘、除、取模后再赋值
  1. 比较运算符
运算符说明
大于>
小于<
大于等于>=
小于等于<=
  1. 逻辑运算符

逻辑与&& ：两侧为true结果才为true

逻辑或 ||：只要有一true结果就为true

逻辑非！：取反符

  1. 运算符优先级

634de29a003f052b39e76b1dc259613.png

条件语句

  1. if语句
if(条件表达式){
    执行语句1;
}else{
    执行语句2;
    }

if(条件表达式1){
    执行语句1;
}else if(条件表达式2){
    执行语句2;
}else{
    执行语句3;  
}
  1. switch语句
switch (表达式) {
    case 值1:
        执行语句1;
        break;
    case 值2:
        执行语句2;
        break;
    default:
        没有匹配上面的值则执行语句3...
}

循环语句

  1. while循环
while(条件表达式){
    语句...
}
  1. do-while循环
do{
    语句...
}while(条件表达式);
  1. for循环
for(初始化表达式 ; 条件表达式 ; 更新表达式){
    语句...
}

初始化表达式就是用var声明一个普通变量。条件表达式就是用来决定每一次循环是否继续执行，就是终止的条件。

  1. 跳转控制
  • break：结束最近的一次循环，可以在循环和switch语句中使用。
  • continue：结束本次循环，执行下一次循环，只能在循环中使用。

总结

太久没有学习JavaScript，已经把知识忘光了。今天复习了一下JavaScript的一些基础语法，包括JavaScript的变量、运算符、条件语句以及循环语句。

avatar
文章
阅读
粉丝