首页 > Web开发 > 详细

【JS学习笔记】JS基础

时间:2017-01-25 17:30:21      阅读:224      评论:0      收藏:0      [点我收藏+]

一、JavaScript的组成

ECMAScript解释器、翻译器。一方面把我们输入的代码语言翻译给计算机,另一方面把计算器输出的语言翻译给我们看。

DOM:Document Object Model,DOM赋予了JS操作HTML文档的能力,像获取元素,改变背景,创建元素,删除元素等等,都需要用到DOM操作

BOM:Browser Object Model,浏览器对象模型,可以操作浏览器本身,和浏览器打交道的操作

各组成部分的兼容性,兼容性的由来

ECMA:几乎没有兼容性问题

DOM:有一些操作不兼容

BOM:没有兼容问题(完全不兼容)

 

二、变量类型

typeof运算符

常见的类型:number,string,boolean,undefined,object,function

一个变量应该组存放一种类型的数据

(1)变量

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>变量</title>
<script>
var a=12;
//alert( typeof a);//输出number

a="asdg"
//alert(typeof a);//string

a=true;
//alert(typeof a);//boolean

a=function() {
    alert(‘adasdg‘);
    };
    
//alert(typeof a);

a=document;
//alert(typeof a);

var b;
alert(typeof b);//undefined 1、真的没定义2、虽然定义了,但是没给东西
</script>

</head>

<body>
</body>
</html>

(2)parseInt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parseInt</title>
<script>
var a=‘12‘;
//alert(parseInt(a)+1);//parseInt的作用就是把字符串转成数字

var a=‘12px34‘;
//alert(parseInt(a));//parseInt是从左到右识别数字的,遇到不是数字的元素立马跳出,因此只显示12

var a=‘abc‘;
alert(parseInt(a));//parseInt从左到右开始识别发现都不是数字,则跳出NaN-Not a Number 非数字
</script>
</head>

<body>
</body>
</html>

(3)NaN

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NaN</title>
<script>
var a=parseInt(‘abc‘);
var b=parseInt(‘def‘);

alert(a==b);//NaN与NaN是不相等的
</script>
</head>

<body>
</body>
</html>

(4)求和

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>求和</title>
<script>
window.onload = function ()
{
    var oTxt1=document.getElementById(‘txt1‘);
    var oTxt2=document.getElementById(‘txt2‘);
    var oBtn=document.getElementById(‘btn1‘);
    
    oBtn.onclick = function ()
    {
        var n1=parseInt(oTxt1.value);
        var n2=parseInt(oTxt2.value);
        
        if(isNaN(n1))
        {
            alert(‘您输入的第一个数字有误‘);
            }
        else if(isNaN(n2))
        {
            alert(‘您输入的第二个数字有误‘);
            }
        else
        {    
            alert(n1+n2);
        }
        };
    };
</script>
</head>

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

(5)parseFloat 字符串转化成小数

 

 三、数据类型转换

(1)显示类型转换(强制类型转换)

parseInt()、parseFloat()

NaN的意义和检测

(2)隐式类型转换

==、===

减法

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隐式类型转换</title>
<script>
var a=5;
var b=‘5‘;

//alert(a==b);//true 先转换类型然后比较

//alert(a===b);//false 不转换类型,直接比较
</script>
</head>

<body>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隐式类型转换2</title>
<script>
var a=‘12‘;
var b=‘5‘;

alert(a+b);//首先是加号的功能1、做字符串的连接2、数字相加,因此计算机会直接选择字符串连接
alert(a-b);//减号的用途仅仅是数字相减
</script>
</head>

<body>
</body>
</html>

 

四、变量作用域和闭包

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>局部变量和全局变量</title>
<script>
var a;//全局变量:在任何地方都能用

function aaa()
{
    a=12;//var a=12;局部变量:只能在定义它的函数里面使用
    };
    
function bbb()
{
    alert(a);
    };
    
aaa();
bbb();
</script>

</head>

<body>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>闭包</title>
<script>
//子函数可以使用父函数的局部变量
function aaa()//父函数
{
    var a=12;
    function bbb()//子函数
    {
        alert(a);
        };
        bbb();
    };
    
aaa();

</script>

</head>

<body>
</body>
</html>

 

五、命名规范

(1)命名规范及必要性

可读性——能看懂

规范性——符合规则

(2)匈牙利命名法

类型前缀

首字母大写

技术分享
 
 

 

【JS学习笔记】JS基础

原文:http://www.cnblogs.com/zhy2017/p/6349707.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!