首页 > 代码库 > Javascript的内容
Javascript的内容
JS简介和变量
{JS的三种方式}
1 HTML中内嵌JS(不提倡使用)
<button onclick="javascript:alert()">点我呀！！！</button>
<button ondblclick="javascript:alert()">点我呀！！！</button>
<button onm ouseover="javascript:alert()">点我呀！！！</button>
2 html页面中使用JS
<script type="text/javascript">
//JS代码
</script>
3 引用外部JS文件
<script language="JavaScript"src=""></script>
注意事项：
① 页面中的JS代码和引用的JS代码 可以嵌入到HTML中的任何位置，但是位置不同，会影响JS代码的执行顺序
②页面中的js代码：使用type="text/javascript"
引用外部的js文件 使用language="JavaScript"src=""
例如<script>在body前面会在加载前出现
③ 引用外部JS文件的<script></script>必须成对出现且标签内部不能有任何代码
<script type="text/javascript">
// js中的注释
// 单行注释 ctrl+/
/*
段落注释 ctrl+shift+/
**/
// alert("我弹了一个窗")
// document.write("<h1></h1>")
/*JS中的变量
* 1 js中变量声明的写法
* var width=10; 使用var声明的变量，只在当前函数作用域有效
* width=11; 不使用var 直接赋值生成的变量 默认为全局变量整个JS文件有效
* var a,b,c=1; 同一声明语句同时声明多个变量，变量之间用英文逗号分开，但 赋值需要单独赋，例如上式中的只有c赋为1
* 2 变量的命名规范：
* ① 变量名只能有字母数字下划线$ 组成
* ② 开头不能使数字
* ③ 变量区分大小写 大写字母与小写字母为不同变量
* 3 变量名命名要符合驼峰法则
* 变量开头要小写 之后首字母大写 （或单词之间有下划线分隔）
* JiangHaoIsShuaiGe
* 4 类型JS中的变量的数据类型
* undefined：未定义 用var声明的变量 没有进行初始化数值。 var a；
* Null 代表特殊的变量类型。 表示为空的引用 var a=null；
* Boolean 真假 可选true和false
* Number 数值类型 可以是小数，也可以是整数
* STRING 字符串类型 用""或‘‘包裹的内容为字符串
* Object （复杂数据类型） 后续讲解， 函数，数组等。
* 5 常用的数值函数
* ① isNaN 用于判断一个变量或常量 是否为非数值
* 使用isNAN判断时，会尝试使用number（）函数进行转换 如果能转换为数字 则不是非数值 结果为false
* "111" 纯数字字符串 的、false " " 空字符串 false "la" 包含其他字符 true
* true/false 布尔类型 false
* ② Number（） 将其他类型转化为数值类型
* [字符串类型]
* 1 字符串为纯数值字符串，会转为对应的数字 "1111"》111
* 2 字符串为空字符串 会转为"0">0
* 3 字符串包含其他非数字字符时，不能转换，"111a">NaN
* [NULL/undefined转数值]
* null>0 unfedined>0
* [Boolean类型转数值]
* true>1 false>0
* Object类型转数值]
* 先通用ValueOf 方法确定函数是否有返回值 在根据上述情况判断
* ③parseInt 将字符串转化为数值类型
* >>>> 空字符串 不能转 结果为NAN
* >>>> 纯数值字符串 能转 "123">123 "123.65">123(小数转化时，直接抹掉小数点)
*>>>> 包含其他字符的字符串。会就取第一个非数值字符前的数值部分
* "1234a123">1234 "a1234">NaN
* >>>> parseInt值能转string类型，boolem/null/undefined 均为NaN
* ④ parseFloa：将字符串转换为数值
* 使用方式同parseInt，当转化小数字符串时 保留小数点，转化整数字符串时 保留整数
* "123.5" >123.5 "123">123
* ⑤ typeof 用来检测变量数据类型
* 未定义>undefined 字符串>string true/false> boolean
* 数值>number 对象/null>object 函数>function
* */
/*声明变量注意事项
* ① JS中的所有变量类型声明，均使用var关键字变量的具体数据类型取决于给变量赋值的执行
* ② 同一变量：可以再多次不同赋值时，修改变量的数据类型
* var width=10; width为整型变量
* width="haha"; width被改为字符串类型
* ③变量可以使用var声明 也可以省略var [区别] 不使用var为全局变量
* ④ 同一变量名可以多次用var声明 但并没有任何含义 也不会报错，第二次之后的声明 只会被理解为赋值
* */
var a; // 声明变量
a=10; // 给变量赋值
JS中输入和输出语句
*1 文档中的打印输出 document 。write{};
* 输出语句 将write的（）中的内容打印在浏览器屏幕上
* 使用时注意：改变量/常量以外的内容 打印时必须放在""中，变量/常量必须放在""外
* 打印内容同时有多部分内容时，中间用+链接
* 例如 document.write("左手中的纸牌"+left+"<br/>");
* 2 弹窗输出alter{} 警报
* 弹窗警告 （）中的内容 同上
* 3 弹窗输出 promptjkkk
* s\两部分参数① 输入框上面的提示信息
② 输入框里面的默认信息
* 两部分中间用逗号隔开，只写一部分，默认为提示信息
* 可以定义变量接受输出内容 例如var name = prompt("请输入您的名字","姜浩" );点击确定按钮 输入成功 点击取消按钮 name=null；
*默认接收输入的内容为字符串
* var center= 声明一个中间变量
center=left 左手的值给中间
right = center 把中间的值给右边 */
var name = prompt("请输入您的名字：","姜浩" );
document.write("您的名字："+name)；
var one =prompt("输入第一个数字：","2");
var two = prompt("输入第二个数字：","2") ;
var sum = parseFloat(one) + parseFloat(two)
document.write(sum
JS中的运算符
1 算术运算
+ 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减
+:有两种作用，链接字符串/加法运算；当加号两边为数字使进行加法运算，当+号郎边有任意一边为字符串时，进行字符串链接，连接后的结果为字符串
++：自动运算符，将变量在原有的基础上加1
--：自动运算符，将变量在原有的基础上减1
n++与++n的区别
n++: 先使用n的值来计算，然后再把n+1
++n ：先把n的值加1，然后再用n+1以后的值去计算
相同点：不论n++还是++n在执行完代码后，均会把n+1
var a=3
var b c
b = a++ +2 a=3 b=5 a=4
c = ++a +2 a=4 a=5 c=7
2 赋值运算
= 赋值 += -= *= /= %=
+=： a+=5；相当于 a = a + 5 但是，前者的执行效率比后者快。
-=:
3关系运算
==、 等于 === 严格等于 ！= 不等于、>、<、>=、<
===：严格等于；类型不同，直接返回false，类型相同，在进行下一步判断，
==：等于；类型相同，同===；类型不同，尝试将等式两边转换为数字，在判断。
特例 null == Undefined √ null === Undefined ×
4 条件运算符(多目运算)
a>b?true:false
有两个关键符号：？和：
当问号前面的部分运算结果为true时 执行：前面的代码
当问号前面的部分运算结果为false时 执行：后面的代码
多目运算符可以多层嵌套
例如 var jieguo = num>5?"输入太大"：( num==5?"蒙对了！":"输入太小") ；
5逻辑运算符
&& 与、|| 或、！ 非
var num =5;
var jieguo = num>5?"输入太大":( num==5?"蒙对了！":"输入太小");
document.write(jieguo);
[运算符的优先级]
1 ++ -- !
2 * / %
3 + -
4 > < >= <=
5 == ！=
6 &&
7 ||
8 各种赋值= += *= /= %=
JS中的分支结构
[if-else结构]
1 结构写法
if(){
条件为true时执行
}else{
条件为false时执行
}
2 if()中的表达式，运算之后的结果应该为
① Boolean true 真 false 假
② string 非空字符串为真，空字符串为假。
③ Number 0为假 一切非零均为真
④null/nan/undefined 全为假。
⑤ Objict ：全为真。
3 else{}结构，可以根据情况省略 。
[多重if 阶梯if]
1 结构写法
if（条件一）{
条件一成立
}else if(条件二){
条件一不成立&&条件二成立
else-if 部分可以有多个
}else{
条件一不成立&&条件二不成立
}
2 多成if条件中，各种判断条件是互斥的，只能选择其中一条路。
3 if else的{}可以省略 但是一概不提倡
如果省略{} 则 if/else结构包含的代码 仅为其中最近的一行（分号结束）
* 如果省略{} 则else结构永远属于其前方最近的一个if
* */
var sum =5;
if(sum<10){
document.write("if条件成立")
}else{
document.write("if条件不成立 ")
}
[嵌套if结构]
1 结构写法
if（条件一）{
条件一成立
if（条件二）{
条件一成立&&条件二成立
}else{
条件一成立&&条件二不成立}
}else {
条件一不成立
if(){
* 111
* }else{
* 1111
* }
* }
* 2 if结构可多层嵌套 但原则上不可超过3层。
/* [switch结构]
* 1 结构写法
* switch(表达式){
* case 常量表达式1：
* 语句1：
* break;
* case 常量表达式1：
* 语句1：
* break;
default:
语句N
break； } 2 注意事项：
① switch()中的表达式，以及每个case后面的表达式，可以为任何JS支持的数据类型。对象和数组不行
② case后面的所有常量表达式，必须各不相同，否则只会执行第一个。
③ case后的常量可以是任何数据类型，同一switch结构的不同case，可以使多种不同 的数据类型
④ switch在进行判断的时候，采用的是全等判断 ===
⑤ break 的作用 执行完case的代码后，弹出当前的switch结构
缺少break的结果。
聪明和正确的case项开始 依次执行所有的case和default
⑥ switch结构在判断时，只会判断一次正确答案，当遇到正确的case项后将不会判断、后续项目 依次往下执行
⑦switch的执行速率要快于多重if结构在多路分支时，可优先选择使用switch结构
var num4=5
switch(num4=5){
case 9:
document.write("这是10的case块")
break;
case 10:
document.write("这是10的case块")
break;
default :
document.write()
break;
JS中的循环结构
/*[循环结构的步骤]
* ①声明循环变量
* ②判断循环条件
* ③ 执行循环体(while{}中所有的代码)操作
* ④ 更新循环变量
*
* 然后执行 ② ③ ④
*
* [JS中循环条件支持的数据类型]
* ① Boolean true 真 false 假
② string 非空字符串为真，空字符串为假。
③ Number 0为假 一切非零均为真
④null/nan/undefined 全为假。
⑤ Objict ：全为真。
// var n = 1; /* ①声明循环变量*/
// while (n<=10){ /* ② 判断循环条件*/
// document.write("nihao"); /*③ 执行循环体(while{}中所有的代码)操作*/
// n++ /*④ 更新循环变量*/
// n+=2
// n=12
// }
//
/*while循环特点：先判断，后执行。
* do-while循环特点：先执行 后判断。即使初始条件不成立，do-while循环也至少先执行一次
* var m=1
* do {
*
* }while();
*
* */
//do {
// var b = parseInt(prompt("请输入一个数"));
// if(b<7){
// alert("小了");
// }else if(b>7){
// alert("大了");
// }else if(b==7){
// alert("对了");
// }else{
// alert("输入有误")
// }
//} while(b!=7)
// var n = parseInt(prompt("请输入一个整数"))
// while(n<=100){
// document.write("你赢了")
// n++
// }
// var a = parseInt(prompt("您输入的本金"))
// var b = 0;
// var num = parseFloat(prompt("数字"));
// var sum =a;
// while(b<num){
// sum+=sum*0.003;
// b++
// }
//
// document.write("年份"+num+"年<br />")
// document.write("您的本金"+a+"元<br />")
// document.write("您的总金额为"+sum+"元<br />");
// document.write("前"+a);
// var num =parseInt(prompt("数字"))
// var a = 1
// var sum = 0;
// while(a<=num){
// sum +=a
// if(a!=n)document.write(a+"+")
// else document.write(a+"=");
// a++;
//
// }
//var a =1
//
// var sum=0 , count=0;
// while(a<=1000){
// if(a%7!=0){
// document.write(a+" <br />");
// sum+=a;
// count++;
// }
// a++
// }
//document.write("个数"+count+"<br />")
//document.write("总和为："+sum)
// var num = prompt("请输入一个三位正整数：");
//
// var bai = parseInt(num/100);
// var shi = parseInt(num%100/10);
// var ge = parseInt(num%10);
//
// var sum = bai*bai*bai+shi*shi*shi+ge*ge*ge ;
//
// document .write(sum==num?"是水仙花数":"不是水仙花数")
//
// var n =100;
// while(n<=999){
// var bai = parseInt(n/100);
// var shi = parseInt(n%100/10);
// var ge = parseInt(n%10);
// if(n == bai*bai*bai+shi*shi*shi+ge*ge*ge){
// document.write(n+"");
// }
// n++;
// }
// 斐波
// var a=1;
// var b=1;
// var c;
//
// var n =1;
// while(n<=20){
// c=a+b /* c=2*/
//// document.write(c+"<br />");
// a=b /*a=1*/
// document.write(a+"/"+c+"<br />")
// b=c /*b=2*/
// n++
// }
// var a = parseInt(prompt("输入的个数："));
// var b =1;
// var sum=0;
// while(b<=a){
// var c = parseInt(prompt("请输入一个数"+b+"个数"));
// sum+=c;
// b++;
// }
// document.write("总和："+sum)
//
/*for循环
* 1 for 循环有三个表达式 分别为： ① 定义循环变量 ②判断循环条件③更新循环变量
* 三个表达式之间用；隔开
* 三个表达式可以省略，两个；缺一不可
* 2 for循环特点：先判断后执行
* 3 for循环的三个表达式均可由多个部分组成，之间用逗号隔开。但是第二部分判断条件用&&链接，最终结果需要为真/假。
* */
// var sum = 0 ;
// for(var a=1,b=100;a<b;a++,b--){
// if(a<50) document.write("("+a+"+"+b+"）+");
// else document.write("("+a+"+"+b+")=");
// sum +=(a+b);
// }
// document.write(sum);
var sum = 0;
for(var a=1,b=100;a<b;a++,b--){
if(a<50) document.write("("+a+"+"+b+"）+");
else document.write("("+a+"+"+b+"）=");
sum +=(a+b);
}
document.write(sum);
Javascript的内容