【速成JavaScript】

最新推荐文章于 2023-04-21 17:19:59 发布

氢气220

最新推荐文章于 2023-04-21 17:19:59 发布

阅读量232

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_56471396/article/details/127255485

版权

什么是Javascript？

JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能够使网页可交互。
W3C标准：网页主要由三部分组
– 结构：HTML
– 表现：CSS
– 行为：Javascript

JavaScript引入方式

内部脚本：将JS代码定义在HTML页面中
在HTML中，JavaScript代码必须位于< script >与< /script >

提示：

在HTML文档中可以在任意地方，放置任意数量的< script >.
一般把脚本至于< body >元素的底部，可改善显示速度，因为脚本执行会拖慢显示

<script>
    alert("hello JS~");
</script>

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

外部文件：demo.js

alert("hello js2")

引入外部js文件:

<script src="../js/demo.js"></script>

注意

外部脚本不能包含< script >标签
< scrip >标签不能自闭合

书写语法

区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释：

单行注释：//注释内容
多行注释：/注释内容/

大括号表示代码块

输出语句

使用window.alter()写入警告框
使用document.write（）写入HTML输出
使用console.log()写入浏览器控制台

变量

JavaScript中用var关键字（variable的缩写）来声明变量。
JavaScript是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则：
–组成字符可以是任何字母、数字、下划线（-）或美元符号（$）
– 数字不能开头
– 建议使用驼峰命名

var:
1.作用域：全局变量
2.变量可以重复定义
let:
用法与var类似，但所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
const:
用来声明一个只读的常量。一旦声明，常量的值就不能改变。

数据类型

Javascript中分为：原始类型和引用类型
5种原始类型：

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

使用typeof运算符可以获取数据类型

    //number
    var age=22;
    alert(typeof age);

    //String
    var name="张三";
    alert(typeof name);
    var addr='广州'
    alert(typeof addr);

运算符

一元运算符：++。–
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=
关系运算符：>.<.>=,<=,,=
逻辑运算符：&&，||，|
三元运算符：条件表达式？true_value：fales_value

==： /* 
	1.判断类型是否一样，如果不一样，则进行类型转换
	2.再去比较其值
===：全等于
	1.判断类型是否一样，如果不一样，直接返回false
	2.再去比较其值
类型转换：
	*其他类型转为number：
	1.string：按照字符串的字面值，转为数字，如果字面值不是数字，则转为NaN，一般使用parseInt
	2.boolean:true转为1，false转为0
	*其他类型转为Boolean：
	1.number：0和NaN转为false,其他的数字转为true
	2.string：空字符串转为false,其他的字符串转为true
	3.null:false
	4.undefined:false	*/
	//健壮性判断
	var str = +"20";
    //if(str != null && str.length > 0){
    if (str) {
        alert("转为true");
    } else {
        alert("转为false");
    }

流程控制语句&函数

if
switch
for
while
do…while

与Java一致👆

函数

函数（方法）是被设计为执行特定任务的代码块

定义：JavaScript函数通过function关键字进行定义，语法为：

function functionName（参数1，参数2…）{
要执行的代码
}

注意：

形式参数不需要类型，因为Javascript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可

function add(a,b){
  return a+b;
}

调用：函数名称（实际参数列表）

let return = add(1,2):

定义方式二：

var functionName = function(参数列表){
	要执行的代码
}

var add = function(a,b){
	return a+b;
}

调用：JS中，函数调用可以传递任意个数参数

le result = add(1,2,3);

Array

javascript Array对象用于定义数组

定义

var 变量 = new Array(元素列表)；//方式一
var arr = new Array(1,2,3);

var 变量 = [元素列表]；//方式二
var arr = [1,2,3];

访问

arr[索引] = 值；
arr[0] = 1;

特点：Javascript数组相当于Java中集合，变长变类型。

    //变长
    var arr3 = [1,2,3];
    arr3[10] = 10;

    //变类型
    arr3[5] = "hello";
    alert(arr3); 
    // 属性:length：数组中的元素个数
    var arr4 = [1, 2, 3];
    for (let i = 0; i < arr4.length; i++) {
        alert(arr4[i]);
    }

    //方法：
    //push:添加方法
    var arr5 = [1, 2, 3];
    arr5.push(10);
    alert(arr5);

    //splice:删除元素
    arr5.splice(0, 1);
    alert(arr5);

String

定义

var 变量名 = new String(s);//方式一
var str = new String("hello");
var 变量名 = s;//方式二
var str = "hello";
var str = 'hello';

属性
length：字符串长度
方法
charAt()：返回在指定位置的字符
indexOf()：检索字符串
trim():去除字符串前后两端的空白字符

自定义对象

var 对象名称 = {
属性名称：属性值1，
属性名称：属性值2，
……
函数名称：function（形参列表）{}
……
}；

var person = {
name："zhangsan"，
age：23，
eat:function(){
	alert("干饭~")；
}
}；

BOM

Browser Object Model 浏览器对象模型
JavaScript 将浏览器的各个组成部分封装未对象
组成：
window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
location：地址栏对象

Window

window：浏览器窗口对象
获取：直接使用window，其中window。可以省略
属性：获取其他BOM对象
方法：
- alert（）：显示带有一段消息和一个确认按钮的警告框
- confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框

//confirm:点击确认按钮，返回true。点击取消按钮，返回false
    var flag = confirm("确认删除？");
    //alert(flag)
    if (flag){
        //删除逻辑
    }

- setInterval：按照指定的周期（以毫秒计）来调用函数或计算表达式
- setTimeout()：在指定的毫秒数后调用函数或计算表达式

//定时器
    /*setTimeout(function (),毫秒值)：在一定的时间间隔后执行一个function,只执行一次
    setInterval(function (),毫秒值):在一定的时间间隔后执行一个function，循环执行*/
    
    /*setTimeout(function () {
        alert("hehe");
    }, 2000);*/

    setInterval(function () {
        alert("hehe");
    }, 2000);

案例切换图片

var x = 0;
    //根据一个变化的数字，产生固定个数的值：2 x%2 3x%3
    //定时器
    setInterval(function (){
        if (x % 2 == 0){
            on();
        }else {
            off();
        }
        x ++
    },1000);

History

History：历史记录
获取：使用window.history获取，其中window.可以省略

window.history.方法（）；
history.方法（）；

方法
|back|加载history列表中的前一个URL。|
|–|–|
|forward|加载history列表中的下一个URL。|

Location

location：地址栏对象
获取：使用window.location获取，其中window。可以省略

window.location.方法（）；
location.方法（）；

属性
href：设置或返回完整的URL

DOM

Document Object Model 文档对象模型
将标记语言的各个组成部分封装为对象
– Document：整个文档对象
– Element：元素对象
– Attribute：属性对象
– Text：文本对象
– Comment：注释对象
Javascript通过DOM，就能够对HTML进行操作
– 改变HTML元素内容
– 改变HTML元素的样式（CSS）
– 对HTMLDOM 事件作出反应
– 添加和删除HTML元素

获取Element

Element：元素对象
获取：使用Document对象的方法来获取

getElementById:根据id属性值获取，返回一个Element对象
getElementsByTagName：根据name属性值获取，返回Element对象数组
getElementsByClassName：根据class属性值获取，返回Element对象数组

使用：查阅文档点击这里

事件监听

事件绑定

事件绑定的两种方式：
– 方式一：通过HTML标签中的事件属性进行绑定
– 方式二：通过DOM元素属性绑定

<body>
<input type="button" value="点我" onclick="on()"><br>
<input type="button" value="再点我" id="btn">
<script>
    function on() {
        alert("我被点了");
    }

    document.getElementById("btn").onclick = function () {
        alert("我被点了");
    }
</script>
</body>