js操作完的数值赋回html元素,JS的学习
JavaScript是什么?
JS是一种小型的、轻量级的、面向对象的、跨平台的客户端脚本语言。
JS是嵌入到浏览器软件当中去的,有浏览器就可以执行JS程序了。
JS是一种面向对象的程序语言。
在程序中,对象是由“属性”和“方法”构成。
在现实中,男女朋友就是一个“对象”。“东西”就是“对象”。一个“物体”就是“对象”。
“对象”有各种各样的特征(属性),如:身高,体重,年龄,姓名,学历等。
“对象”有很多方法。“人”这个对象,可以做很多
注意:JS中的对象只要会用就可以的,不需要我们自己去开发对象
跨平台:JS程序可以在多种平台下运行,如:widows、linux、mac、IOS等。
客户端脚本程序:JS只能在客户端的浏览器运行,不能在服务器端(阿帕奇)来运行。
浏览器是一种翻译器,可以翻译三种代码:html、CSS、JS。不需要服务器,因为本来就是客户端的。
。
。
JavaScript的应用
表单验证:是JS最基本的功能。
动态HTML:可以实现一些动态的、重复的效果。
交互试:人机交互,通过键盘和鼠标,在网页中的元素进行交互。
。
标记
常用的两个客户端输出方法
(1)document.write(str内容)
描述:在网页的
标记,输出str的内容。
Document意思“文档”,就是整个网页。
Document是一个文档对象,代表整个网页
write是document对象的一个输出方法。
“.”小数点:通过小数点来调用对象的方法。
str:表示要输出的内容。
(2)window.alter(str内容)
描述:在当前窗口中弹出一个警告对话框,str为对话框中显示的内容。
window代表当前浏览器窗口,window是一个窗口的对象。
alter()方法:弹出一个对话框。
str:显示要输出的内容。
Paste_Image.png
.
JS中的注释
HTML的注释:
CSS注释:/注释内容/
JS的注释:// 或 /* 多行注释*/
JS变量
1、变量的概念
变量是变化的一个量。
变量可以看成是一个“未知数”。
变量可以看成是宾馆的“房间号”。
变量可以看成是宾馆的“房间号”。
变量一般指程序数据。
变量是临时存在的数据。我们可以把计算机内存看成是一个个的小格子。每个小格子中可以存储一个变量的名称和变量的值。
2、变量的声明
相当于预定宾馆的“房间”。
语法格式:var 变量名=变量的值
变量声明是使用系统关键字var来进行的
举例:var name;//声明变量
var,name,sex,edu;//同时声明用对个变量,多个变量间用英文下的逗号 隔开。
var name="张三";//一边声明,一遍赋值。
3、变量的命名规则
变量的名可以包含字母、数字、下划线。
变量名不能以数字开头,可以以字母和下划线开头。如 var _name;
变量名不能是系统关键字。如:var,swith,for,try,case,else,while等。
JS中变量名是区分大小写的。如name和Name是两个变量。
JS中变量的名称一定要有意义。
如果变量名有多个单词构成的话,
“驼峰式命名”:第一个单子小写,后面每个单词首字母大写。如getUserName:获取用户名。
“下划线式命名”:所有单词全小写,中间用下划线链接线链接。如:get_user_name
4、给变量赋值
给变量赋值,就是往“空间”中装东西。
使用赋值号“=”来给变量赋值。
语法:var 变量名=变量名
举例:var name="张三";
“=”的意义:将“=”右边的“运算结果”赋给左边的变量名。
应该是“=”右边先运算,再把运算的结果,赋给左边的变量
“=”左边只能是一个变量名,而不能是“运算表达式”。说白了等号左边就是一个容器,至于容器里面装什么是等号右边的事情
例如
![Upload Paste_Image.png failed. Please try again.]
.
.
.
.
JS的运算符
1、算术运算符:加减乘除
运算时,只能进行同类型运算。如果类型不同,将进行类型转换。
2、赋值运算符:=、+=
将等号右边的运算结果,赋给左边的变量。
+=:先加后等
。
写程序的一般步骤
(1)变量的初始化:变量声明,变量赋值
(2)程序的运行过程
(3)输出结果
.
Paste_Image.png
。
JS程序的基本语法
JS是区分大小写的
JS中每一条语句,一般以英文下的分号(;)结束。这个分号不是必须的,为了向PHP兼容,最好加上分号。
运算符和变量,以及操作之间可以使用空格分开,这样的程序比较容易阅读。
var a=100;varna=10;是一样的。
.
变量的数据类型
变量是有类型的,这个类型来源于“变量的值”,值是什么类型,变量就是什么类型。
JS变量的类型有:数值型、字符型、布尔型、未定义型、空型underfined,null,array,object,function
1、数值型:可以进行算术运算的(加减乘除)
数值型包括:整型(整数)和浮点型(小数)
Paste_Image.png
2、字符型:用单引号或双引号,引起来的一串字符。
注意:单引号和双引号可以相互嵌套
单引号内只能嵌套双引号
双引号内只能嵌套单引号
如下例:双引号内嵌套单引号,为了是名字加单引号。
注意:如果想在双引号内在嵌套双引号,里面的双引号一定要进行转义(\ ")
JS中转义字符是反斜杠(\)
常用的转义字符有:' " \ \r \n等
也就是说,当浏览器遇到反斜杠时,将会对其后的一个字符进行特殊对待,当成普通字符来对待。所谓普通字符就是平常的a,b,c,d字母字符。
Paste_Image.png
3、布尔型
又称逻辑型。只有两个值:true、false(假)
布尔型只有两个状态。如性别
var a=true;
var b=false;
布尔型常用if条件判断语句中
if条件判断
1、语法结构--只判断true,不判断flase
if(条件判断:结果只有true或false)
{
条件为true,将执行该代码;
}
2、语法结构--既判断true,又判断flase
if(条件判断:结果只有true或false)
{
条件为true,将执行该代码;
}
else
if(条件判断:结果只有true或false)
{
条件为false,将执行该代码;
}
如果条件为true,则执行第一个大括号{}中的代码。
如果条件为flase,则执行第二个大括号{}中的代码。
4、未定义型(用的很少)
当一个变量定义,但未赋值时,将返回未定义型,未定义型的值只有一个undefined。
当一个对象属性不存在,也返回未定义型。
Paste_Image.png
5、空型(用的很少)
当一个对象不存在时,将返回空型的值null.
也可以理解为:是一个对象的占位符
如果你想清除一个变量的值的话,可以赋一个null的值。
var a=null,//将一个null赋给一个变量,用于清除他的值
变量的类型转换
判断变量的数据依据:typeof()
使用一元运算符typeof(),可以测试一个变量的类型。
typeof()测试的结果是一个类型字符串。
typeof()的结果字符串有几种情况:"string" "number" "boolean" "undedined" "object" "function"
另外:null、对象、数组这三种类型,都将返回"object"
备注:只有这五个是假,其它都为真
。
函数和方法的区别
Boolean(a) //函数是可以独立使用的
document.write(a) //方法不能独立使用,方法是必须要属于哪一个对象。
Paste_Image.png
注意事项:a+true中true会自动转换成字符串"true","+"左右只要有一个字符串,那么另外一个一定得转成字符串,才能运算。“”乘号左右两边有一个数值型,则另外一个一定要转换成数值型。
var a="";
var b=a+true;//相当于b=a+true="true"*
.
.
Paste_Image.png
Paste_Image.png
。
从字符串中提取整数浮点数函数
(1)parseInt()系统函数、全局函数
功能:在一个字符串中,从左往右提取整型。如果遇到非整型的内容,则停止提取,并返回结果。
注意:如果第一个字符就是非整数,则立即停止,并返回NaN
如:parselnt("120px")=120
parselnt("120.98")=120
parselnt("a 120px")=NaN
parselnt(".98")=NaN
例子:
Paste_Image.png
(2)parsefFloat()系统函数,全局函数
功能:在一个字符串中,从左往右提取浮点型,遇到非浮点型内容,则停止提取,并返回结果。
注意:如果第一个字符为非浮点型,则立即停止,并返回NaN.
parseFloat("120px")=120
parseFloat("120.98")=120.98
parseFloat(".98")=0.98
parseFloat("a.98")=NaN
注意:JS中的浮点型是包括整数和小数点的,也就是说用parseFloat()函数时,整数也一样的当做f浮点型,不会停止变成NaN,所以parseFloat比parseInt大一级。只要是数值都可以提取,而parseInt只能提取整数。
‘
’
* JS运算符
1、算术运算符
加减乘除(+,-,*,/),%,++,--
取余运算符(%),两个数相除,取余数
。
2、赋值运算符:=、+=、-=、*=、/=
。
注意:第三和第四的比较
.
Paste_Image.png
Paste_Image.png
作业
Paste_Image.png
。
。
。
if条件判断语句:条件成立,执行什么代码;条件不成立,执行什么代码。
结构一:只判断真(true),条件为假,什么也不做。
Paste_Image.png
例子:
switch分支语句
描述:根据一个变量的不同取值,来执行不同的代码。
语法结构:
Paste_Image.png
。
。
while循环:只要条件成立,就重复不断的执行循环体代码。如果条件为假,则退出循坏。
while(条件判断)
{
如果条件为true,则执行循环体代码
}
while循环结构说明:
在循环开始前,必须要对变量初始化(声明变量,给变量给个初始值)
如果while的条件为真,则会重复不断的执行循环体中({})的代码。
在循环体中,必须要有“变量更新”的语句,换句话说:两次循环的变量的值不能一样,如果一样,会造成死循环。
结果:
结果:
Paste_Image.png
。
结果:
实例:隔行变色
注意:
Paste_Image.png以上代表的是循环体,
的变化放在if条件判断中
for循环
求0-100的偶数,与while一样
。
注意:" "表示变量i的值有空格排列。
。
break语句:
continue语句:
例子:做九九乘法表
第一步:
第二步:({}中代表的是循环体,循环体在哪里,for循环就在哪里)
第二步结果:
第三步(循环套循环):
第三步结果:
第四步(j<=i)
第五步(×是代表的"乘号"):
第五步结果:
。
。
数组:
注意:数组和循环一起用的,一般不单独用。
;
创建数组
。
。
数组的操作:
。
。
。
1、函数的概念:
函数,是将一段公共的代码进行封装,给它起个名字叫“函数。”
函数可以一次定义,多次调用。
函数,可以将常用的功能代码,进行封装。如:表单中用户名的验证、验证码函数、邮箱的验证。
2、函数的定义格式:
3、函数的调用
函数定义是没用的,需要调用才有用。
函数的调用:直接写函数名,如果有参数加参数,没有不用写。小括号必须写。
注意:先执行调用函数那行,再执行括号里面的,网上定义。定义和调用函数不分顺序
4、函数的参数
注意:1、形参是变量,实参是实际数量
2、函数可以一次定义多次调用
5、求两个整数的最大值
此时return被屏蔽了,则值无法传送到函数外,docnment数出的值为undefind
例子:return的运用
。
。
全局变量和局部变量
全局变量:可以在网页的任何地方(函数内部和函数外部)使用的变量,就是“全局变量”。
在函数外部定义的变量,就是“全局变量”。
“全局变量”既可以在函数外使用,也可以在函数内部使用。
“全局变量”在网页关闭时,自动消失(释放空间)。
局部变量:只能在函数内部使用的变量称为局部变量。
“局部变量”在函数内部定义,在函数内部使用。
“局部变量”在函数外部无法访问。
“局部变量”在函数执行完毕就消失了。
注意:在函数内部,省略关键字var定义的变量是“全局变量”,var关键字尽量不要省略,省略后全局变量和局部变量会混淆
注意:通过这四个比较记住两点;1、age是全局变量还是局部变量。2、第二句输出是在调用函数前还是后,是前则age没值,因为还没运行大括号内的函数,所以不知道age的值。是后则有值。
执行顺序:
先执行函数,所以先出李四。
‘
‘
拷贝传值和引用传值
Paste_Image.png
‘
’
二维数组(二维数组和表格比较像)
用的非常多,二维数组就得用两层循环来实现,也就是循环套循环
二维数组的循环与二维表格的循环一模一样
二维数组的访问:数组名后跟多个 连续的中括号【】,第1个中括号代表第一维数组,第二个中括号代表第二维数组
。
。
对象
1、对象的概念
Paste_Image.png
自定义对象(shownfo是指显示信息,方法)
1、使用new关键字结合构建函数Object()来创建一个空对象。
2、使用大括号{}来创建对象
。
。
JS内置对象
提取对象的方法格式都是:{对象(如String,Array).方法}
string(字符串)对象(共六个方法)的方法1::charAt(index)(在原字符串提取一个下标)
注意:index索引号也就是下标号。
Paste_Image.png
方法2:indexOf() (在原字符串中查找某一字符串,从左往右查,strObj.indexOf(@)=一个数字,即多少个索引值)
表单验证@中有用,查找顺序是从左往右查找。
。
方法3:lastindexOf() (在原字符串中查找某一子字符串,右找起)
方法4:substr() (在原字符串中提取一子字符串)
例子
方法5:substring() 在一字符串中提取一子字符串
方法6:split() 将字符串转换成数组
()括号内的分隔号是指字符串里面的分隔号,如果中间没有分隔号,则是空格号,如"beijingsh"转换成数组,"beijingsh".split("")=["a","b","c","d"]下面即看到逗号就分割。
注意:第12行得出的星期值是阿拉伯数字,所以要创建一个数组arr[week]就是数组第几个
例子:
利用空字符串来做分割
。
。
。
Array(数组 )对象:一个数组变量,就是一个数组对象。
length属性:动态获取数组长度。如:var len=arrObj.length
join() 数组转换成字符串
功能:将一个数组转换成字符串。
语法:arr.Obj.join(连接号)
说明:将一个数组,用指定的"连接号"连接成一个字符串。
reverse()
功能:将数组中各元素颠倒顺序
语法:arrObj.reverse()
参数:无
.
.
数组元素的删除和添加
delete运算符,只能删除数组元素的值,而所占空间还在,总长度没变(arr.length)
以前数组元素的添加,只能向后添加,不能向前添加。
表明:delect只能往后添加,若添加arr[1]=15,则15把数组中的‘男’替换了
数组元素的删除:
shift():删除数组中的第一个元素,返回删除的那个值,并将长度减1
pop():删除数组的最后一个元素,返回删除的那个值,并将长度减1
结果
数组元素的添加:
unshift():往数组前面添加一个或多个数组元素,长度改变。arrObj.unshift("a","b","c")
push():往数组结尾加一个或者多个数组元素,长度改变。arrObj.push("a","b","c")
.
.
.
Date对象:日期对象
Date对象和string对象不一样:
string对象:定义了一个字符串,其实就是一个string独享,就可以直接调用属性和方法。
()或者 new String() ,,,,,,new Array()或者[]
Date对象:必须使用new关键字来创建对象。否则无法调用Date对象的属性和方法。
创建Date对象的方法
(1)创建当前(现在)日期对象的实例,不带任何参数。
(2)创建指定时间戳的日期对象实例,参数是时间戳。
时间戳:是指某一个时间距离1970年1月1日0时0分0秒,过去了多少毫秒(1秒等于1000毫秒)。
var timer=new Date(10000)...1970年1月1日0时0分10秒
(3)指定一个字符串的日期时间信息,参数是一个日期时间字符串
var timer=new Date(2015/5/25 10:00:00);
(4)指定多个数值参数
var timer=new Date(2015,4,25,10,20,0)//顺序是:年月日时分秒(年月日必须写)
![Uploading Paste_Image_218993.png . . .]
如果是1970年前生的,没有负值,直接也是正数
例子:
结果:
。
。
。
Math数学对象
math对象是一个静态对象,换句话说,在使用Math对象,不需要创建实例
实例:随机网页背景色
script放在body后面
。
。
。
Number数值对象
一个数值对象,就是一个数值对象(Number对象)
toFixed()
功能:将一个数值转换成字符串,进行四舍五入,保留指定位数的小数。
语法:numObj.toFixed(n)
参数:n就是要保留的小数位
举例:
var a=123.9878
a=a.toFixed(2);//a="123.99"(先转换字符串)
实例:
作业:
1、
2、
3、
。
。
。
。
BOM和DOM简介(最重要的是定时器和延时器,其它了解)
BOM,browser object modle,浏览器对象模型
BOM主要提供了访问和操作浏览器各组件的方式
浏览器组件:window(浏览器窗口)、location(地址栏)、history(浏览历史)、screen(显示器屏幕)、navigator(浏览器软件)
各对象之间是有层级关系的,那么个对象之间如何访问呢?
window.document.write("ok")
window.document.body.bgColor="#FF0000"
window对象是所有其它对象的最顶层对象,因此,可以省略
.
.
window对象的属性
1、name:指浏览器窗口的名字或框架的名字。这个名字是给标记的target属性用。
*设置窗口的名字:window.name="newWin"
*获取窗口的名字:documentwrite(name)
2、top:代表最顶层窗口。如:window.top
3、parent:代表父级窗口
4、self:代表当前窗口
5、innerWidth:指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏),该属性火狐支持,IE不支持。
* 在IE下,使用document.documentElement.clientWidth来代替window.innerWidth。
6、innerHeight:指浏览器窗口的内高(不含菜单栏、工具栏、地址栏、状态栏),该属性火狐支持,IE不支持
在IE下,使用document.documentElement.clientHeight来代替window.innerHeigth。
document.documentElement就是标记对象
document.body 就是
标记对象
。
。
。
window对象方法
open()方法
功能:打开一个新的浏览器窗口。
语法:var winObj=window.open(url,name,options);
onload事件:当网页加载完成,指
标记的所有内容全部加载完成,才触发该事件(条件)。通过onload事件属性,去调用JS的函数。onload属性只有body标记才有。
在JS程序开始写window.οnlοad=init和在
是一样的,init是有名函数,所以不能加括号,如果是匿名函数,则要加括号,如匿名函数window.οnlοad=fuction(){},用匿名函数可以少写一行。
onclick事件,当单击时,去调用JS代码,所有html标记都有该事件。写在
中的某一标记中。
。
。
。
延时器方法——setTimeout()
实例:计时器
此段程序执行顺序:单击开始按钮,onclick事件触发,调用start2()函数,然后去JS中找start2()函数。然后执行函数内的功能
定时器方法----setInterval()
实例:图片执行自动变换
。
。
。
DOM对象
screen屏幕对象
navigator浏览器对象
。
location地址栏对象
。
history历史记录对象
。
。
。
.
HTML节点树
节点与节点的关系
DOM中节点类型
核心DOM中公共的属性和方法
提示:核心DOM中查找节点(标记),都是从根节点(html节点)开始的。
1、节点访问
2、对节点属性操作
3、节点的创建注意:节点就是标记。
实例:随机显示小星星
。
。
HTML DOM简介和新特性
HTML DOM访问HTML元素的方法(最常用)
元素对象属性
#######例子:
程序效果
元素对象属性
实例:书讯快递
.
CSS DOM动态样式
使用JS来操作CSS中的各种属性
JS只能操作及修改行内样式:imgObj.style.border="1px solide red"(行类样式一般是那种一个属性只能加一个值的)
对于类样式,通过className来赋值:imgObj.className="imgClass"(类的里面有好多个)
style对象
style对象属性与CSS属性的转换
。
。
/1、Event事件
2、常用事件
3、事件句柄属性
。
。
Event对象简介
DOM中的Event对象
1、DOM中引入Event对象(DOM浏览器就是标准浏览器)
![Upload Paste_Image.png failed. Please try again.]
2、DOM中Event对象属性
IE中的Event对象
实例:点出满天星星
Paste_Image.png
当当我的购物车
6和7是CSS的引入,8是JS的引入
选项卡实例
![Uploading Paste_Image_464119.png . . .]
历史篇
。
。
Form对象
表单提交和验证方法总结
1、使用submit按钮,结合onsubmit事件来实现 (最常用)
onsubmit是form的属性,不能给input标记用,input用onclick
需要阻止就返回假,不需要阻止就不需要返回
2、submit按钮,结合onclick事件,实现表单的验证和提交
3、buttom按钮(普通按钮),结合submit方法,
普通按钮的默认功能无任何功能,所以return布尔值给他没用,不要要return任何值给他
。
。
input对象
表单验证案例:
![Upload Paste_Image.png failed. Please try again.]
![Upload Paste_Image.png failed. Please try again.]
![Upload Paste_Image.png failed. Please try again.]
程序效果
二级联动菜单
slect对象属性
option对象
综合案例:二级联动菜单
。
。
HTML5
js操作完的数值赋回html元素,JS的学习相关推荐
- js 操作vuex数据_请教个有关 Vue.js 使用 Nuxt.js 服务端渲染,使用 Vuex 取数据的时候报错...
查过资料没有什么结果,首先怀疑的是 SSR 的问题,但是简单的测试感觉不是 SSR 的问题.没有找到原因,希望在这里能得到解惑! 使用 Nuxt.js 做服务端渲染,前后端分离,Token 存储在 l ...
- js在指定的td中插入html元素,js在指定位置增加节点函数insertBefore()用法实例
本文实例讲述了js在指定位置增加节点函数insertBefore()用法.分享给大家供大家参考.具体分析如下: 函数原型如下: insertBefore(参数1,参数2):在指定位置添加节点 具体代码 ...
- Js操作Select大全(取值、设置选中)
Js操作Select大全(取值.设置选中) Js操作Select是很常见的,也是比较实用的. jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自 ...
- js -- 操作sqlite数据库
最近看到一个使用js来操作sqlite数据库的,测试了一下,具体使用的是 js操作类: https://github.com/kripken/sql.js/(sqlite js 驱动) 异步请求:ht ...
- html标签使用时特别注意,用js操作struts2标签出现的有关问题
用js操作struts2标签出现的有关问题 用js操作struts2标签出现的有关问题 日期:2014-05-16 浏览次数:20232 次 用js操作struts2标签出现的问题 使用struts2 ...
- “是男人就下一百层”h5游戏全网最详细教学、全代码,js操作
"是男人就下一百层"h5游戏全网最详细教学.全代码,js操作 博主的话 游戏展示 编程工具介绍 游戏代码 代码讲解 js 第一步 切换div的显示与隐藏 js 第二步 在菜单页面用 ...
- 5.14 js对象 函数 js操作document对象
---对象 var myObject ={} /* 声明对象字面变量*/ myObject点语法取值 赋值 代码格式 var person = { name : "zhangs ...
- JS正则表达式完整版
目录 引言 第一章 正则表达式字符匹配攻略 1 两种模糊匹配 2. 字符组 3. 量词 4. 多选分支 5. 案例分析 第1章 小结 第二章 正则表达式位置匹配攻略 1. 什么是位置呢? 2. 如何匹 ...
- JS Number类型的数值转换
js有5种基本数据类型: undefined, Null, Boolean,Number, String(, Symbol).还有一种复杂类型数据: Object. Number() Number类型 ...
最新文章
- PHP中array_merge和array相加的区别分析
- 关于Redux的一些总结(一):Action 中间件 异步
- vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应
- linux启动运行级别上机,linux的启动及其运行级别
- Ajax.net实现loading登陆的效果
- 学java_如何一步一步的学Java
- Python3 使用[]提取字符
- solrCloud搭建
- ipcs命令查看管道,消息队列,共享内存
- PSPNet网络要点
- python第十六课——ascii码
- poj2528 区间覆盖
- 用Diff和Patch工具维护源码
- 在Linux和qt下安装EasyPr遇到的问题
- 桌面出现2个计算机,在一个电脑屏幕上如何同时显示两个word
- c语言查看cpu温度代码_C语言获取CPU核心温度
- gcc编译出错collect2: error: ld returned 1 exit status的解决办法
- python爬虫之通用爬虫和聚焦爬虫
- 360需要的,不是打工者——周鸿祎在360新员工入职培训上的讲话
- 安卓pdf阅读器_带笔的小尺寸BOOX Nova Pro电子书阅读器来了!
热门文章
- Hadoop 01_基础知识
- 操作系统:第四章 文件管理1 - 文件逻辑结构,物理结构,文件目录,软硬连接,文件系统
- 【Java】什么?你项目还在用Date表示时间?!日期类LocalDateTime的使用
- 【区块链:超级账本】Win10 Hyperledger环境搭建
- 【Java网络编程(四)】手写TCP聊天室——控制台版
- Java知识整理——JDBC
- 从选秀策略看市场测试
- 软件测试部分习题答案
- maven依赖 spark sql_使用Kafka+Spark+Cassandra构建实时处理引擎
- 在表示计算机内存储器容量时 1gb等于,在表示计算机内存储器容量时,1GB等于_________MB...