Web—06-JavaScript_李大同
加入收藏 |
设为首页 |
会员中心 | 我要投稿
|
李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
Web—06-JavaScript
发布时间:2020-12-14 23:58:10 所属栏目:资源 来源:网络整理
导读:div class="markdown-here-wrapper" data-md-url="https://i.cnblogs.com/EditPosts.aspx?opt=1"gt; h3 id="javascript-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1.3em"JavaScript介绍 p style="margin: 0px 0px 1.2em
<div class="markdown-here-wrapper" data-md-url="https://i.cnblogs.com/EditPosts.aspx?opt=1">
<h3 id="javascript-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1.3em">JavaScript介绍
<p style="margin: 0px 0px 1.2em !important">JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互。 JavaScript是浏览器解释执行的,前端脚本语言还有JScript(微软,IE独有),ActionScript( Adobe公司,需要插件)等。
<h5 id="-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">前端三大块
//同时定义多个变量可以用","隔开,公用一个‘var’关键字
var iNum = 45,sTr='qwe',sCount='68';
<h5 id="-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">变量类型
1种复合类型:
object
<h5 id="javascript-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">javascript语句与注释
<p style="margin: 0px 0px 1.2em !important">1、一条javascript语句应该以“;”结尾
// 单行注释
var iNum = 123;
/
多行注释
1、...
2、...
/
var sTr = 'abc123';
....
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
|
....
<div id="div1">这是一个div元素
<h3 id="-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1.3em">操作元素属性
<p style="margin: 0px 0px 1.2em !important">获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 读取属性值
var sValue = oInput.value;
var sType = oInput.type;
var sName = oInput.name;
var sLinks = oA.href;
// 写(设置)属性
oA.style.color = 'red';
oA.style.fontSize = sValue;
}
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">传智播客
<h5 id="-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">通过“[ ]”操作属性:
window.onload = function(){
var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oA = document.getElementById('link1');
// 读取属性
var sVal1 = oInput1.value;
var sVal2 = oInput2.value;
// 写(设置)属性
// oA.style.val1 = val2; 没反应
oA.style[sVal1] = sVal2;
}
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" id="link1">传智播客
<h5 id="innerhtml" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">innerHTML
<p style="margin: 0px 0px 1.2em !important">innerHTML可以读取或者写入标签包裹的内容
......
<div id="div1">这是一个div元素
<h3 id="-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1.3em">函数
<p style="margin: 0px 0px 1.2em !important">函数就是重复执行的代码片。
<h5 id="-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">函数定义与执行
......
window.onload = function(){
var oBtn = document.getElementById('btn1');
/
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
/
// 直接将匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
var iCount = fnAdd(3,4);
alert(iCount); //弹出7
、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
iNum02){
sTr = '大于';
}
else
{
sTr = '小于';
}
alert(sTr);
switch (iNow){
case 1:
...;
break;
case 2:
...;
break;
default:
...;
}
<h3 id="-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1.3em">数组及操作方法
<p style="margin: 0px 0px 1.2em !important">数组就是一组数据的集合,javascript中,数组里面的数据可以是不同类型的。
<h5 id="-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">定义数组的方法
//直接量创建
var aList2 = [1,3,'asd'];
<h5 id="-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">操作数组中数据的方法
<p style="margin: 0px 0px 1.2em !important">1、获取数组的长度:aList.length;
alert(aList[0][1]); //弹出2;
<h3 id="-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1.3em">循环语句
<p style="margin: 0px 0px 1.2em !important">程序中进行有规律的重复性操作,需要用到循环语句。
<h5 id="for-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">for循环
while(i<8){
......
i++;
}
<h5 id="-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">数组去重
<p style="margin: 0px 0px 1.2em !important">可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签,获取的是一个选择集,不是数组,但是可以用下标的方式操作选择集里面的标签元素。
....
alert(aRr); //弹出['2017','4','2']
alert(aRr2); //弹出['2','0','1','7','-','2','2']
<h5 id="5-charat-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">5、charAt() 获取字符串中的某一个字符
alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl
<h5 id="8-touppercase-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">8、toUpperCase() 字符串转大写
alert(str2);
<h3 id="-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1.3em">类型转换
<h5 id="1-parseint-parsefloat-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">1、直接转换 parseInt() 与 parseFloat()
// 弹出'相等'
alert('10'-3); // 弹出7
<h5 id="3-nan-isnan" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">3、NaN 和 isNaN
2、console.log
3、document.title
<h3 id="-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1.3em">定时器
<h5 id="-javascript-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">定时器在javascript中的作用
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/
clearTimeout(time1);
clearInterval(time2);
/
function myalert(){
alert('ok!');
}
<h5 id="-" style="margin: 1.3em 0px 1em; padding: 0px; font-weight: bold; font-size: 1em">课堂练习
<p style="margin: 0px 0px 1.2em !important">1、定时器制作移动动画2、定时器制作无缝滚动3、定时器制作时钟
function toweek(n){
if(n==0)
{
return '星期日';
}
else if(n==1)
{
return '星期一';
}
else if(n==2)
{
return '星期二';
}
else if(n==3)
{
return '星期三';
}
else if(n==4)
{
return '星期四';
}
else if(n==5)
{
return '星期五';
}
else
{
return '星期六';
}
}
function todou(n){
if(n<10)
{
return '0'+n;
}
else
{
return n;
}
}
......
......
myalert();
<p style="margin: 0px 0px 1.2em !important">封闭函数:
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!