概述
目录
文章目录
前言
一、javaScript是什么？
二、js引入方式
1.行内式
2.内嵌式
3.外链式
三、js的输出方式
四、js数据类型
1.基本数据类型：
1.数据类型的转换：
2.运算符：
2.运算符的优先级：
3.三元表达式
五、js三大控制结构
1.选择结构
总结
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文
前言
javaScript在前端是非常重要的语言之一，是程序思维的入门级语言，具有一定的逻辑性灵活性以及简洁性，虽然是弱语言，但是它目前还是非常方便的在前端中。
提示：以下是本篇文章正文内容，下面案例可供参考
一、javaScript是什么？
其实js是一种直译式的脚本语言，由于以前的网速比较慢，什么数据都需要通过后端来判断，这也让用户常常发生注册一个账户需要好长时间来判断，但是js可以避免这个问题，通过js判断后，可以让用户以正确的格式发送给后端，对于大前端来所，是一门必不可少的语言。
二、js引入方式
1.行内式
代码如下（示例）：
<div onclick="alert('你很帅')">我帅不帅？</div>
这里给div一个点击事件用 alert弹窗，发出你很帅。alert弹窗，现在只需要了解
2.内嵌式
代码如下（示例）：
<div id="active">我帅不帅？</div>
<script type="text/javascript">
active.onclick=function(){
alert('你很帅');
}
</script>这就是内嵌式，引入方式和css差不多，自己脑补一下。
3.外链式
代码如下（示例）：
<body>
<div id="active">我帅不帅？</div>
<script type="text/javascript" src="./js/memeda.js"></script>
</body>
//下面为./js/memeda.js 文件内容
active.onclick=function(){
alert('你很帅');
}声明一点，js最好写在body最后，因为js在前端是具有功能性的，让浏览器先加载html+scc，最后再加载js 文件。
三、js的输出方式
1.alert('');这种为弹窗方式
2.console.log(''):控制台输出
3.document.write(``):文档输出
console.log()；运行的时候需要在控制台才能看到它（按f12）
变量命名规则:字母、数字、下划线、$组成，不以数字开头，不能是关键字或保留字。
alert('你真帅'):弹窗警告
console.log('你帅吗？'):控制台输出
document.write('是的'):文档输出四、js数据类型
1.基本数据类型：
Number、String、boolean、null、undefined
number 数，string字符，boolean布尔值输出结果true/flase，null空值，undefind未定义。
js声明变量要比其它语言要简单的多，直接一个var ；
我们可以使用typeof来查看我们的定义的为什么数据类型；
<script type="text/javascript">
var num=12;
var EDG;
var sub=prompt("你好");
console.log(typeof(num));
console.log(typeof(sub));
console.log(typeof('美女'));
console.log(typeof(true));
console.log(typeof(0));
console.log(typeof(RNG));
console.log(typeof(EDG));
</script>1.number
2.string
3.string
4.boolean
5.number
6.undefined
7.undefined
这里你会发现，prompt（）弹窗输入，你随便输入任何东西，它的类型都是string；所以我们用它来输入数字的时候，一定要把它转换成number 的形式，以免在日后的过程中出现幺蛾子。
//3.13更新中
1.数据类型的转换：
a. 转换为数字类型；
*1，Number()，parseInt()，parseFloat()我们可以使用这些手段来实现数字类型的转换。
One example will suffice to illustrate the point.
<body>
<script type="text/javascript">
var a='2';//定义一个字符2
console.log(typeof(a));//string
//
console.log( typeof(a*1));
console.log( typeof(parseInt(a)));
console.log( typeof(parseFloat(a)));
console.log( typeof(Number(a)));
</script>
</body>点开f12，我们在控制台看到结果，只有第一个是string，其余的四个数据类型都是number
b.转换成字符串
首先我们先了解，所有的字符串拼接方法是 ：+'我是一个字符串'；
我们可使用+"" String() 的方法来转换成字符串；
One example will suffice to illustrate the point.
var a=1;
console.log(typeof(a));// number;
console.log(typeof(a+''));//string;
console.log(typeof(String(a)));//string;参考我写的注释，大家也来验证一下。
c.转换为boolean （布尔值）；
我们只需要在前面加上！！就可以转换啦，原理和上面的一样哦， 代码先自己打一下，不放星可以参考下面的哦；
var num0=0; //number
var num1='1'; //string
var num2; //undefind
console.log(typeof(!!num0));
console.log(typeof(!!num1));
console.log(typeof(!!num2));只要加了！！就变成布尔值类型啦；
2.运算符：
a.算数运算符；这个大家都非常熟悉，+,-,*,/,%,加减乘除取余；
这里我只给大家举一个取余数的例子； a%b 的过程就是 a/b......c，这里答案就是c
即 a%b=c；
var a=6;
var b=4;
var c=a%b;
console.log(c); //2；控制台输出结果为2；
b. 比较运算符
>、>=、<、<=、==、===、!=，
比较运算符来进行运算时，结果为布尔值，正确为true 不正确为 false；
百闻不如一见，百见不如一干，在座的’键盘侠们‘ 好不赶快敲起来？
console.log(2>3); //false;
console.log(5<6); //true;
console.log(5>=3);//true;
console.log('1'==1);//true; 因为==只是数值相等 === 这个是严格相等
console.log('2'===2);//false
//true 这里别看少个= 其实 ！= 和 == 才是相反关系
//这里的 === 和！== 是相反关系 ， 大家不要搞错
console.log('1'!==1); 比较运算符也是我们日后所用到的，我们可不必在这上面花太多的时间，因为日后的事情足够你熟练它。
c.逻辑运算符
&& 是并且，||是或 ，！为非。上面的 ！= 就是不等于 也是取反的意思，大家可先从其他博客中搜寻类型的题目先绕绕弯， 学过数字电路的同学 这就是日常所说的与或非。
举个例子：
1.我和你 只要有一个人开车 我们就可以走了 （我开车==我们俩走||你开车===我们俩走)
2.我和你 两个人一起才能把它抬起来 （我抬&&你抬）
3.我只要不是女的 就可以进男澡堂 （我！=女）
2.运算符的优先级：
! > 算术运算符 > 比较运算符 > && > || > =(赋值运算符号)
记住这个优先级 我添加个链接 等到不忙再举例子（超链接）；
3.三元表达式
表达式1>表达式2?值1:值2
上面是一个抽象的表达式，我来分析一下：
如果 我的钱（表达式1)>你的钱（表达式2）？我请客（值1）：你请客（值2）
连贯一下 如果我的钱比你多 我请客 否则你请客；（当然了我是个穷b，无论如何你都要请客）
看一下代码；
var a='我请客';
var b='你请客';
var c=20;
var d=40;
console.log(c>d?a:b);答案那必然是你请客 呀；（想请客的朋友联系我）
五、js三大控制结构
1.顺序结构：自上而下；
2.选择结构；
3.循环结构；
顺序结构大家都明白，这里重点讲解一下选择结构和循环结构（学完以后别忘了去博客里搜这种类型的题目哦）烧烧脑子还是非常有必要的，这好比给你个工具让你建一个工程；（要是嫌弃我废话太多可以评论一下，问题也是（前面的问题肯定少，后面的问题就多了。）
1.选择结构
a.简单的if-else。结构：
1.if（满足的条件）{满足条件执行的内容}
2.if（满足的条件）{满足条件执行的内容}else{不满足条件所执行的内容}
3.if（满足的条件1）{满足条件1所执行的内容}else if(满足条件2【这里自动不满足条件1】）{满足条件2所执行的内容}else{不满足上面的任何条件所执行的内容}
这中3的类型 中间的else if 可以无限加 取决你需要多少个；
请看题，请输入一个整数，如果能被7整除 就输出我爱你；否则就输出 还是爱你的呀；
var num=parseInt(prompt('请输入一个数'))
if(num%7==0){
document.write('我爱你');
}else{
document.write('还是爱你的呀');
}那必然无论如何都是爱你；
4.switch（num)：适用于等值条件；
例题以及答案：
<script type="text/javascript">
var a=parseFloat(prompt("请输入消费金额"));
var b;
var c,d;
if(confirm("是否参加优惠够换活动")){
alert(`1,满50，加2元换购百事可乐<br>
2,满100元，加3元换购500ml可乐一瓶<br>
3,满100元加10块给10斤面粉<br>
4，满200，加10给一个苏泊尔炒锅
5，满200，加20元换购爽肤水
0，不换购`);
var d=parseFloat(prompt("请输选择优惠活动"));
switch(d){
case 1:
document.write("获得一瓶饮料");
c=1;
break;
case 2:
document.write("获得一瓶可乐");
c=2;
break;
case 3:
document.write("获得5公斤的面粉");
c=3;
break;
case 4:
document.write("成功换购一个苏泊尔炒菜锅");
c=4;
break;
case 5:
document.write("成功换购一个偶蓝牙爽肤水");
c=5;
break;
case 0:
document.write("不换购");
c=6;
break;
}
if(c=5&&a>200){
a=a+20;
}else if(c=4&&a>200){
a=a+10;
}else if(c=3&&a>100){
a=a+10;
}else if(c=2&&a>100){
a=a+3;
}else if(c=1&&a>50){
a=a+2;
}else{
a=a+0;
}
}
document.write("本次消费"+a+"元")
</script>2.循环结构
1.while：先判断后执行，可能一次都不执行
2.do-while:先执行再判断，至少执行一次
3.for:适用于循环次数固定的操作
4循环控制语句
break:跳出循环
continue:结束本次循环继续执行下一次循环
循环的三要素：
1，循环变量初始化（var number=?);
2,循环条件（number 满足时候进入循环）
3，循环变量的改变（变动变量让其不满足条件跳出循环）
（1）while循环结构：先循环变量初始化 while(循环条件){循环体+循环变量改变}；
以前看别人发的c程序的表情包666，这次我们也用js语言写一个
var i=0;
while(i<3){
document.write("6");
i++
}结果666，分析一下这个循环，当i=0时输出一个6，1时在输出一个6，2时再输出一个6，等到3时，不符合条件i<3跳出循环了，那就循环结束了。
（2）do-while循环结构：先循环变量初始化 do{循环体+循环变量改变}while（循环条件） 这种结构特性必然会导致即使循环条件初始不满足，但是也会先执行一次，这是结构的特点。
我们先试一下；
var i=1000;
do{
document.write("6");
i++
}while(i<3)输出结果为：6； 令var i=3； 其他不变就又可以输出666了；
（3）for循环结构：for(循环变量初始化；循环条件；循环变量的改变）{循环体}
虽然和while 的结构不太一样，但是运行的顺序是一样的，先循环变量初始化（只运行一次）,根据循环条件进入循环执行循环体，循环一次改变一次循环改变，最够不满足条件跳出循环。
举个例子：
for(var i=0;i<6;i++){
document.write("我爱你<br />");
}很简单吧？
鸡兔同笼问题，鸡和兔一共35个头，一共94个脚，请写出你的想法即答案。
<script type="text/javascript">
//令鸡为j，兔为i，先假设第一只兔子和35只鸡比，第二轮2只兔子和35只鸡比较
//满足鸡和兔子相加为35并且 鸡脚加上兔脚等于94，输出鸡和兔子的数量；
for(var i=1;i<=35;i++){
for(var j=1;j<=35;j++){
if(i+j==35&&4*i+2*j==94){
document.write("鸡"+j+"<br>")
document.write("兔"+i+"<br>")
}
}
}
</script>是不是很简单，但是后面的你就没那么幸运了。
总结
don't bay;还多着呢！
最后
以上就是友好嚓茶为你收集整理的JavaScript 个人总结(持续更新中）一、javaScript是什么？二、js引入方式三、js的输出方式四、js数据类型五、js三大控制结构总结的全部内容，希望文章能够帮你解决JavaScript 个人总结(持续更新中）一、javaScript是什么？二、js引入方式三、js的输出方式四、js数据类型五、js三大控制结构总结所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
![对JS中操作符的一些理解：[]= =![] =>true,{}= =!{}=>false](/uploads/reation/bcimg7.png)
发表评论 取消回复