JavaScript介绍，基本使用

JavaScript（简称JS）：是一种轻量级客户端脚本语言，通常被直接嵌入 HTML 页面，在浏览器上执行。

JavaScript的主要用途：

  • 使网页具有交互性，例如响应用户点击，给用户提供更好的体验

  • 处理表单，检验用户输入，并及时反馈提醒

  • 浏览器与服务端进行数据通信，主要使用Ajax异步传输

  • 在网页中添加标签，添加样式，改变标签属性等

1、内部方式（内嵌样式），在body标签中使用

<script type="text/javascript">
    <!--
    javaScript语言
    -->
</script>

2、外部导入方式（推荐），在head标签中使用

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

示例：

<script>
    var name = "hello";  // 定义变量
    alert(name); // 警告框方法，浏览器提示消息
    /* alert("你好") */  // 单行与多行注释  
</script>

事件

事件：指的是当HTML中发生某些事件时所调用的方法（处理程序）。

例如点击按钮，点击后做相应操作，例如弹出一句话

示例：

<button type="button" onclick="alert('亲，有什么可以帮助你的？')">点我</button>

  • onclick：是一个常用CSS事件属性，当元素有鼠标点击时触发JS脚本。

  • alert()：是一个JS内置函数，在浏览器输出警告框。一般于代码测试，可判断脚本执行位置 或者输出变量值。

选择器

想操作元素，必须先找到元素，主要通过以下三种方法：

  • 通过id（常用）

  • 通过类名

  • 通过标签名

示例：通过id查找元素

<button type="button" id="btn">点我</button>
<script>
    var x = document.getElementById("btn"); //获取id为btn的元素
    x.onclick = function () {   //绑定点击事件
        alert('亲，有什么可以帮助你的？')
    }
</script>

示例：通过标签名

<div id="main">
    <p>Hello world！1</p>
    <p>Hello world！2</p>
    <p>Hello world！3</p>
</div>

<script type="text/javascript">
    var x = document.getElementById("main");  //获取id为main的元素
    var y = x.getElementsByTagName("p");  // 返回的是一个集合，下标获取
    document.write("div中的第二段文本是：" + y[1].innerHTML);  //向当前文档写入内容
</script>

JS操作HTML

插入内容：
document.write("<p>这是JS写入的段落</p>");  //向文档写入HTML内容
x = document.getElementById('demo'); //获取id为demo的元素
x.innerHTML="Hello"   //向元素插入HTML内容

改变标签属性：
document.getElementById("image").src="b.jpg"   //修改img标签src属性值

改变标签样式：
x = document.getElementById("p")  //获取id为p的元素
x.style.color="blue"   //字体颜色

数据类型：字符串、数组、对象

数据类型：字符串

在JS中，数据类型有：字符串、数字、布尔、数组、对象、Null、Undefined

字符串处理：

var s = "hello world";
s.length;  // 字符串长度
s[4]   //根据索引获取值
s.replace('h','H');  //替换某个字符
s.split("分隔符")  //分隔为数组
s.match("w") //找到返回匹配的字符，否则返回null

字符串拼接：“+”

数据类型：数组

数组：是一个序列的数据结构。

定义：

var computer = new Array();
或
var computer = ["主机","显示器","键盘","鼠标"]

向数组添加元素：

computer[0]="主机";
computer[1]="显示器";
computer[2]="键盘";
或
computer.push("鼠标")

通过索引获取元素：

computer[2]

数据类型：对象

对象：是一个具有映射关系的数据结构。用于存储有一定关系的元素。

格式：d = {'key1':value1, 'key2':value2, 'key3':value3}

注意：对象通过key来访问value，因此字典中的key不允许重复。

定义：

var user = {
    name:"阿美",
    sex: "女",
    age:"30"
};

通过键查询值：

n = user.name;
或
sex = user['sex'];

增加或修改：

user.height = "180cm"
user['height'] = "180cm"

操作符

操作符：一个特定的符号，用它与其他数据 类型连接起来组成一个表达式。常用于条件 判断，根据表达式返回True/False采取动作。

流程控制

条件判断

if条件判断：判定给定的条件是否满足（True或False）， 根据判断的结果决定执行的语句。

语法：
if (表达式) {
    <代码块>
} else if (表达式) {
    <代码块>
} else {
    <代码块>
}

示例：根据用户点击做不同操作

<img id="myimage" src="img/off.jpg" alt="">
<button type="button" onclick="changeImage('on')">开灯</button>
<button type="button" onclick="changeImage('off')">关灯</button>

<script type="text/javascript">
    function changeImage(status) {
        x = document.getElementById('myimage');
        if (status == 'on') {
            x.src = "img/on.jpg";
        } else if (status == 'off') {
            x.src = "img/off.jpg";
        }
    }
</script>

循环

for循环：一般用于遍历数据类型的元素进行处理，例如字符串、数组、对象。

语法：
for (<变量> in <序列>) {
    <代码块>
}

示例：遍历数组

var computer = ["主机","显示器","键盘","鼠标"];
方式1：
for(i in computer) {
    console.log(computer[i])  // 使用索引获取值
}

方式2：
computer.forEach(function (e) {
    console.log(e)
})

示例：遍历对象

var user = {name:"阿良",sex:"男",age:"30"};
方式1：
for(let k in user) {
    console.log(k + ":" + user[k])
}

方式2：
Object.keys(user).forEach(function (k) {
    console.log(k + ":" + user[k]) 
})

函数

函数：定义与调用

函数：是指一段可以直接被另一段程序或代码引用的程序或代码。

在编写代码时，常将一些常用的功能模块编写成函数，放在函数库中供公共使用，可 减少重复编写程序段和简化代码结构。

语法：
function 函数名称(参数1, 参数2, ...) {
    <代码块>
    return <表达式>
}

示例：

<button type="button" id="btn" onclick="hello()">你好</button>

function hello() {
    alert("hello world")
}

函数参数：接收参数

示例：

<button type="button" onclick="myFunc('阿强', '30')">点我</button>

<script type="text/javascript">
    function myFunc(name, age) {
        alert("欢迎" + name + ", 今年" + age);
    }
</script>

函数：匿名函数与箭头函数

匿名函数与箭头函数：没有名字的函数，一般仅用于单个表达式。

示例：

<script type="text/javascript">
    // 普通函数
    function sum1(x,y) {
        return x+y;
    }
    // 匿名函数
    sum2 = function(x,y) {
        return x+y;
    }
    // 箭头函数，相比匿名函数又简化了很多
    sum3 = (x,y) => {
        return x+y;
    }
    console.log(sum1(1,2))
    console.log(sum2(3,4))
    console.log(sum3(5,6))
</script>

Window对象：location属性

示例：刷新按钮

<button type="button" onclick="location.reload()">刷新当前页面</button>
<button type="button" onclick="location.href=location.href">重新请求当前页面</button>
<button type="button" onclick="location.href='http://www.baidu.com'">请求别的页面</button>