03-JavaScript语法介绍

 

　　本篇主要关于原生JavaScript的介绍，其中包括其嵌入HTML页面方式，JavaScript的语法结构，以及贪吃蛇案例；

一、绪论

　　JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互，JavaScript是浏览器解释执行的。

　前端三大块 
　　1、HTML：页面结构
　　2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
　　3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

 

二、JavaScript的嵌入方式

　　1、行间事件（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

　　2、页面script标签嵌入

<script type="text/javascript">        
    alert('ok！');
</script>

　　3、外部引入，在日常项目中我们通常将 .js 文件放在js文件夹内；

<script type="text/javascript" src="js/index.js"></script>

　而在第二种方式中，我们想要获取HTML中的元素时，若直接写则会获取不到HTML中的元素，那么有两种解决方式：

　　一、将<script></script>标签写在<html></html>标签的下面；

　　二、在<script></script>下写入document.onload事件，例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>javascript引入方式</title>
    <script type="text/javascript">
        document.onload = function(){
            // JavaScript代码
        }
    </script>
</head>
<body>

</body>
</html>

 

三、变量、数据类型及语法规定

　　JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'；

var iNum = 123;
var sTr = 'asd';

 //同时定义多个变量可以用","隔开，公用一个‘var’关键字

 var iNum = 45,sTr='qwe',sCount='68';

　3.1 变量类型--5种基本数据类型：

　　1、number 数字类型
　　2、string 字符串类型
　　3、boolean 布尔类型 true 或 false
　　4、undefined undefined类型，变量声明未初始化，它的值就是undefined
　　5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null；

　　1种复合类型：object，可能是数组、对象等

　　

　3.2 变量、函数、属性、函数参数命名规范

　　　1、区分大小写
　　　2、第一个字符必须是字母、下划线（_）或者美元符号（$）
　　　3、其他字符可以是字母、下划线、美元符或数字

　3.3 匈牙利命名风格：

　　对象o Object 比如：oDiv
　　数组a Array 比如：aItems
　　字符串s String 比如：sUserName
　　整数i Integer 比如：iItemCount
　　布尔值b Boolean 比如：bIsComplete
　　浮点数f Float 比如：fPrice
　　函数fn Function 比如：fnHandler
　　正则表达式re RegExp 比如：reEmailCheck

 

四、函数及匿名函数

　　4.1 函数

　　函数就是重复执行的代码片。

<script type="text/javascript">
function fnAdd(iNum01,iNum02){
    var iRs = iNum01 + iNum02;
    return iRs;
    alert('here!');
}

var iCount = fnAdd(3,4);
alert(iCount);  //弹出7
</script>

　　函数参数：类似于Python的函数，也是可以传参！！

　　函数返回值：'return'关键字的作用：1、返回函数中的值或者对象；2、结束函数的运行。

 

　　4.2 函数预解析：

　　JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。

<script type="text/javascript">    
    fnAlert();       // 弹出 hello！
    alert(iNum);  // 弹出 undefined
    function fnAlert(){
        alert('hello!');
    }
    var iNum = 123;
</script>

 

　　4.3 匿名函数

　　而定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联，这样可以减少函数命名，并且简化代码。函数如果做公共函数，就可以写成匿名函数的形式。

<script type="text/javascript">

    window.onload = function(){
        var oBtn = document.getElementById('btn1');
        /*
        oBtn.onclick = myalert;
        function myalert(){
        alert('ok!');
        }
        */

        // 直接将匿名函数赋值给绑定的事件
        oBtn.onclick = function (){
            alert('ok!');
        }
}
</script>

 

五、条件语句　

　　通过条件来控制程序的走向，就需要用到条件语句。

　　条件运算符 ：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

var iNow = 1;
if(条件1){
    ... ;
}
else if(条件2){
    ... ;
}
// 条件1、条件2不满足时，执行else语句
else{
    ... ;
}

 

六、循环语句

　　程序中进行有规律的重复性操作，需要用到循环语句。例如：

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList2 = [];

for(var i=0;i<aList.length;i++){
    if(aList.indexOf(aList[i])==i)
    {
        aList2.push(aList[i]);
    }
}

alert(aList2);

　　与Python不同的时：JavaScript中的for循环的结构为：

for(声明变量i;条件语句；变量变化){
    执行语句；
}

　　

　　over~~~为了减少篇幅，请看下篇~~~~~~

posted @ 2018-08-18 12:20  Little_five  阅读(164)  评论(0)  编辑  收藏  举报