JavaScript快速入门

JavaScript

1.引入方式

内部脚本: 将 JS代码定义在HTML页面中

<script>
      alert("hello JavaScript");
</script>

外部脚本: 将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

<script src="./JS/JS体验入门.js"></script>

2.基础语法

书写语法

• 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
• 每行结尾的分号可有可无，但如果一行上写多个语句时，必须加分号用来区分多个语句

输出语句

<script>
      window.alert("hello js 111");//写入警告框
	  document.write("hello js 222");//写入html页面
	  console.log("hello js 333");//写入浏览器的控制台
</script>

3.变量

变量定义

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。

var test = 20;
test = "张三";//弱类型语言，变量可以存放不同类型的值

var特点

//作用域：全局变量
{
  var age = 20;
}
alert(age);  // 在代码块中定义的age 变量，在代码块外边还可以使用

//变量可以重复定义
{
    var age = 20;
    var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
}
alert(age); //打印的结果是 30

let特点

//只在 let 关键字所在的代码块内有效
{
    let age = 20;
}
//alert(age);//报错

//不允许重复声明。
{
    let age = 30;
    //let age = 20;//报错
}

const特点

//用来声明一个只读的常量。一旦声明，常量的值就不能改变。
const PI = 3.14;
//PI = 3;//报错

数据类型

number：数字（整数、小数、NaN(Not a Number)）
string：字符、字符串，单双引皆可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是 undefined

var a ;
var obj = null;
//typeof 返回变量的数据类型
alert(typeof a); //结果是 undefined
alert(typeof obj);//结果是 object

运算符

JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的，不同的是 JS 关系运算符中的 == 和 ===，一会我们只演示这两个的区别，其他运算符将不做演示

• ==: 会自动类型转换比较

1. 1. 判断类型是否一样，如果不一样，则进行类型转换
2. 再去比较其值

• ===：js 中的全等于 ，不自动类型转换比较

1. 1. 判断类型是否一样，如果不一样，直接返回false
2. 再去比较其值

var age1 = 10;
var age2 = "10";

alert(age1 == age2);// true
alert(age1 === age2);// false
alert(age1 === 10);// true

类型转换

<script>
    /*
    其他类型转为数字：
    String:将字符串字面值转为数字。如果字面值不是数字，则转为NaN。
        1.字符串数值前加上: + (转为正数) -（转为负数）
        2.parseInt
    Boolean:true转为1，false转为0。
    其他类型转为boolean:
    Number:g和NaN为false,其他均转为true。
    String:空学符串为false,其他均转为true。
    Null和undefined：均转为false。
    */
    var name = "张三"
    var age = "18"
    document.write(- age + 1 + "<br>")//-17
    document.write(parseInt(name) + "<br>")//NaN
    document.write(parseInt(age) + "<br>")//18


    var isMarried = true //1
    document.write(isMarried + 1 + "<br>")//2
    isMarried = false //0
    document.write(isMarried + 1 + "<br>")//1


    //其他类型转为boolean:
	// number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
 	// string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
	// null类型转换为 boolean 类型是 false
  	// undefined 转换为 boolean 类型是 false
    var a = null;
    if (a) {
        document.write('a由' + typeof(a) + '转为true')
    } else {
        document.write('a由' + typeof(a) + '转为false')
    }
</script>

流程控制语句

JavaScript中的流程控制语句，与Java中的流程控制语句基本语法都是完全一样的。

4.函数

定义格式

//方式一
function 函数名(参数1,参数2..){
    要执行的代码
}
//方式二
var 函数名 = function (参数1,参数2..){
    要执行的代码
}

//  形式参数不需要类型。因为JavaScript是弱类型语言 
//  返回值也不需要定义类型，可以在函数内部直接使用return返回即可
function add(a, b){
                return a + b;
}
//上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。

函数调用

// 函数名称(实际参数列表);
let result = add(10,20);

// JS中，函数调用可以传递任意个数参数 
// 例如  let result = add(1,2,3);
// 它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。 

5.Array对象

JavaScript Array对象用于定义数组

定义格式

//方式一
var 变量名 = new Array(元素列表);
var ages = new Array(10,20,30,40,50,60)

//方式二
var 变量名 = [元素列表];
var names = ['张三','李四',"王舞",'Jack',"Tom",'Mike']

特点

JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。

var arr3 = [1,2,3];
arr3[10] = 10;//给索引是 10 的位置添加了数据 10
alert(arr3[10]); // 10
alert(arr3[9]);  //索引9的位置没有赋值默认undefined

//弱类型 数组里可以存储任意类型的数据
var data = [100,'love',true,3.14,"哈哈"]
console.log(data);//[100, 'love', true, 3.14, '哈哈']

属性

length 动态的获取数组的长度

var arr = [1,2,3];
//遍历数组
for (let i = 0; i < arr.length; i++) {
    alert(arr[i]);
}

方法

方法	描述
push(新元素)	将新元素添加到数组的末尾，并返回新的长度。
splice(起始索引 , 删几个,新元素)	从数组中添加/删除元素。
sort(比较器)	对数组的元素进行排序。
indexof(元素)	在数组中搜索元素并返回其位置。
reverse()	反转数组中元素的顺序。

演示:

    //push(元素) : 添加元素到尾部
    data.push("元素")
    console.log(data);//[100, 'love', true, 3.14, '哈哈', '元素']

    //splice() 删除元素 --- 参数：(起始索引 , 删几个)
    //splice() 插入元素 --- 参数：(起始索引 , 删几个,新元素)

    data.splice("1",1)//从索引1开始删除一个
    console.log(data);//[100, true, 3.14, '哈哈', '元素']
    data.splice(3,0,"新元素1","新元素2")//从索引3开始删除0个，并插入两个新元素
    console.log(data);//[100, true, 3.14, '新元素1', '新元素2', '元素']
    
    //sort() 排序  参数： 比较器   示例：升序排序 arr1.sort((a,b)=>a-b)   
    ages.sort(function(a,b){
        return b-a//降序
    })
    console.log(ages);//[60, 50, 40, 30, 20, 10]

    ages.sort((a,b) => a-b)//升序 箭头函数
    console.log(ages);//[10, 20, 30, 40, 50, 60]
    
    //reverse() 反转
    ages.reverse()//反转
    console.log(ages);//[60, 50, 40, 30, 20, 10]
    data.reverse()
    console.log(data);

6.String对象

创建方式

    //字符串对象创建方式一 
    var myName = new String("张三")

    //字符串对象创建方式二
    var yourName = '"李四"'

    console.log(myName);//String {'张三'}
    console.log(yourName);//"李四"

属性

length动态的获取字符串的长度

函数

方法	描述
charAt()	返回在指定位置的字符。
indexOf()	检索字符串。
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符。

演示:

    var msg = 'I Love Money'
    //方法：charAt( index ) 获取index索引的字符串
    console.log(msg.charAt(0));//I
    

    //方法：indexOf( str )  获取str的索引
    console.log(msg.indexOf(" "));//1

    var username = "      王舞      "
    //方法：trim() 去除前后空格
    console.log(username.trim());//王舞
    console.log("去除前长度:" + username.length);//去除前长度:14
    console.log("去除后长度:" + username.trim().length);//去除后长度:2

    //方法：substring   和java用法一样
    console.log(msg.substring(2));//Love Money
    console.log(msg.substring(2,6));//Love

7.自定义对象

定义格式

var 对象名称 = {
    属性名称1:属性值1,
    属性名称2:属性值2,
    ...,
    函数名称:function (形参列表){},
	...
};

//调用属性
对象名.属性名
//调用函数
对象名.函数名()

//对象中的function函数关键字是可以省略的
eat(){
    console.log(this.name + "在吃饭");//不加this拿不到
}

8.JSON

JavaScript Object Notation，JavaScript 对象标记法

方法名	说明
parse(json字符串)	JSON字符串 转化为 JS对象
stringify(JS对象)	JS对象 转化为 json字符串

格式及类型转换

//json 格式中的键要求必须使用双引号括起来，这是 json 格式的规定。
var jsonStr = '{"name": "Tom", "age": 20,"gender": "male"}';

console.log(jsonStr);//{"name": "Tom", "age": 20,"gender": "male"}

// JSON.parse(json字符串)   JSON字符串 转化为 JS对象
var obj = JSON.parse(jsonStr)
console.log(obj);//{name: 'Tom', age: 20, gender: 'male'}

// JSON.stringify(json对象) JS对象 转化为 json字符串
var json = JSON.stringify(obj)
console.log(json);//{"name":"Tom","age":20,"gender":"male"}

// 将user对象转换成Json字符串
var userJson = JSON.stringify(user)//拿不到user的eat()方法
console.log(userJson);//{"name":"张三","age":18,"height":180,"sex":"男"}

9.BOM

BOM：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器进行对话， JavaScript 将浏览器的各个组成部分封装为对象。

BOM 中包含的对象

• Window：浏览器窗口对象
• Navigator：浏览器对象（了解）
• Screen：屏幕对象（了解）
• History：历史记录对象
• Location：地址栏对象

Window对象

window 对象是 JavaScript 对浏览器的窗口进行封装的对象。

获取window对象

该对象不需要创建直接使用 window，其中 window可以省略。比如我们之前使用的 alert()函数，其实就是 window 对象的函数，在调用是可以写成如下两种

//显式使用 window 对象调用 
window.alert("abc");
//隐式调用 
alert("abc")

window对象属性

window对象提供了用于获取其他 BOM 组成对象的属性

window对象函数

函数名	说明
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
setTimeout(function,毫秒值)	在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值)	在一定的时间间隔后执行一个function，循环执行

// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
var flag = confirm("确认删除？");

alert(flag);

//定时器代码演示
setInterval(function (){
    alert("hehe");
},3000);

Location对象

获取Location对象

//使用 window.location获取，其中window.可以省略
window.location.属性;
location.属性;

window.location.方法();
location.方法();

Location对象属性

Location对象提供了很多属性。但以后常用的只有一个属性 href

//href 设置或返回完整的url
alert("要跳转了");
location.href = "https://www.baidu.com";

10.DOM

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

封装的对象分为

• Document：整个文档对象
• Element：元素对象
• Attribute：属性对象
• Text：文本对象
• Comment：注释对象

作用

JavaScript 通过 DOM， 就能够对 HTML进行操作了

• 改变 HTML 元素的内容
• 改变 HTML 元素的样式（CSS）
• 对 HTML DOM 事件作出反应
• 添加和删除 HTML 元素

获取Element对象

HTML中的 Element 对象可以通过 Document对象获取，而 Document 对象是通过 window对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数

• getElementById()：根据返回单个Element对象
• getElementsByTagName()：根据标签名称获取，返回Element对象数组
• getElementsByName()：根据name属性值获取，返回Element对象数组
• getElementsByClassName()：根据class属性值获取，返回Element对象数组

11.事件监听

事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码。

事件绑定

<body>
    <!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数-->
    <input type="button" value="点我" onclick="on()"> <br>
    <input type="button" value="再点我" id="btn">
</body>
<script>
        function on(){
            alert("我被点了");
        }
      	//方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件
        document.getElementById("btn").onclick = function (){
            alert("我被点了");
        }
</script>

常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

代码演示

<body>
    <img id="light" src="img/off.gif"> <br>
    <input type="button" value="点亮" onclick="on()">
    <input type="button" value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="ITCAST" onblur="b()" onfocus="f()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    
    <br>

    <input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverse()">

    <script>
        function on() {
            var img = document.getElementById("light");
            img.src = "img/on.gif"
        }

        function off() {
            var img = document.getElementById("light");
            img.src = "img/off.gif"
        }

        function b() {
            var input = document.getElementById("name");
            input.value = input.value.toUpperCase();
        }

        function f() {
            var input = document.getElementById("name");
            input.value = input.value.toLowerCase();
        }

        function checkAll() { //全选
            var ins = document.getElementsByName("hobby");
            for (let i = 0; i < ins.length; i++) {
                const checkbox = ins[i];
                checkbox.checked = true;
            }
        }

        function reverse() {//反选
            var ins = document.getElementsByName("hobby");
            for (let i = 0; i < ins.length; i++) {
                const checkbox = ins[i];
                checkbox.checked = !checkbox.checked;
            }
        }

    </script>
</body>