11.16 JavaScript

🕗 发布于 2024-11-18 00:31 javascript 开发语言 ecmascript

什么是JavaScript？

JavaScript（简称：js）是一门跨平台，面向对象的脚本语言，是用来控制网页行为的，它能使网页可交互。
JavaScript和java是完全不同的语言，不论是概念还是设计。但是基础语法类似。
JavaScript在1995年由Brendan Eich发明，并于1997年成为ECMA标准。
ECMAScripy 6 （ES6）是最新的JavaScript版本（发布于2015年）。

ECMA：ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript标准的。

js引入方式

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

JavaScript代码必须位于<script> /<script>标签之间

在html文档中，可以在任意地方、放置任意数量的<script>

一般会把脚本置于<body>元素的底部，可改善速度。

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

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

<script>标签不能自闭合。

JS引入方式

内部脚本：将JS代码定义在html页面的<script></script>中

建议：将<script></script>放在<body>的底部

外部脚本：将JS代码定义在js文件中，通过<script></script>标签引入

注意：通过<script>标签引入外部js文件时，标签不可以自闭合

js基础语法

书写语法

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基本语法</title>
</head>
<body>
    
</body>
    
<script>
    // alert("js");

    // 方式一：弹出警告框
    window.alert("hello js");

    // 方式二：写入html页面中
    document.write("hello js");


    //方式三：控制台输出
    console.log("hello js");
</script>
</html>

变量
JavaScript 中用 var 关键字（variable 的缩写）来声明变量。
JavaScript 是一门弱类型语言，变量可以存放不同类型的值。

变量名需遵循如下规则：

组成字符可以是任何字母数字，下划线（_) 或者美元符号（$）
数字不能开头
建议使用驼峰命名

注意事项：

lECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
lECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

数据类型、运算符、流程控制语句

JavaScript中分为：原始类型和引用类型。

算术运算符：+ , - , * , / , % , ++ , --
赋值运算符：= , += , -= , *= , /= , %=
比较运算符：> , < , >= , <= , != , == , ===
逻辑运算符：&& , || , !
三元运算符：条件表达式 ? true_value: false_value

== 会进行类型转换，=== 不会进行类型转换

类型转换

字符串类型转为数字：将字符串字面值转为数字。如果字面值不是数字，则转为NaN。

其他类型转为boolean：

Number：0 和 NaN为false，其他均转为true。
String：空字符串为false，其他均转为true。
Null 和 undefined ：均转为false。

流程控制语句

js函数

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

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

注意：

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

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

在js中，函数调用可以传递任意个数的参数。

js对象

Array

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

string

JSON

概念：JavaScript Object Notation，javaScript对象标记法。

JSON是通过JavaScript对象标记法书写的文本。

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

BOM

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

组成：

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

Window

介绍：浏览器窗口对象

获取：直接使用window，其中 window. 可以省略。

属性：

history：对 History 对象的只读引用。请参阅 History 对象。
location：用于窗口或框架的 Location 对象。请参阅 Location 对象。
navigator：对 Navigator 对象的只读引用。请参阅 Navigator 对象。

方法：

alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()：在指定的毫秒数后调用函数或计算表达式。

Location

<script>
    //获取
    // window.alert("hello Bom");
    // alert("hello Bom window");

    //方法
    //confirm -对话框 --确认：true --取消：false
    //var flag= confirm("您确认删除该记录吗？");
    // alert(flag);
    //定时器 -setInterval --周期性的执行某一个函数
   // var i=0;
    // setInterval(function(){
    //     i++;
    //     console.log("定时器执行了"+i+"次");

    // },2000)
    //定时器 -setTimeout  --延迟指定时间执行一次。
    // setTimeout(function(){
    //     alert("JS");
    // },3000);

    //Location
    alert(location.href);

    location.href="https://www.itcast.cn";


</script>

DOM

概念：Document Object Model，文档对象模型。

将标记语言的各个组成部分封装为对应的对象：

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

JavaScript通过DDM，就能对HTML进行操作：

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

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div>  <br>

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

<script>
    //1.获取Element元素
    //1.1 获取元素-根据id获取
    // var img=document.getElementById('hi');
    // alert(img);
    //1.2 获取元素-根据标签获取
    // var divs=document.getElementsByTagName('div');
    // for (let i = 0; i < divs.length; i++) {
    //     alert(divs[i]);  
    // }

    // var ins=document.getElementsByName('hobby');
    // for(let i=0;i<ins.length;i++){
    //     alert(ins[i]);
    // }

    // var divs=document.getElementsByClassName('cls');
    // for(let i=0;i<divs.length;i++){
    //     alert(divs[i]);
    // }

    //2.查询参考手册，属性、方法
    var divs=document.getElementsByClassName('cls');
    var div1=divs[0];


 

</script>

案例：通过DOM操作，完成如下效果实现。

js事件监听

事件：HTML事件是发生在HTML元素上的“事情”。比如：

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

事件监听：JavaScript可以在事件被侦测到执行代码。

事件绑定

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

<script>

    function on(){
        alert("按钮1被点击了...");
    }

    document.getElementById('btn2').onclick=function(){
        alert("按钮2被点击了...");
    }
</script>

常见事件

案例：通过事件监听以及DOM操作，完成如下效果

<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" onfocus="lower()" onblur="upper()">
    <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()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -onclick
    function on(){
        //获取image元素对象
        var img1=document.getElementById("light");
        //设置src属性
        img1.src="img/on.gif";
    }
    function off(){
        var img=document.getElementById("light");
        img.src="img/off.gif";
    }


    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -onfocus -onblur

    function lower(){
        //获取输入框元素对象
        var input=document.getElementById("name");

        //将值转为小写
        input.value=input.value.toLowerCase();

    }
    
    function upper(){

        var input=document.getElementById("name");
        input.value=input.value.toUpperCase();


    }



    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function checkAll(){
        //获取所有复选框元素对象
        var hobbys=document.getElementsByName('hobby');
        for (let i=0;i<hobbys.length;i++){
            const element=hobbys[i];
            element.checked=true;

        }

    }

    function reverse(){
        var hobbys=document.getElementsByName('hobby');
        for (let i=0;i<hobbys.length;i++){
            const element=hobbys[i];
            element.checked=false;
        }

    }


</script>

原文地址：https://blog.csdn.net/m0_73618358/article/details/143812620

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【日常记录-Git】git log
下一篇：21.UE5游戏存档，读档，函数库

【C++】构造与析构函数
⽆参构造函数、全缺省构造函数、我们不写构造时编译器默认⽣成的构造函数，都叫做默认构造函数。
阅读更多2024-11-18
#渗透测试#SRC漏洞挖掘#蓝队基础之网络七层杀伤链02
识别Windows典型应用是指通过一定的技术和方法，自动识别和分类Windows操作系统中的各种应用程序。这对于自动化测试、应用管理、性能监控等领域具有重要意义。识别Linux典型应用是指通过一定的技
阅读更多2024-11-18
【网络】什么是交换机？switch
综上所述，交换机是一种重要的网络设备，它通过为网络节点提供独享通路和高效的数据转发机制，提高了网络传输效率和管理便利性。它通过对MAC地址的识别，实现数据帧的转发。功能：交换机能为接入交换机的任意两个
阅读更多2024-11-18
Go开发指南- Goroutine
在java中我们要实现并发编程的时候，通常要自己维护一个线程池，并且需要去包装任务、调度任务和维护上下文切换。这个过程需要消耗大量的精力。Go语言中有一种机制，可以让系统自动把任务分配到CPU上实现并
阅读更多2024-11-18
NX二次开发将刀轨转曲线
获取选择的程序导轨和当前加工坐标系，获取导轨数据点转换到加工坐标系，然后创建样条，创建样条是用UG录制的代码，有更好的方法欢迎交流学习一下。
阅读更多2024-11-18
STM32寄存器结构体详解
2.#define IOMUXC_GPIO1_IO03_GPIO1_IO03 0x020E0068U, 0x5U, 0x00000000U, 0x0U, 0x020E02F4U 的解释。通过宏定义，使
阅读更多2024-11-18
Android 12.0 第三方app授予DeviceOwner权限调用系统reboot,显示隐藏app,锁屏,禁用app等功能系统层部分实现
在12.0的系统rom定制化开发中，在有些客户开发app的功能中，需要系统授予app的DeviceOwner权限，然后app就可以实现重启关机禁用下拉通知栏，显示隐藏app，等功能，首选需要在app和
阅读更多2024-11-18
同构字符串
每个出现的字符都应当映射到另一个字符，同时不改变字符的顺序。不同字符不能映射到同一个字符上，相同字符只能映射到同一个字符上，字符可以映射到自己本身。中的字符可以按某种映射关系替换得到。，那么这两个字符
阅读更多2024-11-18
unity 下拉列表根据内容长度进行下拉列表长度的自适应
unity 下拉列表根据内容长度进行下拉列表长度的自适应
阅读更多2024-11-18
MATLAB实现狼群算法优化柔性车间调度(GWO-fjsp)
MATLAB实现狼群算法优化柔性车间调度(GWO-fjsp)
阅读更多2024-11-18