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. LFI & RFI & PHP封装协议之安全问题研究

    目录 . 文件包含的基本概念 . LFI(Local File Include) . RFI(Remote File Include) . PHP中的封装协议(伪协议).PHP的流式文件操作模式所带来 ...

  2. [Quick-x lua]CCLabel类数字变化动作

    之前写了个C++版本的,现在改成lua的, 两者原理是一样,但是动作的执行方式有些微区别 (因为lua无法继承CCActionInterval类,单纯使用lua的话无法调用action的update方 ...

  3. ☀【DOM对象 / jQuery对象】

    jQuery对象和DOM对象 √http://www.ituring.com.cn/article/38868 <!DOCTYPE html> <html lang="zh ...

  4. 【转】Beyond Compare for Mac中文版震撼来袭！-- 不错

    原文网址:http://mt.sohu.com/20160329/n442685522.shtml Beyond Compare想必大家都知道,它是一个专业级的一个文件对比工具,由于工作原因,我们会经 ...

  5. MailSystem.NET Gmail IMAP讀取信件

    程式的主流程為: 開啟SSL連線,逐一讀取收信匣中的信件,將信件內文HTML及附檔逐一存檔後,再將信件移至垃圾桶. 程式碼如下,補充說明我寫在註解裡,請參考: static void Main(str ...

  6. jquery 列求和

    列求和 var m = 0; $('#tb tr').each(function () { //td:eq(3)从0开始计数 $(this).find('td:eq(3)').each(functio ...

  7. CodeBlocks+opencv2.4.4+cmake+MinGW

    /*-----------------------------------------------------------------------------*   *   版权声明:*   可以任意 ...

  8. iPhone 崩溃日志解析

    方法一.在编译时保留xx.app, xx.app.dSYM在/user目录下,xcode->orgernize->Device Logs就能够自动部分定位地址 方法二.xcode 有自带的 ...

  9. å∫ç∂´ƒ©˙ˆ∆˚¬µ˜øπœ®ß†¨√∑≈¥Ω who know?

    ´é∑w∑w∑wqq¡œœ∑åååß∂˚¬∆¬˚∆˙ß∂ƒµ˜∫√ç≍Ωåœ∑´®†¥¨ˆøπ“‘æ…¬˚∆˙©ƒ∂ßåΩ≍ç≍ç√∫˜µ≤≥÷÷¡™£¢∞§§¶••ªº–≠«``¡™£¢∞§¶•ªº ...

  10. Html笔记(二)字体

    字体标签:<font> 例:<font size=5 color=red>字体标签示例</font> 注:简单颜色可以直接写对应的英文,复杂的颜色用16进制表示,表 ...