学习JavaScript-EW帮帮网

js引入方式

1. 内部脚本

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

JavaScript代码必须位于<script></script>标签之间
在HTML文档中,可以在任意地方,放置任意数量的<script>
一般会把脚本置于<body>元素的底部,可改善显示速度

弹出一个警告窗口

<script>

    alert("Hello JavaScript")

</script>

2. 外部脚本

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

外部JS文件中，只包含JS代码，不包含<script>标签

🚥<script>标签不能自闭合

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

js基础语法

1. 输出语句

//输出语句
//方式一 弹出警告框
window.alert("hello");

//方式二 写入HTML中
document.write("world");

//方式三 输出在控制台
console.log("yeyeye");

html文件：
<script src="01.js"></script>

【运行结果】

2. 变量

//var是全局变量、可以重复定义
var a = 1;
var b = '1';
var c = "aaa";
console.log(a);     console.log(b);     console.log(c);

a = 3.14;
console.log(a);

【运行结果】

//const常量
const $dollar = 666;
$dollar = 66;
alert(dollar);

var a;
alert(typeof(a)); //undefined

alert(typeof(null)); //object

【运行结果】

常量不可被修改

3. 数据类型

注意与其他语言不同的是：有==和===

== 只比较值，=== 既比较值又比较类型

//== 只比较值，=== 既比较值又比较类型
var a;
a = 10;
alert(a === "10"); //false
alert(a == "10"); //true 发生类型转换
alert(typeof(a));

js函数

//定义一个函数 不需要写返回类型
function sum(a, b){
    return a+b;
}
alert(sum(1, 2.5)); //result = 3.5
alert(sum(1, "1")); //result = 11
alert(sum(NaN, 2)); //result = NaN
alert(sum(undefined, 2)); //result = NaN

js对象

Array对象

//定义数组，中括号
var arr = [1, 2, 3, 4];
arr[10] = 50;
for(let i=0; i<arr.length; i++)
{
    console.log(arr[i]); //打印到控制台
}

【运行结果】

forEach方法：仅遍历有值的元素

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

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

两种效果一样

【运行结果】

push添加 & splice删除

var arr = [1, 2, 3, 4];
arr.push(6, 7, 8);
console.log(arr);
arr.splice(0, 3); //删除1,2,3
console.log(arr);

【运行结果】

String字符串思春

//创建字符串
var str = "hello world";
console.log(str.length); //length
console.log(str.charAt(1)); //charAt()是函数用()
console.log(str.indexOf("wo")); //indexOf返回"wo"位置index=6
var str1 = str.trim();  //trim
console.log(str1); 
console.log(str.substring(0,5)); //substring截取子串

【运行结果】

JSON对象

自定义对象：

//json对象
var student = {
    name: "Bob",
    age: 18,
    gender: "male",
    eat(){
        alert("吃饭");
    }
}
//调用
console.log(student.name);
student.eat();

【运行结果】

JSON字符串对象：

//创建JSON字符串对象
var jsonStr = '{"name": "Marry", "age": 18}';
var object = JSON.parse(jsonStr); //JSON字符串对象转js对象
alert(object.age);
alert(JSON.stringify(object)); //js对象转JSON字符串对象

【运行结果】

BOM对象：

警告框和对话框

//BOM
window.alert(111); //弹出警告框
alert(111);

var flag = confirm("吃饭了吗"); //弹出对话框
alert(flag);

【运行结果】

点确定=true，取消=false

两个定时器：

//定时器
var i = 0;
setInterval(function(){
    i++;
    console.log("执行" + i + "次");
}, 2000) //每2秒执行1次

【运行结果】周期性执行

var i = 0;
//仅执行一次的定时器
setTimeout(() => {
    i++;
    console.log("执行" + i + "次");
}, 2000);

【运行结果】

location地址栏对象

//location地址栏对象
location.href = "https://www.baidu.com"; //点确定跳转百度
alert(location.href);

【运行结果】

DOM对象

教基础语句：JavaScript中的DOM对象_js dom撖寡情-CSDN博客

教案例，实际应用：前端javascript的DOM对象操作技巧，全场景解析_javascript dom-CSDN博客

黑马程序员：Day02-11. JS-对象-DOM_哔哩哔哩_bilibili

Day02-12. JS-对象-DOM案例_哔哩哔哩_bilibili

其他我就不更了，我使用DOM做的javaweb实验：javaweb 实验3-CSDN博客

js事件监听

常见事件：

onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<script>
    function on()
    {
        alert("按钮被点击");
    }
</script>

<body>
    <script src="01.js"></script>
    <!-- 设置按钮水平居中 -->
    <div style="display:flex; justify-content: center;"> 
        <input type="button" value="事件绑定" onclick="on()">
    </div>
</body>
</html>

【运行结果】

onblur、onfocus、onkeydown

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    function on(){
        alert("按钮被点击");
    }
    function getFocus(){
        console.log("获得焦点");
    }
    function loseFocus(){
        console.log("失去焦点");
    }
    function pressKeyboard(){
        console.log("正在输入字符");
    }
</script>

<body>
    <script src="01.js"></script>
    <!-- 设置按钮水平居中 -->
    <div style="display:flex; justify-content: center;"> 
        <input type="button" value="事件绑定" onclick="on()">
    </div>
    
    <div style="display:flex; justify-content: center;">
        <!-- onfocus获得焦点 onblur失去焦点 onkeydown键盘被按下 -->
        <input type="text" onfocus="getFocus()" onblur="loseFocus()" onkeydown="pressKeyboard()">
    </div>

</body>
</html>

【运行结果】

onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<script>

    function load(){
        console.log("页面加载完成");
    }
</script>

<body onload="load()">
    
</body>
</html>

【运行结果】

onsubmit

onmousemove、onmouseover、onmouseout、onmouseleave

本质是一样的，解释起来内部有区别，选一个来用就行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    function on(){
        alert("按钮被点击");
    }
    function load(){
        console.log("页面加载完成");
    }
    function submit(){
        alert("已提交表单");
    }
    function move(){
        console.log("哥哥那里不可以！");
    }
    function leave(){
        console.log("哥哥常来玩呀~");
    }
    function over(){
        console.log("哥哥来了，今天想做哪个套餐");
    }
    function out(){
        console.log("哥哥欢迎下次光临");
    }
</script>

<body onload="load()">
    <script src="01.js"></script>
    <!-- 设置按钮水平居中 -->
    <div style="display:flex; justify-content: center;"> 
        <input type="button" value="事件绑定" onclick="on()">
    </div>

    <form action="" style="text-align: center;" onsubmit="submit()">
        <input type="text">
        <input type="button" value="美女" onmousemove="move()" 
        onmouseleave="leave()" onmouseover="over()" onmouseout="out()">
    </form>

    
</body>
</html>

【运行结果】

可以看到，鼠标离开的时候，两个语句都输出了

学习JavaScript

js引入方式

js基础语法

1. 输出语句

2. 变量

3. 数据类型

注意与其他语言不同的是：有==和===

js函数

js对象

Array对象

String字符串思春

JSON对象

BOM对象：

DOM对象

js事件监听

常见事件：

onclick

onblur、onfocus、onkeydown

onload

onsubmit

onmousemove、onmouseover、onmouseout、onmouseleave

网站公告

今日签到

热门文章

最新发布

学习JavaScript

js引入方式

js基础语法

1. 输出语句

2. 变量

3. 数据类型

注意与其他语言不同的是：有==和===

js函数

js对象

Array对象

String字符串 思春

JSON对象

BOM对象：

DOM对象

js事件监听

常见事件：

onclick

onblur、onfocus、onkeydown

onload

onsubmit

onmousemove、onmouseover、onmouseout、onmouseleave

网站公告

今日签到

热门文章

最新发布

String字符串思春