JavaScript基础A
JavaScript组成
ECMA : 全称ECMAScript,解释器、计算机语言的翻译
DOM：全称Document Object Model,赋予了JS操作HTML的能力,例如获取一个元素的时候就是用,document来操作的.
BOM：全称Browser Object Model,浏览器对象模型,操作浏览器本身,在JS里面也有一个专门的对象,就是windows.比如弹出窗口,复制到剪贴板这些,浏览器操作的事件叫做BOM操作.
各组成部分的兼容性，兼容性问题由来
ECMA       几乎没有兼容性问题
DOM        有一些操作不兼容
BOM         没有兼容问题（完全不兼容）一般不用.
 
变量类型(1)
可以把变量想象成一个用来存东西的一个盒子.
JS中,变量本身没有类型,变量的类型取决于它里面存的东西,如果存放的是数字,它就是数字变量,如果存放的是字符串,它就是字符串变量
类型：typeof运算符(用来判断一个变量的类型)
用法:返回值
1
2
var a=12; 
alert(typeof a);
6种常见类型
number数字类型、string字符串类型、boolean布尔类型、undefined未定义、object对象类型、function函数类型.
number数字类型
1
2
var a=12;  //定义了一个变量a,a里面存放了一个12
alert(typeof a);  //返回unmber数字类型
string字符串类型
1
2
a="sadwgwega";
alert(typeof a);  //返回string字符串类型
boolean布尔类型
1
2
a=true;
alert(typeof a);  //返回boolean布尔类型,只有两种情况一个true真一个false假
undefined未定义
1
2
3
var b;  //定义了b为变量,但没有给它赋值变量值,b是空的,没存放东西
alert(typeof b);  //返回undefined未定义的类型
//undefined在两种情况下出现,1真的没定义.2虽然定义了变量当没有给它赋值变量值比如现在的b.
object对象类型
1
2
a=document;
alert(typeof a);  //返回object对象类型
function函数类型.

1
2
3
4
5
a=function ()
    {
        alert("abca");
    };
alert(typeof a);  //返回function函数类型
建议:一个变量应该只存放一种类型的数据
 
变量类型(2)
数据类型转换
例子：计算两个文本框输入数字的和

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script> 
    window.onload=function () 
    { 
        var oTxt1=document.getElementById('txt1');  //通过id提取txt1文本框 
        var oTxt2=document.getElementById('txt2');  //通过id提取txt1文本框 
        var oBtn=document.getElementById('btn1');  //通过id提取btn1按钮 
   
        oBtn.onclick=function ()  //为按钮添加鼠标点击事件 
        { 
            // alert(oTxt1.value+oTxt2.value); //这两个文本框输入的内容就算是数字,JS也会默认把它认为是字符串,所以最终弹出结果将是两个字符串相连接,例如输入12和56结果为1256 
            alert(parseInt(oTxt1.value)+parseInt(oTxt2.value));  //解决方法,把文本框1和2输入的内容用parseInt( )转换为数字.这样弹出结果将为两个文本框内输入数字相加的总和. 
        }; 
    }; 
</script> 
   
<body> 
    <input id="txt1" type="text" /> 
    <input id="txt2" type="text" /> 
    <input id="btn1" type="button" value="求和" /> 
</body>
显式类型转换(强制类型转换)
parseInt( )    用来把字符串转换成数字
1
2
var a="12";
alert(parseInt(a)+1);  //将字符串12转换成数字12后+1，弹出结果为13
parseInt( )    的特性
parseInt( ) 是从左到右去扫描字符串,一旦发现一个不是数字的东西,就会跳出去,比如下例中的12px,因为px不是数字,它就会跳出去,只读取前面找到的12,换句话说,它可以把字符串里面的数字提取出来.
1
2
var a="12px";
alert(parseInt(a));  //弹出结果为12
由于parseInt( )的工作原理是从左到右,一旦看到非数字的东西就自动跳出,所以下例中px后面的34它也是不会读取的.只会读取前面第一个数字,12
1
2
var a="12px34";
alert(parseInt(a));  //弹出结果为12
当字符串里没有数字全部是字符时例如下例
1
2
var a="abc";
alert(parseInt(a));  //弹出结果为NaN
NaN,是Not a Number 的简写,意思为:非数字.
如何判断parseInt()出来的结果是否为NaN非数字
不能使用==来进行判断如下例:
1
2
3
4
var a=parseInt("abc");
var a=parseInt("bef");
 
alert(a==b);  //判断a和b是否相等,弹出结果为false假,因为在JS中NaN和NaN是不相等的,
可以用isNaN()函数来判断,它的作用就是判断一个东西是否为NaN,如下例:
1
2
var a=parseInt("abc");
alert(isNaN(a)); //弹出结果为true真,是一个NaN
扩展:在计算两个文本框输入数字的和的例子中,如果在文本框内输入12+abc的话,弹出的结果将为NaN,相当于,让12和NaN去相加,实际上,任何数和NaN相加,结果都将是NaN.
例子,文本框求和程序中加入判断输入是否为数字的功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script> 
    window.onload=function () 
    { 
        var oTxt1=document.getElementById('txt1');  //通过id提取txt1文本框 
        var oTxt2=document.getElementById('txt2');  //通过id提取txt1文本框 
        var oBtn=document.getElementById('btn1');  //通过id提取btn1按钮 
   
        oBtn.onclick=function ()  //为按钮添加鼠标点击事件 
        { 
            var n1=parseInt(oTxt1.value);  //检测第一个输入框输入内容 
            var n2=parseInt(oTxt2.value);  //检测第二个输入框输入内容 
               
            //用if判断,用户输入是否为数字,如果是数字,则弹出两个输入框内数字的和 
            if(isNaN(n1))  //判断n1如果是一个NaN的话 
            { 
                alert('你输入的第一个数字有误'); 
            } 
            else if(isNaN(n2)) //判断n2如果是一个NaN的话 
            { 
                alert('你输入的第二个数字有误'); 
            } 
            else{  //如果n1和n2都正确 
                alert(n1+n2);  //弹出n1+n2的和 
            } 
        }; 
    }; 
</script> 
   
<body> 
    <input id="txt1" type="text" /> 
    <input id="txt2" type="text" /> 
    <input id="btn1" type="button" value="求和" /> 
</body>
parseInt( )只能转换整数
1
2
var  a="3.5";
alert(parseInt(a)); //弹出结果为3因为parseInt()只能转换整数,所以它会忽略整数后面的.5
parseFloat( )可以转换小数
1
2
var  a="3.5";
alert(parseFloat(a));  //弹出结果为3.5
parseInt()、 parseFloat() 两者作用是一样的,没有区别,如果在要转换一个数字是,不知道它是整数或者小数可以直接使用parseFloat(),因为它即可转换整数也可以转换小数.
隐士类型转换
==、===和减法
1
2
3
4
var a=5;      //数字5
var b="5";    // 字符串5 
alert(a==b);  //比较后弹出true真,因为它们先被系统默认转换为相同的类型然后再来比较所以得出true真的结果.双等号是先转换类型,然后比较
alert(a===b);  //弹出结果false假,三等号,不转换类型,直接比较,a是数字型b是字符串型两者不相等,所以结果为false假
+号在JS里的两种功能,1字符串连接,2数字相加,只使用一个加号的时候系统是不会进行隐式转换的.-号在JS里只有一个功能,就是数字相减,所以当使用减号时会进行隐式转换.
1
2
3
var a="12";  //字符串12
var b="5";   //字符串5
alert(a+b);  //弹出结果125，字符串与字符串相连
1
2
3
var a="12";  //字符串12
var b="5";   //字符串5
alert(a-b);  //弹出结果7，因为系统默认先把a和b都转换成了数字类型然后才进行相减,所以-号也是一个隐式类型转换
变量作用域（作用范围）:局部,全局

1
2
3
4
5
6
7
8
9
10
11
出错无结果弹出
function aaa ()
    {
        var a=12; //局部变量:只能在定义它的函数里面使用
    };
    function bbb ()
    {
        alert(a);
    };
    aaa ();
    bbb ();
1
2
3
4
5
6
7
8
9
10
11
12
弹出结果12
var a; //在所有函数外面声明的,这就是全局变量:在所有地方都可以用
    function aaa()
    {
        a=12;
    };
    function bbb ()
    {
        alert(a);
    };
    aaa ();
    bbb ();
什么是闭包
1
2
3
4
5
6
7
8
9
10
11
12
子函数可以使用父函数中的局部变量就叫闭包
function aaa ()  //父函数
{
    var a=12; //局部变量:只能在定义它的函数里面使用
    function bbb ()  //子函数
    {
        alert(a);
    };
    bbb ();
};
 
aaa ();
命名规范
类型前缀 , 首字母大写
例如:oTxt存的是一个对象类型, aDiv 存的是一个数组类型,让别人一看就知道里面存的是什么类型.
类型前缀在给变量取名时使用,函数取名时,只要使用首字母大写就可以了.
类型 前缀 类型 实例
数组 a Array aItems
布尔值 b Boolean bIsComplete
浮点数 f Float fPrice
函数 fn Function fnHandler
整数 i Integer iItemCount
对象 o Object oDiv1
正则表达式 re RegExp reEmailCheck
字符串 s String sUserName
变体变量 v Variant vAnything

javascript-智能社-JS基础A笔记的更多相关文章

  1. Javascript进阶篇——(JS基础语法)笔记整理

    根据慕课网学习整理到一起的笔记,把东西整理到一起看起来比较方便 什么是变量字面意思:变量是可变的量:编程角度:变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可 ...

  2. javascript-智能社-JS基础B笔记

    运算符 算术:+ 加.- 减.* 乘./ 除.% 取模(也叫取余) 余数就是不能整除的多出来的那部分 比如说 23除以5 等于4.6   保留整数4舍弃小数.6  然后用保留的整数4乘以5等20  最 ...

  3. JS基础知识笔记

    2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...

  4. handlebars.js基础学习笔记

    最近在帮学校做个课程网站,就有人推荐用jquery+ajax+handlebars做网站前端,刚接触发现挺高大上的,于是就把一些基础学习笔记记录下来啦. 1.引用文件: jquery.js文件下载:h ...

  5. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  6. 两万字Vue.js基础学习笔记（二）

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  7. node.js 基础学习笔记2

    Module和Package是Node.js最重要的支柱. Node.j 提供require函数来调用其他模块,而且模块都是基于文件.模块和包区别是透明的,因此常常不作区分. 1.模块和文件一一对应. ...

  8. 二、JavaScript语言--JS基础--JavaScript进阶篇--JS基础语法

    1.变量 定义:从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服.玩具.水果...等. 命名:变量名字可以任 ...

  9. js基础学习笔记（六）

    事件(可以被 JavaScript 侦测到的行为) 主要事件表: 加载事件(onload) 事件会在页面加载完成后立即发生,同时执行被调用的程序. 卸载事件(onunload) 当用户退出页面时(页面 ...

随机推荐

  1. java的装箱与拆箱

    在 JDK1.5 引入自动装箱和拆箱的机制后,包装类和基本类型之间的转换就更加轻松便利了.那什么是装箱和拆箱呢?我们分别来看下装箱:把基本类型转换成包装类,使其具有对象的性质,又可分为手动装箱和自动装 ...

  2. BZOJ 3955 Surely You Congest 解题报告

    首先,我们可以求出源为 $1$ 号点的最短路图以及各个点到 $1$ 号点的最短路. 然后我们考虑那些距离不同的点,是一定不会发生拥堵现象的. 然后我们就只需要考虑那些距离相同的点,就相当于做一个最大流 ...

  3. 执行config文件时，config.log中报错xcrun: error: active developer path ("/Applications/Xcode.app/Contents/Developer") does not exist, use xcode-select to change

    执行 sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer 即可解决.

  4. android对大图片的缓存处理

    废话不多说,直接上代码 package com.huge.emj.common.util; import java.io.File; import java.io.FileInputStream; i ...

  5. php foreach的使用注意

    众所周知,foreach用于对数组的遍历,但是,在foreach($arr as $value)中,$value只是原值的一个副本,因此如果在foreach里进行该数值的修改,是不会影响到源数组的. ...

  6. URI Scheme

    1. 什么是URI Scheme? 一般情况下,遇到这种概念不清的问题,最好的第一手资料就是wiki,实在看不懂,再看百度百科,但前者给出的资料一般都是更加准确一些. 以下为维基百科和百度百科关于这个 ...

  7. [HDU 1254] 推箱子

    推箱子 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  8. 使用 ASR 和 Azure Pack 为 IaaS 工作负荷提供托受管 DR

    Ashish Gangwar 云 + Enterprise项目经理 几周前,我们宣布了在 Azure Site Recovery 中提供一些新功能,这些新功能适用于不同场景,可以让服务提供商在 A ...

  9. c#调用带有安全认证的java webservice

    最近使用c#调用另外一个同事写的java webservice耽误了很多时间,网上资料不太完整,走了很多弯路,希望对大家有帮助. 基本思路是1.拼装soap使用http post ,主要将验证身份信息 ...

  10. 在DDMS中查看网络使用详情

    在Android 4.0设置中的“流量使用情况”允许长期统计每个App如何使用网络资源.从4.0.3开始,配合最新发布的DDMS r17(在ADT r17 插件中有集成),您可以实时的在DDMS中查看 ...