文章目录
前言
作为学习前端的小伙伴们,精通JavaScript是学习前端三件套中必不可少的,本文介绍JS入门的一些基础知识
提示:以下是本篇文章正文内容,下面案例可供参考
一、JavaScript是什么?
- JavaScript简称JS,是一种解释性,单线程的编程语言,是前端最核心的一种语言。JavaScript的出现是设计者们为了改善网页的用户体验。
- JavaScript=ECMAScript+文档对象模型(Document Object Model)+浏览对象模型(Browser Object Model)
- ECMAScript为JavaScript的核心,最标准的最基础的就是es3.0,现在已发布了ECMAScript的第六版。目前支持的主流浏览器有IE,Chrome,Firefox,Opera,Safari。
- DOM通过JavaScript操作HTML,各大浏览器规则基本相同。
- BOM通过JavaScript操作浏览器,各大浏览器都不兼容,不过开发比例小。
- 要在浏览器中使用JavaScript,那么JavaScript就必须听从BOM的调遣,遵守当前浏览器的规则。JavaScript可以进行增删改查,来进行一些绚丽的动作和完成一些逻辑上的功能。
二、JS引入方式
1.行内式
代码如下(示例):
<button type="button" onclick="alert('button弹出')">点击此按钮</button>
直接在body里加入即可
2.内嵌式
代码如下(示例):
<script type="text/javascript">
alert("2022年");// alert是弹出警告
//此处可编写js代码
</script>
3.外链式
代码如下(示例):
<script type="text/javascript" src="js/test.js">
//注意:此处不能写js代码
</script>
此方式需外部引入js文件
三、js输出方式
1.弹框输出
alert("弹框警告");
2.控制台输出
console.log("控制台日志输出");//一般用于代码调试
//下面几种了解即可:
console.error("控制台错误输出");
console.info("控制台信息输出");
console.warn("控制台警告提示");
console.log(`If you want something done right, do it yourself.`);
//反斜杠支持换行输出
3.文档输出
document.write("文档输出");
document.write("<h2 style='color: red;'>文档输出2</h2>");
//支持编写HTML代码,注意属性名要用单引号
四、变量
1.变量声明
var a;
var b,c;//先声明再赋值
a=6;
b=7;
document.write("a=",a);// 变量输出不要加"";
document.write("c=",c); // 输出undefined,因为c只声明未赋值
document.write(d);// 报错d is not defined,变量d没有声明
2.变量初始化
var m=26;//初始化:变量声明并赋值
var d,e=27;//注意:d未赋值,e是27
var d=68,e=27;//这样写是d,e都赋值
3.变量数据类型
- 基本数据类型:number(数值),string(字符串),boolean(布尔true/false),null(空值),undefined(未定义)
- 引用类型/复合数据类型:数组(Array),函数(function),object(对象)
- 变量命名规则:由字母、数字、_、$组成,不以数字开头,不能是关键字或保留字
var a=1;
var str="16";
var str2="true";
var bool=true;
var b=null;
var d;
// typeof()判断数据类型
console.log(typeof(a));//number
console.log(typeof(str));//string
console.log(typeof(str2));//string
console.log(typeof(bool));//boolean
console.log(typeof(b));//object
console.log(typeof(d));//undefined
console.log(typeof(NaN));//number
3.JS数据类型转换
-
其他类型—>字符串
var a=true; console.log(a+1);//2 a=a+"12";//第一种:加号拼接字符串 console.log(a);//true12 b=String(b);//第二种:用String()函数转换
-
其他类型—>数值
var str1="hello"; var str="11.5"; //*1 console.log(str*1); console.log(typeof(str*1)); // Number() console.log(Number(str)); console.log(typeof(Number(str))); //parseInt(),转换为整型,向下取整 console.log(parseInt(str)); //parseFloat(),转换为浮点型 console.log(parseFloat(str));
-
其他类型—>boolean
console.log(!!1); //true console.log(!!"hello"); //true console.log(!!0); //false console.log(!!""); //false console.log(!!3); //true
五、运算符
1.算术运算符
四则运算符:+ - * / ,%(余) ++ – +=
var a=25;
var b=10;
var c=a+b;
console.log(c);//35
console.log(a%b);//结果为5,a%b:a/b的余数 25/10=2...5
console.log(c%=5);//0
//c=c%10;==>c%=10
//c=c-10;==>c-=10
//i++,++i,单独使用没有区别
//i++,++i,不单独使用,就近原则取值
var i=10;
i++;
console.log(i);//11
var j=++i;//上面i=11,i要先进行加1再赋值给j
console.log(j);//12
2.比较运算符
比较运算符:>,>=,<,<=,== ===,!=
比较的结果:boolean值
console.log(3<=3); //true
console.log(3>=4); //false
console.log(2!=2); //false
console.log(null==0);//false
console.log(null!=0);//true
console.log(true==1);//true
console.log(true!=1);//false
console.log(3==3);//true
console.log(3===3);//true
//==:只比较结果
console.log(true==1); //true
console.log(false==0); //true
//===:同时比较结果和类型
console.log(true===1); //false
console.log("1"==1); //true
console.log("1"===1); //false
console.log(undefined==null); //true
console.log(undefined===null); //false
3.逻辑运算符
&& || !,结果为boolean值
//&&(与):全真为真,一假即假
console.log(true&&true);//true
console.log(true&&false);//false
console.log(false&&false);//false
//||(或):一真即真,全假为假
console.log(true||true);
console.log(true||false);
console.log(false||false);
//!(非):取反
console.log(!true);//false
console.log(!false);//true
console.log(!3);//false
------运算符优先级:
! > 算术运算符 > 比较运算符 > && > || > =(赋值运算符)
下面的案例 大家可以自行试一下(遵循运算符优先级):
console.log(!(3+4*5)>6-8&&4+6>2*3==true); //true
console.log(false>-2&&10>6==true); //true
console.log(!3+4*5>6-8&&4+6<2*3); //false
end
以上是JS最基础的知识,大家可以多加练习,后期会持续更新哈~~