JavaScript快速入门

JavaScript

1.引入方式

1.1内部脚本,将JS代码定义在HTML页面种

JS代码必须在<script>标签之中
可以在HTML文件任意位置
一般放在<body>体标签底部,改善运行速度

1.2外部脚本,将JS代码定义在外部JS文件中,在引入HTML页面

利用带 src属性的 <script>标签引入JS文件
<script>标签必须要有尾标签

2.基础语法

2.1书写语法

区分大小写
三种输出语句

window.alert()警告弹窗(可以省略window)
document.write()在HTML上输出内容
console.log() 写入浏览器控制台

2.2变量

2.2.1变量名

可以是任何字母,数字,下划线,美元符号
不能是数字开头
建议使用驼峰命名

2.2.2三种声明方式

var(可以重复定义,在大括号外有效)

  {
    var name="cs"
    var name="ab"
   }
      console.log(name);

let(不可以重复定义,在大括号外无效)更安全

 {
        let  age=18;
        // let age=22;
      }
    //   console.log(age);

const(常量,不可更改)

const  gender="男";
console.log(gender);
    //   gender="女"

2.2.3数据类型

分为原始类型和引用类型

原始类型:

number整数(整数,小数,NaN)NaN表示非数字
string字符串(单双引号包裹)
boolean布尔(true,false)
undefined(变量未初始化时的默认值)
null(对象为空)

<script>

     /*
            5种原始类型：
                number：数字（整数、小数、NaN(Not a Number)）
                string：字符串，单双引皆可
                boolean：布尔。true，false
                null：对象为空
                undefined：当声明的变量未初始化时，该变量的默认值是 undefined
            引用类型：JavaScript中也有对象，对象就是引用类型
                let date=new Date(),date就是一个引用类型对象。
         */
        //1 定义number数字类型变量：（整数、小数、NaN(Not a Number)）
        let num=1;
        let num2=2.3;
        console.log(num,typeof num);//number
        console.log(num2,typeof num2);//number
        //2 定义string字符串类型变量：单双引皆可
        let str="你好"
        let str2='我爱你'
        console.log(str,typeof str);//string
        console.log(str2,typeof str2);//string
        //3 定义boolean布尔类型变量：只有true/false两种取值
        let boo=true;
        let boo2=false;
        console.log(boo,typeof boo);//boolean
        console.log(boo2,typeof boo2);//boolean

        //4 定义null类型变量
        let nu=null;
        console.log(nu,typeof nu);//object(这是一个JS错误)

        //5 定义undefined类型变量：当声明的变量未初始化时，该变量的默认值是undefined
        let uf;
        console.log(uf, typeof uf);//undefined
        //6 定义引用类型：JavaScript中也有对象，对象就是引用类型
        let date=new Date();
        console.log(date,typeof date);//object
    
</script>

引用类型:

对象

2.2.4运算符

大多数和java保持一致

==和===的区别

==只要值相等就返回true,底层自动类型转换

===要类型和值都相等才返回true

注意

流程控制语句if，switch，for等和java保持一致

在js中，0,null,undefined,"",NaN理解成false,反之理解成true

3JS函数

3.1函数的定义

普通函数

利用 function关键字变量名(参数...){

}

匿名函数

类似于java中使用匿名内部类

let 变量名=function(参数...){

}

箭头函数

类似于java中的lambda表达式

let 变量名= (参数...)=>{

}

注意

函数类似于Java中的方法
调用函数时可以传递多个参数,但只会接收定义函数时参数的个数

4.JS对象

4.1Array

4.1.1数组定义方式

let arr= new Array();
let arr=[1,2,3,4,]

4.1.2数组特点

在JS中Array类似于java中的集合;

1.Array长度是可变的

2.JS是弱类型语言,可以在一个数组中有任意类型数据

4.1.3数组属性和方法

1种属性3种函数

length属性(长度)

push()函数可以将一个数据添加到数组末尾

splice()函数可以删除数组元素

forEach()函数用来遍历数组

4.1.4三种遍历方式

普通for遍历数组

for (let i = 0; i < number.length; i++) {
        console.log(number[i]);
        
    }

forEach+箭头函数

number.forEach(element => {
    console.log(element);
    });

forof遍历

for (let i = 0; i < number.length; i++) {
        console.log(number[i]);
        
    }

4.1.5函数遍历的区别

forEach()函数只能遍历有值的元素,undefined不能遍历,普通for和forof可以

4.2String

4.2.1创建的创建的三种方式

let str=new String();
let str="...."(单双引号都可以)
let str=`...`(模板字符串)

4.2.2普通字符串和模板字符串的区别

模板字符串使用变量可以利用${表达式}

 // 需求：使用普通字符串和模板字符串分别按照"xxxx年xx月xx日"格式打印当前日期。
    //1 获取当前年月日
    let date=new Date();
    let year=date.getFullYear(); //年
    let month=date.getMonth()+1; //月，月份从0开始
    let day=date.getDate(); //日

    //2 定义普通字符串和目标字符串并打印
    let str1=year+"年"+(month+1)+"月"+day+"日";
    let str2=`${year}年${month+1}月${day}日`
    console.log(str1);
    console.log(str2);

4.2.3String的属性和常用方法

1个属性4个方法

length属性(长度)

charAt()函数获取指定位置字符

indexOf()检索字符并返回字符位置

trim()去除字符串两侧空白

subString(start,end)输出指定索引之间的子字符串

4.3自定义对象

4.3.1自定义对象格式

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

4.3.2调用属性和函数

调用格式：
对象名.属性名;
对象名.方法(参数值...);

4.3.3特点

如果调用没有这个属性,则会动态添加该属性并赋值

console.log(person.address="北京");

4.4JSON对象

4.4.1什么是JSON?

JSON是对象标记法,语法简单结构层次鲜明,常用于数据载体,用于网络数据传输.

4.4.2JSON对象定义格式

let js={
        "name":"cs",
        "age":18,
        "gender":'男',
        "date":{Date},
        "arr":[1,2,3]
    }

JSON对象定义类似于key:值得行式

key要用双引号包裹

4.4.3利用JSON标记实现字符串和对象属性之间的转换

JSON.stringify() js对象属性转字符串

 let src =JSON.stringify(js);
    console.log(src);

JSON.parse(字符串)字符串转换成js对象属性

 let json=JSON.parse(src);

4.4BOM对象

4.4.1什么是BOM

BOM是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。

4.4.2BOM对象

window浏览器窗口对象
Navigator浏览器对象
Screen屏幕对象
History历史记录对象
location 地址栏对象

4.4.3window属性和常用方法

属性:

history获取History对象
location获取Location对象
Navigator获取Navigator对象

方法:

alert()弹窗

confirm对话框确认返回true,取消返回false

setInterval(fun,毫秒值)定时器,以指定毫秒值为周期调用函数

let add= function(a,b) {
            return alert(a+b);
          }
         setInterval(add(1,2),2000);

setTimeout(fun,毫秒值)定时器,在指定毫秒值后调用函数(只能匿名函数和箭头函数形式)

 
         setInterval(function() {            return alert(谢谢)
          }

,2000);

4.4.4Location常用方法

local.herf="url"实现页面跳转

4.5DOM对象

4.5.1什么是DOM?

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

4.5.2常见对象

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

4.5.3获取DOM对象

document.getElementById()根据id属性值获取，返回单个Element对象

document.getElementsByTagName()根据标签名称获取，返回Element对象数组

document.getElementsByName()根据name属性值获取，返回Element对象数组

document.getElementsByClassName()根据class属性值获取，返回Element对象数组

document.querySelector("css选择器")根据css选择器获取一个Element对象

document.querySelectorAll("css选择器")根据css选择器获取一个Element对象数组

4.6事件绑定

4.6.1事件绑定的方式

通过HTML种的事件属性进行绑定

1.在标签上添加事件属性,属性值是要执行的函数

2.定义绑定的函数

<input type="button" id="btn1" value="事件绑定1" onclick="on()">

function on(){

alert("按钮1被点击了...")

}

通过DOM属性进行绑定
1.获得元素对象给其绑定匿名函数
2.定义匿名函数

    <input type="button" id="btn2" value="事件绑定2" >
document.querySelector("#btn2").onclick=function () {
        
        console.log("按钮二被点击了");
      }

posted on 2023-03-29 15:20 zl子路阅读(51) 评论(0) 收藏举报