javascript快速入门

javascript

javascript
- js代码写在哪里
- js语法快速入门

01. js代码写在哪里

js代码在HTML中的使用有两种方式:
1. 直接嵌入HTML中
2. 引入外部js文件

需要注意的是,如果引入了外部js文件,那么HTML文件中的js代码就不会再执行.

    <!-- 直接在HTML文件中嵌入js代码 -->
    <script type="text/javascript">
    window.alert("hehe");
    </script>

    <!-- 通过src属性引入外部文件 -->
    <script type="text/javascript" src="demo.js">

js代码可以写在什么位置
js代码可以放在HTML文件的任意位置,head或者body中都可以.

02. js语法快速入门

任何一门语言,基础入门都是很简单的. 语法结构大致上都是差不多的,只是关键字上的些许区别. 说到语法,无外乎,语句的格式,数据类型,运算符还有各种函数结构等. 所以这一章,快速的熟悉下js语法.

js的注释:
写注释是一种对自己对别人负责的习惯,可以说是一个程序员情怀的体现. 我相信做个一个智商平平的正常人,即使是自己写的代码,如果没有注释,过个两三个月再去看起来也是会一脸懵逼的(至少我是这样的…) 所以注释是一个好习惯…

js的注释和java一样一样一样的. 有两种(不对,java好像是3种…):
- 单行注释://
- 多行注释:/**/

js的变量声明:
js是一种弱类型语言,在声明变量的时候,不需要指定数据类型. 但是这并不代表着js没有数据类型.
变量的声明只有一种方式:var name="thecather";
但是如果一个关键字它只有唯一的作用的话而且写不写都不会引起歧义的话,那么他就没有存在的必要,所以js中的变量声明关键字var不写在语法上是没有错误的. 结束标识符分号也可以省略. 但是没事儿别瞎逑整,还是入乡随俗的好,改写的还是写上.

js的数据类型:
js是一种动态数据类型,换句话说在运行的时候才去确定数据类型.
js的数据类型也分为两种,基本数据类型和引用数据类型.
基本数据类型有:
- 字符串(String):
- var name='thecatcher'
- 使用引号包裹的玩意儿会被认为是字符串类型
- js中单引号和双引号的作用是一样一样的. 不进行区分. 但是智商正常的人都知道,不可以混用…
- 数字(Number):
- var i = 12
- var j = 12.21
- js只有一种数字类型,那就是Number,数字类型不区分整数和小数. 换句话说12.21和12都是Number类型. 没有小数到整数转换时发生的精度丢失.
- 布尔型(boolean):
- true/false
- 空类型:Null
- 未定义类型(Undefined): 变量声明了,但是没有复制

引用类型就不多说了,就是一个封装的指针引用.

由于js是动态类型,所以在程序没有执行到相关语句之前是无法知道其数据类型的. 按照剧本,一般这种动态数据类型的语言都会提供一个函数来检测数据类型. js中检查变量数据类型的函数是typeof().

js的数组
js数组的声明:

var numArray = new Array();
numArray[0] = 1;
numArray[1] = 2;
numArray[2] = 3;

或者可以写成
var numArray = new Array(){1,2,3};

js的函数
函数使用关键字function来定义.
首先我们来想一下,按照正常的剧本,一个函数,应该有哪些东西,然后这些东西在js中有没有必要出现.
- 权限修饰符 –>我也不知道js中有没有…没研究那么深入,至少到目前我没看到过
- 返回值类型 –>js是弱类型语言(弱类型,强类型,动态类型,静态类型…搞不懂编译原理的很难区分的清楚,说的不严谨,不喜勿喷…)所以返回值类型是没有存在的必要的.
- 函数名–>这个必须有
- 形参列表–>这个必须有
- 函数体–>没函数体搞个毛函数
- 执行逻辑
- return语句–>js虽然不需要声明返回类型,但是人家函数也是可以返回数据的.

关于全局变量和局部变量,生命周期,还有一个奇葩的规则.
- 简而言之,声明在函数内部的变量是局部变量,生命在函数外面的变量是全局变量. 即使它们不在一个script标签内.
- 局部变量会在函数执行结束后被销毁,全局变量会在页面关闭后被销毁.
- 一个奇葩的规则,给一个未声明的变量赋值,那么这个变量会自动被声明为全局变量. 即使它在函数内部.

举个栗子:

<!DOCTYPE html>
<html>
<body>

<p>本例调用的函数会执行一个计算，然后返回结果：</p>

<p id="demo"></p>

<script>
function myFunction(a,b)
{
//var test = 111;
test = 111;//一个变量如果没有声明就被赋值的话,该变量会自动被作为全局变量声明.(好奇怪的规则...)
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);
alert(test); 
</script>

</body>
</html>

这证明它是个局部变量
这里写图片描述

js的运算符
运算符大致分为算数运算符,比较运算符,逻辑运算符还一个和java一样一样一样的三元运算符.

算数运算符,我无耻的截图了.(出自:http://www.w3school.com.cn/js/js_operators.asp)
这里写图片描述
赋值运算符,=,+=,-=,*=,/= 等等

还有一个字符串连接运算符”+”,注意js中数字和字符串使用”+”的时候,会把数字转换成字符串再拼接.(java说,谁不是呢…)
但是如果使用”-“的话就不一样了. 会把字符串解析为数字,再计算.

x = 5+5;    //10
x = "5"+"5";//55
x = 5+"5";  //55
x = "5"+5   //55
x = "5"-2   //3

还有一些更反人类的,布尔类型的加减.

<script type="text/javascript">
var flag1 = true;
var flag2 = false;

document.write(flag1+1+"<br>"); //2
document.write(flag2+1+"<br>"); //1
document.write(flag1-1+"<br>"); //0
document.write(flag2-1+"<br>"); //-1
document.write(flag1+2+"<br>"); //3
document.write(flag2+2+"<br>"); //2
document.write(flag1-2+"<br>"); //-1
document.write(flag2-2+"<br>"); //-2

</script>

简单来说,布尔类型的true默认是1,布尔类型的false默认是0或者null.(不知道是不是底层布尔类型就是使用Number类型实现的)

比较运算符,我又无耻的截图了.
这里写图片描述

比较运算符中比较有意思的是===, 值和类型都相等的时候才是相等.

        var num=8; 
        var str3="8";
        alert(num==str3); //true
        alert(num===str3);//false

逻辑运算符: 与(&&)或(||)非(!)

三目运算符:
x>y?x:y x>y吗,true,返回x,false,返回y.

js常见的流程控制结构
流程控制语句不外乎就选择分支和循环.(好像哪个始祖般的大神论证过,说程序只有需要三种结构,顺序结构,选择分支和循环,不记得是谁了.)

选择分支:
- if…
- if…else…
- if–else if…else…
- switch…case…
循环:
- for(statement1,statement2,statement3)
- for…in… 有点类似foreach
- while
- do while

栗子不写了,跟java一样一样一样的,w3cshool上有例子.

break和continue

break 跳出循环
continue 中断循环中的本次迭代,说人话就是,跳过本次循环

不是很明白,这些大神们在设计程序语言的时候是怎么想的,难倒他们就这么没有想象力吗,关键字几乎都是一样的.或许他们的情怀是我等小菜鸟所不能理解的. 他们应该是更关注的底层的实现,而这些关键字什么玩意儿的,为了大家方便学习几乎都是很相似的.(除了perl的elsif, 记得当时看小骆驼的时候,笔者傲娇的说,我就是要搞成这样,不服咬我?不记得原文了,以我的英文水平就是这样理解的)

异常和异常处理
try-catch-finally的结构.

<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="本页有一个错误。

";
  txt+="错误描述：" + err.message + "

";
  txt+="点击确定继续。

";
  alert(txt);
  }
finally{
alert("我试试finally有没有");
}
}
</script>

js中还有一个throw,可以创建或者抛出异常.

 <script>
function myFunction()
{
try
{ 
var x=document.getElementById("demo").value;
if(x=="")    throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10)     throw "太大";
if(x<5)      throw "太小";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="错误：" + err + "。"+err.message;
}
}
</script>