HTML JavaScript 基础（上）

一、初识JavaScript

JavaScript 和 Java什么关系？
半毛线关系都没有，只是名字有点重合而已。

JavaScript 和python、C#、Java、Ruby一样，都是一门独立的编程语言。
像Python、C、Java等都需要解释器，学习它们的语法。而浏览器本身就是JavaScript的解释器。

1、JavaScript 代码存在形式

HTML中head标签内

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*CSS代码*/

    </style>

    <script>

        //JavaScript代码

    </script>

</head>

引入JavaScript文件

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="commons.js"></script>

    <link href="common.css" rel="stylesheet" />

</head>

<!--两种写法效果一样-->

    <script type="text/javascript"> </script>

    <script> </script>

body标签中

　　因为html也是从上到下执行的，而且从文件中引入js文件也可以引入其他网站js。

　　如果其他网站js连不上，导致页面一直不加载。
　　而js的作用就是让网页动起来，而网站有些情况下用不到JavaScript，并且为用户更友好的访问，用户一点就打开页面。直接先看的内容。

　　　　js放在上面，先加载js就浪费时间了。

为了用户更加快捷的打开网页，增加友好度。
把js放在body标签内的最下面

JavaScript注释

//      单行注释

/**/    多行注释

二、JavaScript 基本预览

基本数据类型

数字
字符串
数组
字典
布尔类型

条件语句

for循环

浏览器中提供了js运行的终端：审查元素 ——> Console

三、JavaScript 数据类型

js定义变量

    name = 'fgf'        # 全局变量

    var name = 'fgf'    # 局部变量

定义函数

    function func() {

        …… ;

    }

1、数字

在js里面，数字就包括了整型和浮点型。

age = 18;

n = "18";

i = parseInt(n);  // 字符串转为整型

i = parseFloat(n);// 转为浮点型

2、字符串

> a = 'fgf';

"fgf"

> a.charAt(1)

"g"

> a.charAt(2)

"f"

> a.substring(1,3)

"gf"

定时器 setInterval

<script>

    // 创建一个定时器，每5秒来一个弹框

    setInterval("alert(123)", 5000)

</script>

console.log 浏览器Console 打印信息

<script>

    function f1() {

        console.log(1);

    }

    setInterval("f1();", 1000)  //每1秒执行一次f1()函数

</script>

跑马灯实例（滚动显示文字）

<body>

    <h1 id="i1" >你是活了一万多天？还是活了一天 却重复了一万多次？ </h1>

    <script>

        function func(){

            // 根据ID获取指定标签的内容，定义局部变量接收

            var tag = document.getElementById('i1');

            // 获取标签内部的内容

            var content = tag.innerText;

            // 获取第一个字符

            var f = content.charAt(0);

            // 获取第二到最后的字符

            var l = content.substring(1,content.length);

            // 把第一个字符放到末尾。

            var new_content = l + f;

            // 替换原标签内内容

            tag.innerText = new_content;

        }

        // 每0.5秒执行一次。

        setInterval('func()', 500)

    </script>

</body>

　　实现原理：通过原生的DOM获取标签内容，将文本内容的第一个字符串放到最后，每隔0.5秒执行一次这样的动作。

常见功能：

obj.length                           长度

obj.trim()                           移除空白

obj.trimLeft()

obj.trimRight()

obj.charAt(n)                        返回字符串中的第n个字符

obj.concat(value, ...)               拼接

obj.indexOf(substring,start)         子序列位置

obj.lastIndexOf(substring,start)     子序列位置

obj.substring(from, to)              根据索引获取子序列

obj.slice(start, end)                切片

obj.toLowerCase()                    大写

obj.toUpperCase()                    小写

obj.split(delimiter, limit)          分割

obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)

obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。

obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，

                                     $数字：匹配的第n个组内容；

                                     $&：当前匹配的内容；

                                     $`：位于匹配子串左侧的文本；

                                     $'：位于匹配子串右侧的文本

                                     $$：直接量$符号

3、数组、字典

JavaScript中的数组类似于Python中的列表

数组常见功能：

obj.length          数组的大小

obj.push(ele)       尾部追加元素

obj.pop()           尾部获取一个元素

obj.unshift(ele)    头部插入元素

obj.shift()         头部移除元素

obj.splice(起始位置, 删除个数, 值, ...)  插入、删除或替换数组的元素

                    obj.splice(n,0,val) 指定位置插入元素

                    obj.splice(n,1,val) 指定位置替换元素

                    obj.splice(n,1)     指定位置删除元素

obj.slice( )        切片

obj.reverse( )      反转

obj.join(sep)       将数组元素连接起来以构建一个字符串

obj.concat(val,..)  连接数组

obj.sort( )         对数组元素进行排序

"分隔符".join(['列','表'])  # python中

['列','表'].join('分隔符')  # JavaScript中

字典：

　　操作和python中一样，其实js里没有字典这个类型，只是对象

a = {'k1':'v1', 'k2':'v2'}

a['k1']

四、JavaScript 流程控制

1、布尔类型、条件语句

布尔类型：
小写：true、false

==      比较值相等，不看类型

!=       不等于

===   比较值且类型相等

!===  不等于

||        或

&&      且

条件语句：

if(条件){

}

else if(条件){

}

else{

}

2、for循环

第一种：循环时，循环的元素是索引

a = [11, 22, 33, 44]

for(var item in a) {

    console.log(item);  // 这里获取的是索引

    console.log(a[item]) // 这样才获取的值

}

第二种

for(var i=0;i<10;i++){

...

}

3、while循环

    while(条件){

    }

4、if条件语句

if(条件){

}else if(条件){

}else{

}

 ==      : 值一样则相等

===     : 值和类型必须都相等

5、switch case 条件语句

name='3';

switch(name){

    case '1':

        age = 123;

        break;

    case '2':

        age = 456;

        break;

    default :

        age = 777;

}

五、JavaScript 必须加分号

js必须加上分号，不写也不出问题，但是线上应用时为了节省空间，js往往都是一行。加上分号，进行断句，必须要加。