JavaScript

本文主要是介绍JavaScript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

介绍

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

嵌入页面方式

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

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

页面script标签嵌入

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

外部引入

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

注释

单行注释
- //单行注释内容
多行注释
- /*多行注释内容*/

变量

定义变量需要使用关键字 'var'，同时定义多个变量可以公用一个'var'，变量间用逗号','隔开
命名：由字母、数字、下划线（_）或者美元符号（$）组成，数字不能开头，区分大小写
类型
- 基本类型：number、string、boolean、undefined、null
- 复合类型：object

元素

获取
- document.getElementById('元素id') 根据id选择单个元素
- document.getElementsByTagName('标签名') 是一个选择集
- document.querySlector('选择器') 选择单个元素
- document.querySlectorAll('选择器') 是一个选择集

操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
属性名注意：
- “class” 属性写成 “className”
- “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

操作属性的方法

'.'操作

‘[ ]’操作：[ ]中可以是变量

<script type="text/javascript">

    window.onload = function(){
        var oT = document.getElementById('test'); //获取元素
        var s = 'style';
        // 读取属性值
        var value = oInput.value; // '.'操作
        var name = oInput['name']; // '[ ]'操作
        var nam = oInput.name;
        var links = oA.href;
        // 写(设置)属性
        oA[s]['color'] = 'red'; // [ ]中使用变量
        oA.style.fontSize = val; //有-的属性名改成驼峰式
    }

</script>

innerHTML
- 可以读取或者写入元素内的html内容
innerText
- 可以读取或者写入元素内的html内容

函数

定义与执行

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

匿名函数

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

<script type="text/javascript">

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

</script>

封闭函数

封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。

写法：

(匿名函数)()

(function(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
})();

!匿名函数()

!function(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
}();

~匿名函数()

~function(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
}();

条件语句

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

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('不补习');
}

效率比if else高

循环语句

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

while 循环

var i=0;
while(i<8){
    ......
    i++;
}

字符串操作

操作方法
- 字符串合并操作：“ + ”
- parseInt() 将数字字符串转化为整数
- parseFloat() 将数字字符串转化为小数
- split() 把一个字符串分隔成字符串组成的数组
- charAt() 获取字符串中的某一个字符
- indexOf() 查找字符串是否含有某字符 --------------未查到，则返回-1
- substring() 截取字符串用法： substring(start,end)（不包括end）
- toUpperCase() 字符串转大写
- toLowerCase() 字符串转小写

字符串反转

var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);

数组操作

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

定义数组

对象的实例创建
```
var aList = new Array(1,2,3);
```
直接创建
```
var aList2 = [1,2,3,'asd'];
```

操作
- 获取数组的长度：aList.length
- 用下标操作数组的某个数据：aList[0]
- join() 将数组成员通过一个分隔符合并成字符串
- push() 和 pop() 从数组最后增加成员或删除成员
- unshift()和 shift() 从数组前面增加成员或删除成员
- 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
```
- reverse() 将数组反转
- indexOf() 返回数组中元素第一次出现的索引值

数组去重

根据当前元素的索引，是否和下标一致来进行判断

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

对象

将相关的变量和函数组合成一个整体，这个整体叫做对象，对象中的变量叫做属性，变量中的函数叫做方法。javascript中的对象类似字典。

内置对象

document

document.referrer  //获取上一个跳转页面的地址(需要服务器环境)

location

window.location.href  //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值

window可省略

Math

Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整

对象的创建

单体

<script type="text/javascript">
var Tom = {
    name : 'tom',
    age : 18,
    showname : function(){
        alert('我的名字叫'+this.name);    
    },
    showage : function(){
        alert('我今年'+this.age+'岁');    
    }
}
</script>

工厂模式

<script type="text/javascript">

function Person(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.showname = function(){
        alert('我的名字叫'+this.name);    
    };
    o.showage = function(){
        alert('我今年'+this.age+'岁');    
    };
    o.showjob = function(){
        alert('我的工作是'+this.job);    
    };
    return o;
}
var tom = Person('tom',18,'程序员');
tom.showname();

</script>

构造函数

<script type="text/javascript">
    function Person(name,age,job){            
        this.name = name;
        this.age = age;
        this.job = job;
        this.showname = function(){
            alert('我的名字叫'+this.name);    
        };
        this.showage = function(){
            alert('我今年'+this.age+'岁');    
        };
        this.showjob = function(){
            alert('我的工作是'+this.job);    
        };
    }
    var tom = new Person('tom',18,'程序员');
    var jack = new Person('jack',19,'销售');
    alert(tom.showjob==jack.showjob);
</script>

原型模式

<script type="text/javascript">
    function Person(name,age,job){        
        this.name = name;
        this.age = age;
        this.job = job;
    }
    Person.prototype.showname = function(){
        alert('我的名字叫'+this.name);    
    };
    Person.prototype.showage = function(){
        alert('我今年'+this.age+'岁');    
    };
    Person.prototype.showjob = function(){
        alert('我的工作是'+this.job);    
    };
    var tom = new Person('tom',18,'程序员');
    var jack = new Person('jack',19,'销售');
    alert(tom.showjob==jack.showjob);
</script>

继承

<script type="text/javascript">

        function fclass(name,age){
            this.name = name;
            this.age = age;
        }
        fclass.prototype.showname = function(){
            alert(this.name);
        }
        fclass.prototype.showage = function(){
            alert(this.age);
        }
        function sclass(name,age,job)
        {
            fclass.call(this,name,age);
            this.job = job;
        }
        sclass.prototype = new fclass();
        sclass.prototype.showjob = function(){
            alert(this.job);
        }
        var tom = new sclass('tom',19,'全栈工程师');
        tom.showname();
        tom.showage();
        tom.showjob();
    </script>

这篇关于JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程

JavaScript

介绍

嵌入页面方式

注释

变量

元素

函数

条件语句

循环语句

字符串操作

数组操作

对象

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯