02.JavaScript语法上

表哥说名字长比较帅

于 2017-09-29 15:33:16 发布

阅读量174

点赞数

分类专栏： js学习笔记

本文链接：https://blog.csdn.net/a478269761/article/details/78134378

版权

js学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.变量

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

 var a = 123;
 var b = 'asd';

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

 var c = 45,d='qwe',f='68';

1.变量类型

5种基本数据类型：
number、string、boolean、undefined、null
1种复合类型：
object

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

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

二.获取元素方法

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <script type="text/javascript">
            var oDiv = document.getElementById('div1');
             // 读取属性值
            var val = oDiv.value;
    </script>
    <div id="div1">这是一个div元素</div>
</body>
</html>

上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载,可以在Google Chrome浏览器中按F12弹出控制中可以看出报错的地方,右上角有个红色的交叉，点击就可以看出报错的地方

这里写图片描述
解决方法有两种：

第一种方法：将javascript放到页面最下边

....
<div id="div1">这是一个div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    // 读取属性值
    var val = oDiv.value;
</script>
</body>

第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        // 读取属性值
        var val = oDiv.value;
    }
</script>

....

<div id="div1">这是一个div元素</div>

三.操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
操作属性的方法

 - “.” 操作
 - “[ ]”操作

1.属性写法

 - html的属性和js里面属性写法一样
 - “class” 属性写成 “className”
 - “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

2.通过“.”操作属性：

<script type="text/javascript">

        window.onload = function(){
            var oInput = document.getElementById('input1');
            var oA = document.getElementById('link1');
            // 读取属性值
            var val = oInput.value;
            var typ = oInput.type;
            var nam = oInput.name;
            var links = oA.href;
            // 写(设置)属性
            oA.style.color = 'red';
            oA.style.fontSize = val;
        }

    </script>

    ......

    <input type="text" name="setsize" id="input1" value="20px">
    <a href="http://www.itcast.cn" id="link1">传智播客</a>

3.通过“[ ]”操作属性：

    <script type="text/javascript">

        window.onload = function(){
            var oInput1 = document.getElementById('input1');
            var oInput2 = document.getElementById('input2');
            var oA = document.getElementById('link1');
            // 读取属性
            var val1 = oInput1.value;
            var val2 = oInput2.value;
            // 写(设置)属性
            // oA.style.val1 = val2; 没反应
            oA.style[val1] = val2;        
        }

    </script>

    ......

    <input type="text" name="setattr" id="input1" value="fontSize">
    <input type="text" name="setnum" id="input2" value="30px">
    <a href="http://www.itcast.cn" id="link1">传智播客</a>

4.innerHTML

innerHTML可以读取或者写入标签包裹的内容

    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            //读取
            var txt = oDiv.innerHTML;
            alert(txt);
            //写入
            oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
        }
    </script>

    ......

    <div id="div1">这是一个div元素</div>

四.函数

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

1.函数定义与执行

<script type="text/javascript">
    // 函数定义
    function aa(){
        alert('hello!');
    }
    // 函数执行
    aa();
</script>

2.变量与函数预解析

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

<script type="text/javascript">    
    aa();       // 弹出 hello！
    alert(bb);  // 弹出 undefined
    alert(c);   //报错，c没有声明
    function aa(){
        alert('hello!');
    }
    var bb = 123;
</script>

这里写图片描述

3.提取行间事件

在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。

<!--行间事件调用函数   -->
<script type="text/javascript">        
    function myalert(){
        alert('ok!');
    }
</script>
......
<input type="button" name="" value="弹出" onclick="myalert()">

结构与行为分离:

<!-- 提取行间事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
}    
</script>
......
<input type="button" name="" value="弹出" id="btn1">

4.匿名函数

定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。

<script type="text/javascript">
//普通的做法
window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
}

</script>

<script type="text/javascript">
//匿名函数做法
window.onload = function(){
    var oBtn = document.getElementById('btn1');
    // 直接将匿名函数赋值给绑定的事件
    oBtn.onclick = function (){
        alert('ok!');
    }
}

</script>

5.函数传参

<script type="text/javascript">
    function myalert(a){
        alert(a);
    }
    myalert(12345);
</script>

6.函数’return’关键字

函数中’return’关键字的作用：

1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为

<script type="text/javascript">
function add(a,b){
    var c = a + b;
    return c;
    alert('here!');
}

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

五.条件语句

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

1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

if else

var a = 6;
if(a==1)
{
    alert('语文');
}
else if(a==2)
{
    alert('数学');
}
else if(a==3)
{
    alert('英语');
}
else if(a==4)
{
    alert('美术');
}
else if(a==5)
{
    alert('舞蹈');
}
else
{
    alert('不补习');
}

switch

var a = 6;

switch (a){
    case 1:
        alert('语文');
        break;
    case 2:
        alert('数学');
        break;
    case 3:
        alert('英语');
        break;
    case 4:
        alert('美术');
        break;
    case 5:
        alert('舞蹈');
        break;
    default:
        alert('不补习');
}

六.数组及操作方法

数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。

1.定义数组的方法

//对象的实例创建
var aList = new Array(1,2,3);

//直接量创建
var aList2 = [1,2,3,'asd'];

2.操作数组中数据的方法

1、获取数组的长度：aList.length;

var aList = [1,2,3,4];
alert(aList.length); // 弹出4

2、用下标操作数组的某个数据：aList[0];

var aList = [1,2,3,4];
alert(aList[0]); // 弹出1

3、join() 将数组成员通过一个分隔符合并成字符串

var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4

4、push() 和 pop() 从数组最后增加成员或删除成员

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

5、unshift()和 shift() 从数组前面增加成员或删除成员

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4

6、reverse() 将数组反转

var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 弹出4,3,2,1

7、indexOf() 返回数组中元素第一次出现的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(3)); // 弹出2

8、splice() 在数组中增加或删除成员

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4

3.多维数组

多维数组指的是数组的成员也是数组的数组。

var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //弹出2;

4.获取元素的第二种方法

document.getElementsByTagName(”),获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的dom元素。

七.循环语句

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

1.for循环

    for(var i=0;i<len;i++)
    {
        ......
    }

2.while循环

    var i=0;

    while(i<8){

        ......

        i++;

    }

3.数组去重

    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);

表哥说名字长比较帅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02.JavaScript语法上

一.变量JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。定义变量需要用关键字 ‘var’ var a = 123; var b = 'asd'; //同时定义多个变量可以用","隔开，公用一个‘var’关键字 var c = 45,d='qwe',f='68';1.变量类型5种基本数据类型： number、string、boolean、undefine
复制链接

扫一扫

专栏目录