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. What Can I Do With This Major?

    What Can I Do With This Major? Majors Don’t see your major? Accounting Advertising Africana Studies ...

  2. Ajax.BeginForm返回方法OnSuccess

    在MVC3里面——程序集 System.Web.Mvc.dll, v4.0.30319有这么一个Ajax.BeginForm异步登录验证的类型,我们在下面给出一个例子:在登录页面Logion.csht ...

  3. ServletInvocableHandlerMethod:167 - Error resolving argument

    at org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.handleMissingValue(R ...

  4. Markdown简单语法总结

    . 标题 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 2. 列表 无序列表 * 西瓜 * 葡萄 * 香蕉 - 西瓜 - 葡萄 - ...

  5. JAVA信号量使用示例程序

    JAVA里也有强大的信号量工具Semaphore,使用信号量可以很方便的实现线程同步功能,以解决类似于 生产者——消费者 之类的典型问题. 下面是我的测试程序,大部分看注释就可以明白用法: impor ...

  6. Form 重置记录编号（app_record.for_all_record）

    A block lines has item line_number. When a record is deleted, line_number must be renumbered. step 1 ...

  7. 为什么你的 phpinfo() 无法显示

    一.问题描述 编写了一个php文件test.php,代码如下: <?php echo phpinfo(); ?> 浏览器访问了一下,却返回了 NULL. 二.问题定位及解决 网上查了下,大 ...

  8. @Resource和@Autowired

    @Resource的作用相当于@Autowired,只不过@Autowired按byType自动注入,而@Resource默认按 byName自动注入罢了.@Resource有两个属性是比较重要的,分 ...

  9. 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

    D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...

  10. （转载）四种常见的 POST 提交数据方式

    (转载)http://www.imququ.com/post/four-ways-to-post-data-in-http.html HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS ...