JS一起学03：js组成、下拉+text、字符串拼接、分号问题、数据类型、变量类型、作用域和闭包、命名、运算符、流程判断、调试、iNow、onchang

一、javaScript组成

1、ECMAScript：解释器、翻译 ---------------------------------------------------------几乎没有兼容性问题

2、DOM：Document Object Model --------操作HTML的能力----document--------有一些兼容性问题

3、BOM：Browser Object Model -------------浏览器---------------window----------完全不兼容

（各组成部分的兼容性，兼容性问题的由来）

二、下拉+text

var oSel=document.getElementById('sel');

var oBtn=document.getElementById('btn');

var oTxt=document.getElementById('txt');

var oDiv=document.getElementById('div1');

oBtn.οnclick=function(){

function setStyle(name,value){

oDiv.style[name]=value;

}

setStyle(oSel.value,oTxt.value);

}

三、字符串拼接

alert('abc'+12+5+'def'); ------abcd125def

（1）字符串和数字相加，会把数字转变成字符串

alert(12+5+'abcd'+'def'); ------ 15abcdefg

（2）程序从左向右执行

alert('abcd'+(12+5）+‘def'); ----abcd17def

乘法表：

1*1=1

1*2=2 2*2=4

1*3=3 2*3=6 3*3=9

1*4=4 2*4=8 3*4=12 4*4=16

var oUl=document.getElementById('ul1');

for(var i=0; i<9; i++){ //i代表第几行

var s='<li>';

for(var j=0; j<i+1; j++){

s+='<span>'+(j+1)+'*'+(i+1)+'='+(j+1)(i+1)+</span>';

}

s+='</li>';

oUl.innerHTML+=s;

}

四、分号问题

1. window.οnlοad=function(){}; //此处是因为赋值，所以加分号，和function无关

即：元素.事件=function (){};

2. if/while循环/for循环/function(){} 不要加分号

站长工具--压缩

五、数据类型

1. 基本数据类型———不可拆分

（1）字符串string

（2）数字number

（3）布尔值boolean

（4）undefined

2. 混合数据类型——object

（1）数组array

（2）元素element

（3）方法function

六、变量类型

1、类型：typeof运算符

（1）用法：返回值

（2）常见类型：number（包括NaN）、string、boolean、undefined、object（包括数组、空对象null）、function

2、一个变量应该只存放一种类型的数据

3、value获取到的是字符串 .alert(oTxt1.value+oTxt2.value);

4、数据类型转换

（1）显式（强制）

A、parseInt：可以过滤掉数字后的非数字，和小数

B、parseFloat：保留小数，可以带字母

C、Number：保留小数，但不允许任何非数字成分，只能转纯数字。

例子：var s='12ebfm45'— parseFloat— '12'

var s='12ebfm45'— Number— NaN

var s='12451.11'— Number — 12451.11

var s='12px'; s=Number(s); alert(typeof s); 会弹出NaN。

B、NaN的意义和检测

NaN和NaN不相等

NaN属于数字类型 alert(typeof NaN);---->number

文本框相加特别注意处：

一定要把两个都不是数字的情况放在第一个不是数字的情况前面：if(isNaN(num1)&&isNaN(num2)){

alert('两个都不是数字');

}else if(isNaN(num1){

alert('第一个不是数字');

}else{……}

（2）隐式

A、==先转换类型，再比较_————alert( 4=='4' ); 返回true;

===不转类型直接比（既比类型又比值）alert(4==='4');返回false;

B、< 、<=、>、>=、*、/、也会执行隐式转换————alert(4<'5');返回true; var s='5'; s=s*'4'; alert(s); 隐形转换

C、字符串与另一数字或字符串相减、乘除都会进行隐式转换 var a="12"; alert(a/2);----6（加号的作用有字符串连接、数字相加 var a="12.5"; alert(a-0+5);-----17.5）

D、取余%

（3）数字--->字符串：加引号：alert("a"+12+5); alert(""+12+5);

相关练习：

1、比较两个数的大小

var aInput=document.getElementsByTagName('input');

aInput[2].οnclick=function(){

var value1=Number(aInput[0].value);

var value2=Number(aInput[1].value);

if( isNaN(value1)||isNaN(value2)||aInput[0].value==''|| aInput[1].value==''||value1==' '|| value2==' '){

alert('输入数字');

}else{

// > < 隐性转换－〉 JS帮你Number(str)

if(value1<value2){

alert(value2+'大');

}else if(value1>value2){

alert(value1+'大');

}else{

alert('相等');

};

};

};

2、判断一个数字是不是整数

var value=aInput[0].value;

if(value==parseInt(value)){

alert('整数');

}

3、简易网页计算器

var aInput=document.getElementsByTagName('input');

var oSe=document.getElementById('se');

aInput[2].οnclick=function(){

var value1=Number(aInput[0].value);

var value2=Number(aInput[1].value);

switch(oSe.value){

case '+':

alert(value1+value2);

break;

case '-':

alert(value1-value2);

break;

case '*':

alert(value1*value2);

break;

case '/':

alert(value1/value2);

break;

};

七、变量作用域和闭包

1、变量作用域（作用范围）

（1）局部变量

局部变量只能在定义它的函数里使用

（2）全局变量

var a=44;

function fn(){

alert(a);

var b=33;

fn2();

};

fn();

function fn2(){ //看函数的作用域。是看它定义在哪

alert(b);

};

2、什么是闭包---子函数可以使用父函数中的局部变量

function fn(){

var a=444;

function fn3(){

alert(a);

};

return function(){

alert(a);

};

var fn2=fn(); //闭包

fn2();

八、命名规范

1、命名规范及必要性

（1）可读性——能看懂

（2）规范性——符合规则

2、匈牙利命名法

（1）类型前缀

（2）首字母大写

3、类型 前缀类型实例

数组 a Array altems

布尔值 b Boolean blsComplete

浮点数 f Float fPrice

函数 fn Function fnHandler

整数 i Integer itemCount

对象 o Object oDiv1

正则表达式 re RegExp ReEmailCheck

字符串 s String sUserName

变体变量 v Variant vAnything

九、运算符

1、算术：+加 -减 *乘 /除 %取模

实例：隔行变色、秒转时间、可以用-0来将value转成数字类型

i=i+1 i+=1 i++ i=i+3 i+=3

2、赋值：=、 +=、 -=、 *=、 /=、 %=（小%大=小，隔行变色）

3、关系（比较）：<、 >、 <=、 >=、 ==、 ===、 !=、 !==（不全等）

4、逻辑：&&与、 ||或、 !非

5、运算符优先级：括号。另外，！优先级比>高

if(!2>3){

alert(">"); //!优先级高于>，所以先计算!2是false，再计算false>3.这里把false转成0，所以false>3是错的false，所以走else中的语句

}else{

alert("<");

}

简易计算器：

var aInput=document.getElementsByTagName('input');

var num1=aInput[0];

var num2=aInput[1];

var oSe=document.getElementsByTagName('select')[0];

var oBtn=aInput[2];

oBtn.οnclick=function(){

var O=oSe.value;

var n1=num1.value;

var n2=num2.value;

if(n1==''||n2==''){

alert('请输入两个数字');

}else if(isNaN(n1)||isNaN(n2)){

alert('至少一个输入的不是数字，请检查!');

}else{

switch(O){

case "+":

alert(Number(n1)+Number(n2));

break;

case "-":

alert(Number(n1)-Number(n2));

break;

case "*":

alert(Number(n1)*Number(n2));

break;

case "/":

alert(Number(n1)/Number(n2));

break;

}

计算任意个文本框的和：

var aT=document.getElementsByTagName('input');

var oBtn=document.getElementById('btn1');

oBtn.οnclick=function(){

var result=0;

var ok=true;

for(var i=0; i<aT.length; i++){

var n=parseInt(aT[i].value);

if(isNaN(n)){

alert('第'+(i+1)+'个是错的');

ok=false;

}

result+=n;

}

if(ok){

alert('总共是'+result);

}

十、流程控制（判断）

1、判断：if、switch、？:

(1) switch(变量){

case 值1:

语句1

break;--------跳出，后面的就不执行了

case 值2:

语句2

break;

……

default:

语句n

}

例子：switch(true) {

case 4>6:

alert('星期一');

break;

case 7>5:

alert('星期二');

break;

};

(2)?:三目运算符---只能执行一句话

条件?语句1:语句2;

A. 10>9?alert(10):alert(9);//正常

B. 10>9?var a=10:var a=9; //报错因为var 必须放在行首，正确为：

var a=10>9?10:9;

(3)条件 &&

if(10>6){

alert(10);

}

简化条件 && 条件成立执行

即 10>6 &&alert(10);

2、循环：while、for

3、跳出：break、continue（只用在循环和switch里用）

break：跳出

continue：跳过本次循环，后面的继续执行

function show(){

for(var i=0;i<5;i++){

if(i!=3){

alert(i);

}else{

break;

}

show();

function show(){

for(var i=0;i<5;i++){

if(i==3){

continue;

}

alert(i);

}

show();

4、什么是真、什么是假

（1）真：true、非零数字、非空字符串、非空对象、空格

（2）假：false、数字零、空字符串、空对象、undefined、null、NaN

5、参数

function fn(){

alert(arguments.length);

}

fn(1,2,3);

十一、调试

1. alert();

2. document.title

3. ie-----禁用脚本调试

4. google:console.log(a) 内部输出，调试，计算器

5. FF：Ctrl+shift+J

十二、iNow

1. 简单的历史图库

window.οnlοad=function(){

var oUl=document.getElementsByTagName('ul');

var aLi=oUl.children;

var aBtns=document.getElementsByTagName('input');

var iNow=0;

aBtns[0].οnclick=function(){

iNow++;

if(iNow==aLi.length)iNow=0;

oUl.style.left=-iNow*400+'px';

}

aBtn[1].οnclick=function(){

iNow--;

if(iNow==-1)iNow=aLi.length-1;

oUl.style.left=-iNow.400+'px';

}

<ul>

</ul>

</div>

</div>

JS一起学03：js组成、下拉+text、字符串拼接、分号问题、数据类型、变量类型、作用域和闭包、命名、运算符、流程判断、调试、iNow、onchang相关推荐

动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
html搜索框如何加下拉框,js实现带搜索功能的下拉框
本文实例为大家分享了js实现带搜索功能的下拉框,供大家参考,具体内容如下 1.介绍在实现下拉框的时候,如果用select+option可以在满足pc端的需求,但如果需应用到手机端,由于select的 ...
[Ext JS 4] 实战之多选下拉单 (带checkbox) 续 - 带ALL 选项
前言在 [Ext JS 4] 实战之多选下拉单 (带checkbox) 这一篇中有介绍如何开发带有checkbox 的多选菜单. 但是实际项目开发过程中, 用户的需求也是不断精进的. 使用淘宝或是其 ...
超赞的动漫主题大学生网页html作业带报告 JS轮播图表单视频下拉菜单栏
动漫主题网页设计,制作精良.完成度较高,运用有js轮播图.下拉菜单栏.鼠标滑过效果.js正则表达式等,子页面运用图文混排不重复排版,另有制作报告1500字,描述了制作过程.方法.总结等.预览视频如下: ...
vant 下拉框样式_使用 Vue 的 Vant.js List 列表组件实现无限下拉
拉取历史记录,并在前端做无限下拉展示,是一个非常常见的使用场景. 最近在使用的 Vant (轻量.可靠的移动端 Vue 组件库),实现起来就非常方便. 模板实现代码 v-model="loa ...
html滚动条自动下拉,[JS] jquery实现div随滚动条下拉浮动功能
1.简介 div浮动,当滚动条下拉时,将div浮动到固定位置上. 2.实现引用jquery.js略 1.html div加id="float".如浮动内容 2.css 样式.d ...
[Ext JS 4] 实战之多选下拉单 (带checkbox)
前言 Ext js 创建一个多选下拉单的方式很简单, 使用Ext.form.ComboBox, 设置 multiSelect 为true 就可以了. 但是如果要在每个下拉之前加上一个checkbox, ...
JS实现，利用两个下拉菜单，选择省份与对应城市
效果图 HTML页面代码部分 <body>省份<select id="province" onchange="showCity()">& ...
js实现页面的上滑下拉功能
这两天做项目,用到了上滑和下拉的功能,主要是通过监听touchmove,touchstart,touchend三个事件去判断页面上滑状态还是下拉状态. 同时加一个知识点:有时在监听时会报错,这个错是这 ...

JS一起学03：js组成、下拉+text、字符串拼接、分号问题、数据类型、变量类型、作用域和闭包、命名、运算符、流程判断、调试、iNow、onchang

JS一起学03：js组成、下拉+text、字符串拼接、分号问题、数据类型、变量类型、作用域和闭包、命名、运算符、流程判断、调试、iNow、onchang相关推荐

最新文章

热门文章