!DOCTYPE HTML>
<html>
<head>
<meta name="content-type" content="text/html; charset=utf-8">
<title> 基础视频 </title>
<script type="text/javascript" language="javascript">

window.onload=function()
{
var oTxt1=document.getElementByID('txt1');
var oTxt2=document.getElementByID('txt2');
var oBtn=document.getElementByID('btn1');

oBtn.onclick=function()

{
alert(parseInt(oTxt1.value)+parseInt(oTxt2.value));
}
}
var a=12;
alert(typeof a);
</script>
</head>
<body>
我们是好朋友

<input id="txt1" type="text" />
<input id="txt2" type="text" />
<input id="btn1" type="button" value="求和" />

</body>

</html>

居然调试不过。专心找问题ING。。。。

1.javascript的组成部分
  • ECMAscript----主要用来浏览器解析,例如,定义一个变量,函数----浏览器几乎都兼容
  • BOM(browser object model)----浏览器对象模型,针对浏览器的操作,例如弹出窗口,移动浏览器的位置,打印等等----几乎不兼容,不过用的也比较少。
  • DOM(document object model)----文档对象模型,操作页面的功能,例如获取文档的div,class,添加元素等----大部分都兼容

2.变量类型

  • number
  • string
  • boolean
  • object
  • function
  • undefined
  • 建议:一个变量只存储一个类型的数据

3.对象(js里一切都是对象)

基本类型:number,string,boolean,undefined他们都很单纯,都简简单单的(这些不是对象)

复合类型:object,数组array,日期对象date,复合类型由一些基本类型复合而成,包括了一些杂七杂八的东西。

4.数据类型转换----显示转换/隐式转换

 1 <script>
2 window.onload=function ()
3 {
4 var oTxt1=document.getElementById('txt1');
5 var oTxt2=document.getElementById('txt2');
6 var oBtn=document.getElementById('btn1');
7
8 oBtn.onclick=function ()
9 {
10 alert(parseInt(oTxt1.value)+parseInt(oTxt2.value));
11 };
12 };
13 </script>
14 </head>
15
16 <body>
17 <input id="txt1" type="text" />
18 <input id="txt2" type="text" />
19 <input id="btn1" type="button" value="求和" />
20 </body>

优化后,如果输入的不是数值,会提示。

 1 <script>
2 window.onload=function ()
3 {
4 var oTxt1=document.getElementById('txt1');
5 var oTxt2=document.getElementById('txt2');
6 var oBtn=document.getElementById('btn1');
7
8 oBtn.onclick=function ()
9 {
10 var num=parseInt(oTxt1.value)+parseInt(oTxt2.value);
11
12 if(isNaN(num))
13 {
14 alert('您输入的有误');
15 }
16 else
17 {
18 alert(num);
19 }
20 };
21 };
22 </script>

如果在文本框输入不同的两个数字,例如2和3,那么按钮的单击事件会弹出23,而不是5,因为文本框里面的东西默认的就是字符串而不是数值型的数据。这里使用parseInt函数可以转化字符串的类型。

1 <script>
2 var a='13ab';
3 alert(parseInt(a));
4 </script>

准确的说,parseInt函数是提取前面的数字,如果遇到字符串就不会继续往后面去值了。

1 <script>
2 var a='ab';
3 alert(parseInt(a));
4 </script>

如果是这样的话,会出现NaN (not a number),也就是不是一个数字的意思。

1 <script>
2 var a='12.6';
3 alert(parseInt(a));
4 </script>

如果是这样的话,会弹出12这个数字,后面的小数点直接省略了。

1 <script>
2 var a='12.6';
3 alert(parseFloat(a));
4 </script>

parseInt的兄弟parseFloat函数。

NaN(这是个神奇的东西,他和自己也不相等,可能在某种程度上有区别吧)

JavaScript 以 NaN 的形式输出 Number.NaN。请注意,NaN 与其他数值进行比较的结果总是不相等的,包括它自身在内。因此,不能与 Number.NaN 比较来检测一个值是不是数字,而只能调用 isNaN() 来比较。

1 <script>
2 var a=parseInt('ab');
3 var b=parseInt('ab');
4 alert(a==b);
5 </script>
1 <script>
2 var a=parseInt('ab');
3 var b=parseInt('ab');
4 alert(a==b);
5 </script>

这两个的结果都是flase.以上都是属于显示转换。

隐式转换:

1 <script>
2 var a='2';
3 var b=2;
4 alert(a==b);
5 </script>

运行结果是true。这就是一个隐式转换的例子,他会把两边的数据类型进行比较然后相加。

1 <script>
2 var a='2';
3 var b='2';
4 alert(a-b);
5 </script>

如果是减号那么结果是0,如果是加号结果就是22;你懂得应该。只有加法不能转化,乘除减法都可以。

关于===

全等就是不仅要内容相等,而且类型也要相等。

5.变量作用域

  • 全局变量---是魔鬼==!
  • 全局变量的存在主要有以下一些原因:
    1,使用全局变量会占用更多的内存(因为其生命期长),不过在计算机配置很高的今天,这个不成为什么问题,除非使用的是巨大对象的全局变量,能避免就一定要避免。
    2,使用全局变量程序运行时速度更快一些(因为内存不需要再分配),同样现在也快不了多少。
    3,对于局部变量的名字空间污染,这个在不使用太多变量时是可以避免的。
    4,当全局变量与局部变量重名的时候,起作用的是局部变量,全局变量被屏蔽掉。
    总之,全局变量可以使用,但是全局变量使用时应注意的是尽可能使其名字易于理解,而且不能太短,避免名字空间的污染;避免使用巨大对象的全局变量。(这一段摘自百度百科)
  • 局部变量---闭包

这里比较好理解就不解释了。闭包的知识细节还有很多,今天先到这吧,洗澡睡觉,晚安~

  •  1 <script>
    2 function aa(){ //父函数
    3 var a=1;
    4 function bb(){ //子函数,可以啃老。
    5 alert(a);
    6 };
    7 bb();
    8 };
    9 aa();
    10 </script>

javascript 基础篇 随课笔记的更多相关文章

  1. 一步步学习javascript基础篇(0):开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  2. 一步步学习javascript基础篇(3):Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  3. JavaScript基础第05天笔记

    JavaScript基础第05天笔记 1 - 作用域 1.1 作用域概述 通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域.作用域的使用提 ...

  4. JavaScript基础第04天笔记

    JavaScript基础第04天笔记 1 - 数组 1.1 数组的概念 数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式. 数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以 ...

  5. JavaScript基础第03天笔记

    JavaScript基础第03天笔记 1 - 循环 1.1 for循环 语法结构 for(初始化变量; 条件表达式; 操作表达式 ){ //循环体 } 名称 作用 初始化变量 通常被用于初始化一个计数 ...

  6. Javascript基础篇小结

    转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器 ...

  7. JavaScript基础第02天笔记

    JavaScript基础第02天 1 - 运算符(操作符) 1.1 运算符的分类 运算符(operator)也被称为操作符,是用于实现赋值.比较和执行算数运算等功能的符号. JavaScript中常用 ...

  8. JavaScript基础第01天笔记

    JavaScript基础第01天 1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...

  9. 一步步学习javascript基础篇(8):细说事件

    终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能 ...

随机推荐

  1. ASP.NET-ajax.acionlink使用

    Ajax 属性的ActionLink方法可以创建一个具有异步行为的锚标签. ActionLink方法的第一个参数指定了链接文本,第二个参数是要异步调用的操作的名称.类似于同名的HTML辅助方法,AJA ...

  2. Qt之表单布局(QFormLayout)

    简述 QFormLayout管理输入型控件和关联的标签组成的那些Form表单. QFormLayout是一个方便的布局类,其中的控件以两列的形式被布局在表单中.左列包括标签,右列包含输入控件,例如:Q ...

  3. [MST] Loading Data from the Server using lifecycle hook

    Let's stop hardcoding our initial state and fetch it from the server instead. In this lesson you wil ...

  4. find the safest road HDU杭电1596【Dijkstra || SPFA】

    pid=1596">http://acm.hdu.edu.cn/showproblem.php?pid=1596 Problem Description XX星球有非常多城市,每一个城 ...

  5. JS 去除字符串中的最后一个字符

    var str = 'Hello World!'; str = str.substr(0,str.length-1); alert(str);

  6. 全栈JavaScript之路(十一)学习 Attr 类型 节点

    元素的特性在DOM 中用Attr 类型的节点表示.在全部浏览器中都能够訪问 Attr 类型的构造函数与原型. 从技术上讲,Attr 类型节点 就是指,元素的 Attrbutes 属性 中的节点.构造器 ...

  7. 学习bootstrap

    菜鸟教程 bootstrap开发框架 伍华聪 Bootstrap——一款超好用的前端框架

  8. 2.安装 CLI和CLI的工作原理

    转自:https://www.gruntjs.net/getting-started 还在使用 Grunt 0.3 版本吗?请查看 Grunt 0.3 注意事项 在继续学习前,你需要先将Grunt命令 ...

  9. RadioButton的drawableTop图片文字不居中

    在安卓应用的开发中,一般普通应用用到最多的就是底部放一个RadioGroup实现切换的布局,今天在实现的时候,却出现了底部RadiButton的drawableTop图片及文字无法居中的情况,经过对比 ...

  10. cnmp安装失败,报错npm ERR! enoent ENOENT: no such file or directory,

    1.cnmp安装失败 2.提示如下: bogon:node_modules liangjingming$ sudo npm install cnpm -g --registry=https://reg ...