【JavaScript基础】

JavaScript基础

JavaScript（简称JS）：是一种轻量级客户端脚本语言，通常被直接嵌入HTML页面，在浏览器上执行。
JavaScript的主要用途：
•使网页具有交互性，例如响应用户点击，给用户提供更好的体验
•处理表单，检验用户输入，并及时反馈提醒
•浏览器与服务端进行数据通信，主要使用Ajax异步传输
•在网页中添加标签，添加样式，改变标签属性等

JavaScript基本使用

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

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

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

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

示例（内嵌样式）：

<script>
    var name="liangqd"
    alert(name)
</script>

事件

指的是当HTML中发生某些事件时所调用的方法（处理程序）。
例如点击按钮，点击后做相应操作，例如弹出一句话
  •onclick：是一个常用CSS事件属性，当元素有鼠标点击时触发JS脚本。
  •alert()：是一个JS内置函数，在浏览器输出警告框。一般于代码测试，可判断脚本执行位置或者输出变量值。
示例：

<button type="button" onclick="alert('点击事件')" >点击按钮</button>

选择器

想操作元素，必须先找到元素，主要通过以下三种方法：
 •通过id（常用）
 •通过类名
 •通过标签名
示例：通过id查找元素

    <button type="button" id="btn">id按钮</button>
    <script>
        var x=document.getElementById("btn")
        x.onclick = function (){
            alert('id查找元素')
        }
    </script>

示例：通过标签名

    <div id="qm">
        <p>Hello JS 1</p>
        <p>Hello JS 2</p>
        <p>Hello JS 3</p>
    </div>
        <script type="text/javascript">
            //text/javascript是说明这一段脚本语言是javascript。告诉浏览器这一段要按照javascript来解释执行。
        var x = document.getElementById("qm")
            var y = x.getElementsByTagName("p")
            document.write("当前页面写入内容"+ y[1].innerHTML)
            // 多个p标签是以下标的形式识别y[1]是第二个p标签

    </script>

插入内容：

<div id="aaa" style="background: aqua"></div>
<script>
document.write('<p>这是JS写入Html文档的段落</p>');
x=document.getElementById("aaa");
x.innerHTML="add text";
</script>

改变标签属性：

<img src="./image/akl.jpg" alt="" id="p">
<script>
    document.getElementById("p").src="./image/ys.jpg"
</script>

改变标签样式：

<p style="color: aqua" id="a">颜色</p>
<script>
    document.getElementById("a").style.color="blue"
</script>

数据类型

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

数据类型：字符串

字符串处理：

<script>
    var s = "hello js"
    a=s.length //获取字符长度
    b=s[1] //根据索引获取值
    c=s.replace('h','H') //将小写h替换成大写H
    d=s.split("l") //将字符串以l为分隔符分割成数组
    e=s.match("j") //在字符串查找j，存在返回字符，不存在返回null
    console.log(a,b,c,d,e)
</script>

字符串拼接使用：“+”

数据类型：数组

<script>
    var computer1= new Array() //无元素数组，可用下标添加
    var  computer=["cpu","gpu","鼠标","键盘"]
    computer[0]="处理器" //修改数组的内容
    computer1[0]="cpu" //添加第一个数组
    console.log(computer,computer1)

    computer1.push("内存") //通过push方式添加
    console.log(computer1,computer[1])
</script>

数据类型：对象

对象：是一个具有映射关系的数据结构。用于存储有一定关系的元素。
格式：d = {‘key1’:value1, ‘key2’:value2, ‘key3’:value3}
注意：对象通过key来访问value，因此字典中的key不允许重复
定义：

<script>
    var user = {
        name: "liang",
        sex: "男",
        age: "26"
    };
    console.log(user)
    user.height="170cm" //添加元素
    console.log(user.name,user.sex,user['age'])
    console.log(user)
    user.age="27" //修改元素
    console.log(user)
</script>

操作符

**比较操作符：**
== 等于
!= 不等于
> 大于
< 小于
>= 大于等于
<= 小于等于

**算术操作符：**
+加法
-减法
*乘法
/除法
% 取余
++ 自增，自动+1
--自减，自动-1

**逻辑操作符：**
&&与
|| 或
!() 结果取反

**赋值运算符：**
= 赋值
+= 加法赋值
-= 减法赋值
*= 乘法赋值
/= 除法赋值
%= 取余赋值

条件判断

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

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

示例：根据用户点击切换不同的图片

<img src="./image/kda.jpg" id="a"></img>
<button id="btn1" onclick="ReplaceImage('kda')">切换亚索</button>
<button id="btn2" onclick="ReplaceImage('ys')">切换KDA</button>
<script>

function ReplaceImage(b){
    x = document.getElementById("a")
    if (b != "ys"){
        x.src="./image/ys.jpg"
    }else {
        x.src="./image/kda.jpg"
    }
}
</script>

循环

for循环：一般用于遍历数据类型的元素进行处理，例如字符串、数组、对象。
语法：
for (<变量> in <序列>) {
<代码块>
}
示例：

<script>
//循环数组
var test = ['a','b','c','d']
//循环数组方式1
for (i in test){ //i获取到的是下标
    console.log(i+'：'+test[i])
}
//循环数组方式2
test.forEach(function (a){console.log(a)}) //无下标，直接获取值

//循环数组
var user = {name:"lqd",sex:'男',age:'30'}
//方式1
for (i in user){
    console.log(i+':'+user[i])
}
//方式2
Object.keys(user).forEach(function (k){
    console.log(k+':'+user[k])
})
Object.values(user).forEach(function (v){
    console.log('v '+v)
})//只输出value
</script>

函数：定义与调用

**函数：**是指一段可以直接被另一段程序或代码引用的程序或代码。
在编写代码时，常将一些常用的功能模块编写成函数，放在函数库中供公共使用，可减少重复编写程序段和简化代码结构。
语法：
function 函数名称(参数1, 参数2, …) {
<代码块>
return <表达式>
}
示例：

<button onclick="MyInfo('lqd','北京')">点击按钮</button>
<script>
function MyInfo(name,yy){
    alert("欢迎"+name+'来到'+yy)
}
</script>

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

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

<script>
//普通函数
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),sum2(1,2),sum3(1,2))
</script>

window对象：location属性处理URL

示例：刷新按钮

<button onclick="location.reload()">点击刷新当前页面</button>
<button onclick="location.href=location.href">点击重新加载当前页面</button>
<button onclick="location.href='http://www.baidu.com'">点击请求其他页面</button>