一点点刚学不久的JS

时间:2022-03-11 08:05:15

1   js中的变量和输入输出

{使用js的三种方式}

1 在html标签中直接内嵌js(并不提倡使用);

<button onclick="alert('小婊砸你真点啊!')">有本事点我啊</button>
》》》不符合W3C内容与行为分离的要求

2 在html页面中使用<script></script>包裹js代码;
<script type="text/javascript">
js代码
</script>
》》》<script></script>标签可以放到页面的任何位置


3 引入外部
的JS文件,使用<script language="JavaScript" src="js/01.js"></script>;

【注意】

①script可以嵌入到界面的任意位置,但是未知的不同会导致JS代码的执行顺序不同,
比如script标签放在body前面,则JS代码
会在页面加载之前就执行;

②:引入外面的JS代码,<script></script>必须是成对出现的标签,而且标签中不能再有任何的JS代码

[js中的变量]

1.

JS中变量声明的写法

var num="10";//使用var声明的变量属于局部变量,只在当前作用域内有效;
num = 10;//不用var声明的变量,默认为全局变量,在整个JS文件中都有效;

使用一行语句,同时声明多个变量,上式中。y属于已声明,但是未赋值状态。结果为undefined

举个栗子

var num
alert(num);
var x=8,y="haha";z="哈哈哈";
x= "aaa";
alert(x);
alert(y);
alert(z);

一点点刚学不久的JS

一点点刚学不久的JS

一点点刚学不久的JS

2

[声明变量的注意事项]

①:JS中所有变量的声明均使用var关键字。变量具体是什么数字类型,取决于给变量赋值的类型,

②:JS中同一个变量可以再多次不同的赋值时。修改变量的数据类型; var a =10; // 从初始声明是,a属于整数值; a = "haha"; // 重复赋值时,整数型的a被修改为字符串类型;

③ 变量可以使用var声明,也可以不使用var声明,使用var声明是局部变量,不使用var声明的属于全局变量;

④ 只用var声明,但是不赋值,结果为undefined 例如var a; //a为undefined ,但是如果不赋值, 也不声明的a,直接使用会报错;

⑤ 同一个变量名可以多次使用var声明,但是后面的var并没有任何蛋用,第二次在使用var声明是,只会被理解为普通的赋值操作

3[变量名的命名要求]

①变量名只能有字母数字下划线组成,
②开头不能是数字
③变量名区分大小写,大写字母与小写字母为不同变量;

4【变量名的命名规范】

① 要符合小驼峰法则:(骆驼命名法)首字母小写,之后每个单词的首字母大写;
myNameIsJiangHao √
②或者匈牙利命名法:所有字母小写,,单机之间用_分割
my_name_is_jiang_hao √
③mynameisjianghao × 能用,但是不规范;

5[JS中的数据类型]

①:Undefined:未定义,已经使用var声明的变量,但是没有赋值的情况,var a;
②:Null:表示空的引用,
③:Boolean:布尔类型,表示真假,只有两个值:true/flase
④;Number:数值类型,可以是正数,也可以是小数;
⑤:String:字符串类型,用""或者''包裹的内容,称为字符串;
⑥:Object:对象类型,后续讲解。。。

6【常用的数值函数】
①isNaN():判断一个变量或常量。是否是NaN(not a num 非数值);
使用isNaN判断时,会尝试使用Number()函数进行转换。如果最终结果能够转化为数字。则不是NaN,结果为false;
② number()函数,将其他类型的数据,尝试转为数值型;
[字符串类型]
》》》字符串为纯数值字符串,会转为对应的数字;“111”->111
》》》字符串为空字符串,会转为0; “”->0
》》》字符串包含任何其他字符时;都不能转 "11a"->NaN
[Boolean类型]
true->1 false->0
[Null/Underfined]
null->0 Undefined-NaN
[Object]
(后续讲解)
③:parseInt();将字符串转为整数类型;
》》》纯数值字符串,能转,"12"->12; "12.9"->12(小数转化是直接抹掉小数点,不进行四舍五入)
》》》空字符串,不能转。""->NaN
》》》包含其他字符的字符串,会截取第一个非数值字符前的数字部分
"123a456->123" a123b456->NaN
》》》parseInt()只能转字符串,转其它类型全是NaN,

举个栗子

var num=111;

alert(Number(num));

var num="111";

alert(parseInt(num))

var num=NaN;

alert(typeof(num));

一点点刚学不久的JS

一点点刚学不久的JS

一点点刚学不久的JS

[JS中常用的输入输出语句]
1.document.write();将()里面的内容打印输出到浏览器屏幕上
使用时需注意除变量常量外 的所有内容,必须放在""里面,变量和常量必须放在""外面;
 如果同时有变量和字符串,必须用+链接,
 例如:document.write("左手中的纸牌:"+left+"<br/>");
 2. alert();使用弹窗输出,
 弹窗警告,()中的内容与上述要求相同;00
 3.prompt弹窗输入,接受2部分参数,、
 ①:输入框的上面的提示内容,可选值,
 ②:输入框上面的默认信息,可选;
 当只写一部分时候,表示输入框上面的提示内容;
 可以定义变量,接受输入的内容,点击确定按钮,变量将被赋值为输入内容。点击取消按钮,变量被赋值为null;*

输入内容是,默认的数据都是字符串;

下面是我自己通过学过的知识做的一道练习题

document.write("<table style='font-weight:bold;'border='1';>");
document.write("<caption>您的展示个人信息</caption><br/>");
document.write("<tr>");
document.write("<td>姓名</td>");
document.write("<td>学号</td>") ;
document.write("<td>班级</td>") ;
document.write("<td>家庭住址</td>");
document.write("</tr>");
document.write("<tr>");
document.write("<td> 姜浩</td>") ;
document.write("<td> 123456</td>");
document.write("<td>HTML1705</td>") ;
document.write("<td>山东省烟台市</td>") ;
document.write("</tr>");
document.write("</table>");

一点点刚学不久的JS

算术运算(单目运算符)

+加 、-减、*乘、 /除、 %取余、++自增 、--自减

+:有两种作用,分别是连接字符串和加号运算,当加号两边全为数字时候,进行加法运算,当+两边有任意一边为字符串时,
起链接字符串的作用,链接之后的结果为字符串。
除+外,其余符号运算时候,会先尝试将左右变量用Number函数转化为数字
》》》 /:结果会保留小数点。
》》》 ++:自增运算符,将变量在原有基础上+1;
》》》 --:自减运算符,将变量在原有基础上-1;

举个栗子

var a=3,b,c;
b= a++ +2;//先用a运算,b=3+2 再把a+1, a=4
c= ++a +2;// 先把a+1 a=5 再用a+1以后的值运算;c=5+2
alert(a);
alert(b);
alert(c);

最后的结果总结出来的异同:

【a++】和【++a】的异同
①:相同点:不论a++还是++a运算完以后,a的值均会+1;
②:不同点:a++先用a的值去运算,再把a+1,
++a先把a+1.再用a+1以后的值去运算,

2赋值运算
= 赋值 += -= *= /= %=
+=:a+=b 相当于a=a+b。但是前者运算效率要比后者很快,所以推荐使用。a+=b写法

3关系运算
==等于、===全等、 !=不等、!==不全等、>、<、>=、<=

》》》关系运算符,运算之后的结果只能是布尔类型;
>>>判断一个数字是否处于某个区间,必须用&&;链接。这种写法是对的 a<10 && a>0 √
但是,10>a>0 ×
>>> ===:严格等于;要求不但要类型相同,值也必须相同;类型不同,结果直接为false,类型相同,在进行下一步判断;
》》》 ==: 等于。 类型相同,与===效果一样,类型不同时,会先尝试用number函数将两边转为数字,然后在进行判断,
但是有个别特例,如:Null==false × Null==undefined √

4条件运算符(多目运算)
a>b?true:false

有两个重要符号 ? 和 :
当?前面部分结果为true是,执行:前面的代码。当?前面部分运算结果为false时,执行:后面的代码!
(冒号): 两边可以为数值,则整个式子可用于赋值。
var a=1>2?3:4; 输出结果为4
alert(a);
(冒号)两边可以为代码块,直接执行代码 var a=1>2?alert(1):alert(2);
多目运算符可以多层嵌套。 var a= 1<2?alert(1):(1>0?4:5);输出结果为4

5位运算符、 逻辑运算符
&、|、~ &&与、||或、!非
&&两边都成立结果为true;
||两边有任意一边成立,结果为true;

6

运算符的优先级()最高
! ++ -- 单目运算符
* / %
+ -
> < >= <=
== !=
&& 与或同时存在时,与比或高(&&比||高)
||
= += -= *= /= 最低的是各种赋值

if else

[if-else结构]
①:结构的写法
if(判断条件){
条件为true时,执行if的{}

}else{
条件为false时,执行else的{}
}

2 注意事项
 ①:else{}语句块,可以根据情况进行省略。
 ②:if和else后面的{}可以省略,但是省略{}后if和else后面只能跟一条语句,所以并不介意省略大括号;

3 if的()中的判断条件,支持的情况:
 ①:Boolean :true为真 false为假
 ②: String:空字符串为假,所有非空字符串为真
 ③:Number:0为假,一切非0数字为真;
 ④:Null Undefined NaN全为假* ⑤:Object:全为真;

举个栗子

var num = 1
if("5"){
alert(1)
}else{
alert(2)
}

在这里“5”为非空字符串,运用String函数,所以为真,执行alret(1),所以最终结果为1.

一点点刚学不久的JS

在举一个栗子,运用两种发放解答

var num1=parseFloat(prompt("请输入一个数:"));
var num2=parseFloat(prompt("请输入一个数:"));
var num3=parseFloat(prompt("请输入一个数:"));
var sum=num1+num2+num3;
var result=num1>50||num2>50||num3>50||sum>100?sum*0.85:sum;
alert("你需要支付:"+result+"元");

var num1=parseFloat(prompt("请输入一个数:")); var num2=parseFloat(prompt("请输入一个数:"));

var num3=parseFloat(prompt("请输入一个数:")); if(num1>50||num2>50||num3>50||num1+num2+num3>100){ alert((num1+num2+num3)*0.85); }

else{ alert(num1+num2+num3); }

那么最终的结果是一样的!!

一点点刚学不久的JS

一点点刚学不久的JS

一点点刚学不久的JS

一点点刚学不久的JS

[多重if结构、阶梯if结构]
1.结构写法
 if(条件1){
 条件一成立,执行的操作
 }else if(条件二){

 条件一不成立,并且条件二成立的操作
 }else{
 上述条件都不成立时;执行的操作
 }
 ②:多重if结构中,各个判断条件是互斥的,执行选择其中一条路执行,
 遇到正确选项并且执行完以后;直接跳出结构,不再判断后续分支。

举个栗子

var num=5

if(num>0){

alert(1)

}else if(num<10){

alert(2)

}else{

alert(3)

}

var num=prompt("请输入成绩:")if(num>=90){alert("您的成绩是:"+"优秀")}else if(num>=80&&num<90){alert("您的成绩:"+"良");}else if(num<80&&num>=60){alert("您的成绩:"+"及格");}else { alert("您的成绩:"+"差");}

一点点刚学不久的JS

一点点刚学不久的JS

在例如:

一点点刚学不久的JS

一点点刚学不久的JS

【嵌套if结构】1
1.结构写法:
 if(条件1){
 //条件1成立,
}
 if(条件二){
 条件1成立,&&条件二成立
 }else{
条件一成立,条件二不成立
 }
 else{
 //条件1不成立
 }
 2 在嵌套if结构中,如果省略{},则else结构永远属于离他最近的if结构。
 3 嵌套借工具可以多层嵌套,但是一般不推荐超过3层;
 能用多重if结构的,一般不推荐使用嵌套if

举个栗子

var num1=prompt("输入一个数")
var num2=prompt("输入一个数")
var num3=prompt("输入一个数")
if(num1>num2){
if(num1>num3){
alert(num1) ;
}else{
alert(num3);}
}else {
if(num2>num3){
alert(num2);
}else{
alert(num3);
}
}