Javascript

葳蕤之森

于 2023-05-31 11:34:43 发布

阅读量86

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_63310011/article/details/130900056

版权

一、JS引入方式

1、行内引入

<body>
<input type="button" οnclick="alert('行内引入')" value="button" name="button">
<button οnclick="alert(123)">点击我</button>
</body>

2、内部引入

在head或body中，定义script标签，然后在script标签里面写js代码

<script>
        alert("这是js的内部引入");
    </script>

3、外部引入

定义外部js文件(.js结尾的文件)

<scripttype="text/javascript" src="demo.js"></script>

注:

script标签一般定义在head或body中
Script标签要单独使用，要么引入外部js，要么定义内部js，不要混搭使用

外部的JS文件，它具有维护性高、可缓存(加载一次，无需加载)、方便未来扩展、复用性高等特点

新建外部的js文件demo.js文件

alert("外部引入")

在head或者body中，添加以下代码

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

二、基础语法

1、输出语句

 <script>
            window.alert("hello js~");//写入警告框

            document.write("hello js2~");//写入html页面

            console.log("hello js3~");//写入浏览器控制台
 </script>

2、变量

<script>
    //var 定义变量,全局变量,可重复定义
    var a=10;
    a="张三";
    alert(a);

    //let局部变量，不能重复定义
    {
        let x=1;
        alert(x);
    }

    //const常量，不能被改变
    const pi=3.14;
    
</script>

三、函数

<script>
    // 定义函数一
    // function add(a,b){
    //     return a+b;
    // }

    // 定义函数二
    var add=function(a,b){
        return a+b;
    }

    var result=add(10,20);
    alert(result)
</script>

四、数组

数组特点：长度可变，类型可变

1、定义数组

var arr =new Array(1,2,3,4);
var arr=[1,2,3,4];
arr[10]=50;
arr[8]='A';
arr[9]=true;

2、遍历数组

var arr=[1,2,3,4];
    arr[10]=50;
 	for (let i = 0; i < arr.length; i++) {
 		console.log(arr[i]);
 	}

    //foreach 遍历数组中有值的元素
    arr.forEach(function(e){
         console.log(e);
     })

    arr.forEach((e)=>{
       console.log(e);
    })

    //push 添加元素到数组末尾
    arr.push(7,8,9);
    console.log(arr);

3、splice 删除元素

arr.splice(2,2);
    console.log(arr);

1、JSON

（1）定义

var 变量名 = '{"key1": value1, "key2": value2}';

(2) value的数据类型

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

实例

var userStr = '{"name": "Jerry", "age": 18, "addr": ["北京", "上海", "西安"]}';

（3）JSON字符串转为JS对象

var jsObject = JSON.parse(userStr);

(4) JS对象转为JSON字符串

var jsonStr = JSON.stringify(jsObject);

2、BOM

（1）Window

浏览器窗口对象

1.属性

history:
location:
navigator:

2.方法

alert ():
confirm ():
setlnterval ():
setTimeout ():

3、DOM

文档对象模型

（1）将标记语言的各个部分封装为对应的对象

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

（2）JavaScript 通过DOM，就能对HTML进行操作

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

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

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

1.根据id属性值获取，返回单个Element对象

var h1 = document.getElementById('h1');

2.根据标签名称获取，返回Element对象数组

var divs = document.getElementsByTagName('div');

3.根据name属性值获取,返回Element对象数组

var hobbys = document.getElementsByName('hobby');

4.根据class属性值获取，返回Element对象数组

var clss = document.getElementdByClassName('cls');

五、事件

1、事件监听

（1）事件

按钮被点击
鼠标移动到元素上
按下键盘按键

（2）事件监听

JavaScript可以在事件被侦测到时执行代码

2、事件绑定

（1）方式一

通过HTML标签中的事件属性进行绑定

<input type = "button" onclick = "on()" value = "按钮1>;

<script>
function on() {
	alert('我被点击了！');
}
</script>

(2) 方式二

通过DOM元素属性绑定

<input type = "button" id = "btn" value = "按钮1>;

<script>
	document.getElemetById('btn').onclick = function() {
		alert('我被点击了！');
	}
</script>

3、常见事件

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