JS oneday

一、js的介绍

js是一种解释性语言(不用进行编译,运行时直
接执行),被浏览器解释执行
作用:增强客户端的交互效果(js事件, html元
素进行增删改查,验证数据
等)

二、js体系介绍(分为三个部分)

1.ECMAScript: js语法规则和原生对象

2.BOM(BOM包含DOM):浏览器对象模型:与浏览器进行交互的方法

3.DOM:文档对象模型:处理网页内容的方法

四、将js添加到html中的方法

1.script标签 (内嵌式)

   

2写js文件,结合script标签进行引入(外部方
式)


   

1、2种方式都是写在之前,且习惯将外部应用js写在内嵌式之前

3.以on开头的事件属性,可以使用js

    "alert('这是事件里执行的')">这是div

4.以伪url的方式(即a标签的href属性)

    "javascript:alert('伪url')">这是标签

3、4:点击后执行

五、ECMAScript5

js的输入 输出

一、输入:接收用户信息
输入框: window.prompt("请输入你的文字)
//都是string类型
在这里插入图片描述

二、输出:展示信息给用户
1.弹出框: alert();

    var age=18;alert(age);

在这里插入图片描述

2.网页输出: document write();——支持标签

document.write("

hello
world

"
);

在这里插入图片描述

3.控制台输出: console.log();

console.log("你在哪里");

在这里插入图片描述

三、注释:
单行注释: //
多行注释: /**/
文档注释:/** */

变量

存储数据的容器(在计算机内存中开辟的一个地址块)
一、.变量的声明

var 变量名;
var 变量名=值;
var a=10,b=15;

二、.变量名的命名规则
1.区分大小写

2组成由数字、字母、下划线、$构成,但不能以数字开头

3.见名知意

4.不能是关键字
在这里插入图片描述

三、常用变量命名方式
1.帕斯卡命名(大驼峰):所有单词首字母大写

2驼峰(小驼峰):第一个单词首字母小写,其他单词首字母大写

3.匈牙利:先写缩写

js的数据类型(js又称弱类型)

一、原始数据类型
number:数字

string:字符串
单引号中可以包含双引号,但不能包含单引号;双引号中可包含单引号,但不能包含双引号

boolean:布尔类型

null:表示不存在的对象

undefined:声明了但未赋值

二、引用类型

**typeof:查看数据类型

注:字符串的值要加双引号或单引号
null的数据类型是object**

数据类型的转换

一、布尔值的转换
1.字符串转boolean,只要有数据都转为ture,当字符串为空是转为false

2数字转boolean,除了0为false外其余都为ture

3.null转为boolean为false

4.undefined转boolean为false

二、转数字
1.Number():整体转换

	(1)boolean类型ture: 1false:0(2)null为0(3)undefined转换为NaN,仍是数字类型,表示为不是一个数字(4)string转换必须满足都是数字,否则为NaN 

2.parseInt()
转换原理:从左边到右边,一位一位的转换,如
果有一位失败(遇到非数字,但是可以识别+ -)就停止转换(结果为整型)

2.parseFloat()
转换原理:从左边到右边,一位一位的转换,如
果有一位失败(遇到非数字,但是可以识别+ -)就停止转换,但是支持小数点
如果输入.5会自动显示为0.5

alert(parseFloat(".5") );

在这里插入图片描述

三、转字符
1.要转换的值toString()
在这里插入图片描述
在这里插入图片描述

要转换的值不能是null和undefined,因为它们没有toString这个方法

2.String( )

    var num = 123;var s = String(num);document.write(typeof s);document.write(s);

在这里插入图片描述

六、运算符

算术运算符

1.+ :两个含义
数值相加(+边都为数字时)
连接(+有一边是字符串)

2.-
3.*
4./
5.%:取模,求余数

注: js小数的精度问题,变成整数进行运算
注意隐式转换

赋值运算符

=
+=
-=
*=
/=
%=
右边的计算结果赋值给左边

关系运算符

<
>
<=
>=
==   //表示值相等
===    //表示值相等,且类型相等
!=    //值不等
!==    //值不等,类型也不等

逻辑运算符

&&:并且
所有的条件都满足,只要有一个不满足,结就为false

||:或者
所有的条件有一个满足即为ture

!:取反(非)

三目运算符

(条件表达式) ?条件为真的处理:条件为假的处理

++ - -

++自增1
前++ (先加1在使用)、后++ (先使用在进行加
1)只在复合语句中有影响

–自减1
前-- (先减1在使用)、后-- (先使用在进行减
1)只在复合语句中有影响

转义符

\n换行
\t制表
\b空格
"双引号
'单弓|号
\f进制
\斜杠
\r回车

巩固小作业

变量a中存储的数字10,变量b中存储的数字是3

1)a除以b后,并取整,在页面输出得到的结果?

    var a=10,b=3;document.write(parseInt(a/b));

2)将a%b后得到的结果转换为字符串类型,在打印台输出得到的结果,并验证最终的结果数据类型是否为字符串

    var d=a%b;var str = d.toString();// var str =String(d);console.log(str);console.log(typeof str);

2.输入一数字作为秒数,在页面按小时,分钟,秒的格式输出( 如输入600,页面显示:0小时10分0秒 )

    var time=window.parseInt(prompt("请输入一个正数数字"));var h=parseInt(time/3600);//小时var m=parseInt(time%3600/60);//分钟数var s=parseInt(time%3600%60);//秒数document.write(h+"小时"+m+"分钟"+s+"秒");

3.用三元运算符实现

1)小明和妈妈约定,期末考试如果语文数学成绩都是满分100,周末妈妈就带他去游乐园,否则就只有在家改错题

        var chinese =parseFloat(window.prompt("请输入语文成绩")) ;var math = parseFloat(window.prompt("请输入数学成绩"));(chinese == 100) && (math == 100)?alert("去游乐园玩"):alert("在家努力学习");

2)小明考了双百分,妈妈周末带小明去游乐园玩了一天,随后和小明约定,如果明年小明还能拿到双百分并且奥数能够获得华杯赛前90名就带他去迪斯尼乐园,否则就只有后年再努力了

        var nextyear_chinese = parseFloat(window.prompt("请输入第二年语文成绩"));var nextyear_math = parseFloat(window.prompt("请输入第二年数学成绩"));var huabeisai = parseFloat(window.prompt("请输入华杯赛获得的名次"));(nextyear_chinese == 100) && (nextyear_math == 100) && (huabeisai <= 90) ?alert("去迪斯尼乐园"):alert("后年努力");

4.输入1个同学的成绩,60-70为D,70-80为C ,80-90为B,90-100为A 不及格-60为E 最后输出这个同学到底是哪个分段(画流程图并代码实现)

    var a = parseInt(prompt('请输入成绩'));if (a>=90&&a<=100){alert('成绩为A');}else if (a>=80&&a<90){alert('成绩为B');}else if (a>=70&&a<80){alert('成绩为C');}else if (a>=60&&a<70){alert('成绩为D');}else if (a>=0&&a<60){alert('成绩为E');}else{alert('输入成绩无效')}

在这里插入图片描述

5.在淘宝购买商品的整个流程图(注意:购买时如果未登录需要回到登录页面,如果账户和密码输入错误3次将被锁定无法登录)
在这里插入图片描述
6.输入三个数,找出最大数(画流程图并代码实现)

    var a = prompt('请输入数字a');var b = prompt('请输入数字b');var c = prompt('请输入数字c');var max = a;if (b>max){max = b;if (c>max){max=c;alert('最大数是c:'+max);}else if (c{alert('最大数是b:'+max);}else{alert('最大数是b,c:'+max);}}else if (b{if (c>max){max=c;alert('最大数是c:'+max);}else if (c{alert('最大数是a:'+max);}else {alert('最大数是a,c:'+max);}}else if (b===max){if (c>max){max = c;alert('最大数是c:'+max)}else if (c{alert('最大数是a,b:'+max)}else{alert('最大数是a,b,c:'+max)}}

在这里插入图片描述


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部