Javascript入门学习？看这一篇就行

Javascript介绍

Javascript是运行在浏览器端的脚本语言，是由浏览器解释执行的，简称JS，它能够让网页和用户有交互功能，增加良好的用户体验

前端开发三大块：1.HTML：负责网页结构  2.CSS，负责网页样式 3.JS负责网页行为，比如：网页与用户的交互效果

强调：JS作用是负责网页和用户的交互效果

Javascript的使用方式

1.行内式（主要用于事件）

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

2.内嵌式

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

3.外链式

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

变量和数据类型

1.定义变量

Javascript是一种弱类型语言，也就是说不需要指定变量的类型，Javascript的变量类型由它的值来决定，定义变量需要关键字  ‘var’，一条Javascript语句应该以  “  ； ”结尾

var 变量名 = 值；
var iNum = 123,var sTr = 'asd';

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

2.JS注释

Javascript的注释分为单行注释（//注释内容）和多行注释（/多行注释/）

 3.数据类型

JS中有六种数据类型，包括五种基本数据类型和一种复杂数据类型（object）

5种基本数据类型：

1.number数字类型

2.string字符串类型

3.boolen 布尔类型

4.undefined，undefined类型，变量声明未初始化，它的值就是undefined

5.null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null，在页面上获取不到对象，返回的值就是null

还有一种复合类型 object

4.变量命名规范

1.区分大小写

2.第一个字符必须是字母，下划线或者美元符号

3.其他字符可以是字母，下划线，美元符或数字

函数定义与调用

1.函数定义

函数就是可以重复使用的代码块，使用关键字function定义函数

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

2.函数调用

函数调用就是函数名加小括号，比如：函数名（参数[参数可选]）

<script type="text/javascript">
    //函数定义
    function fnAlert(){
        alert('hello');
    }
    //函数调用
    fnAlert();
</script>

3.定义有参数有返回值的函数

定义函数时，函数如果有参数，参数放到小括号里面，函数如果有返回值，返回值通过return关键字来返回

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

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

//函数中‘return’的作用：
    1.返回函数的值
    2.执行完return函数执行结束

变量作用域

局部变量只能在函数内部使用

全局变量就是在函数外定义的变量，可以在不同函数内使用

条件语句

1.介绍

条件语句就是通过条件来控制程序的走向

2.条件语句语法

1.if语句 - 只有当指定条件为true时，使用该语句来执行代码

2.if...else语句 - 当条件为true时执行代码，当条件为false时执行其他其他其他代码

3.if...else if...else语句 -使用该语句来判断多条件，执行条件成立的语句

获取标签元素

1.获取标签元素

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

<script type ="text/javascript">
    var oDiv = document.getElementById('div1')
    alert(oDiv);
</script>
<div id ="div1">这是一个div元素</div>

说明：

上面的代码，如果Javascript写在元素的上面，就会出错，因为页面是从上到下执行的，Js去页面上获取元素div1的时候  div1还没加载

两种方法

1.将JS放在 div 下面

2.设置页面加载完成后执行的函数，在执行函数里面获取标签元素

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');

    }
</script>

说明： onload是页面所有元素加载完成的事件，给onloadss设置函数时，当事件触发就会执行设置的函数。

操作标签元素属性

1.属性的操作

首先获取页面标签属性，然后就可以对页面标签的属性进行操作，属性操作包括：

属性的读取                        属性的设置

属性名在js中的写法

1.html的属性和js里面属性大多数写法一样，但是’class‘属性写出“className”

2.“style”属性里面的属性，有横杠的改成驼峰式，比如:'font-size',改成“style.fontSize”

window.onload = function(){
    var oInput = document.getElementById('input1');
    var oA = document.getElementById('link1');

    //读取属性值
    var sVaule = oInput.value;
    var sType = oInput.type;
    var sName = oInput.name;
    var sLinks = oA.href;

    //操作class属性，需要写成“className”
    oA.className = 'sty02';
    
    //写（设置）属性
    oA.style.color = 'red'
    oA.style.fontSize = sValue
}
</script>
<input type="text" name="setSize" id="input1" value="20px">
<a href="#" id="link01" class="sty01">这是一个链接</a>

 2.innerHtml

innerHtml可以读取或者设置标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
    var oDiv = document.getElementById('div1');
    //读取
    var sTxt = oDiv.innerHTML;
    alert(sTxt);
    //写入
    oDiv.innerHTML = '<a href="http://www.itcast.cn">咳咳<a/>'
}
</script>
<div id="div1">这是一个div元素</div>

数组及操作方法

1.数组的介绍和定义

数组就是一组数据的集合，JavaScript中，数组里面的数据可以是不同类型的数据，好比python里面的列表。

//实例化对象方式创建
var aList = new Array（1，2，3）;
//字面量方式创建，推荐使用
var aList2 = [1,2,3,'asd'];

2.多维数组

多维数组指的是数组的成员也是数组，把这样的数组叫做多维数组。

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

3.数组的操作

1.获取长度        alert(aList.length)

2.下标取值          alert(aList[0])

3.添加和删除         push      pop

4.根据下标删除和添加       arr.splice

字符串拼接

字符串拼接使用 “+” 运算符

说明：数字和字符串拼接会自动进行类型转换（隐士类型转换），把数字类型转成字符串进行拼接