js详解1

简介: js详解1

一、JavaScript是什么?

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言 。

1.主要的功能:

嵌入动态文本于HTML页面。

对浏览器事件做出响应。

读写HTML元素。

在数据被提交到服务器之前验证数据。

检测访客的浏览器信息。控制cookies,包括创建和修改等。

基于Node.js技术进行服务器端编程

2.语言的组成:

ECMAScript,描述了该语言的语法和基本对象。

文档对象模型(DOM),描述处理网页内容的方法和接口。

浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

二、JS基础内容

1.js基础——hello world

代码如下(示例):

 

<!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>Document</title>
    <!-- js代码需要编写在scrpit标签内 -->
    <script>
 
        // 控制浏览器弹出警告框
        alert("这是我的第一行js代码!");
 
        // 让计算机在页面输出内容
        document.write("Hello World!!!");
 
        // 向控制台输出内容
        console.log("你猜猜我在哪呢!!!");
 
 
        // alert("这是一个弹窗!!");
        // document.write("这是一个文本内容!!");
        // console.log("这是控制台输出内容");
    </script>
</head>
<body>
    
</body>
</html>

2.js基础——js编写的位置

js有三种编写位置的方式

第一种:直接在标签内部使用

第二种:在script标签内使用

第三种:在外部js文件中编写,通过script标签引入(推荐使用)

<!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>
    <!-- 
        可以将js代码编写到外部js文件中,然后通过script标签引入
        写到外部文件中可以在不同页面同时使用,也可以利用浏览器缓存机制
        推荐使用
    -->
    <!-- 
        script标签一旦引入外部文件了,就不能在此标签内写代码了,即使编写也不会被编译
        如果需要则可以在创建一个新的script标签用于编写内部代码
     -->
    <script src="./js/scrpit.js"></script>
 
 
    <!-- 
            可以将代码编写到script标签内 
        <script>
            alert("我是script标签内的js代码")
        </script>
    -->
</head>
<body>
    <!-- 
        可以将js代码写在标签的onclick属性中
        当我们点击按钮时,js代码才会执行
     -->
    <button onclick="alert('讨厌,你点我干嘛!!!')">点我一下</button>
    <!-- 
        可以将js代码写在超链接的href属性中,当点击超链接时,会执行js代码
     -->
     <a href="javascript:alert('让你点你就点')">你也点我一下</a>
     <a href="javascript:">你也点我一下</a>
</body>
</html>


目录
相关文章
|
UED
生命中的开关:深入探讨Deactivated和Activated生命周期
生命中的开关:深入探讨Deactivated和Activated生命周期
284 1
|
easyexcel Java
EasyExcel模板填充
EasyExcel模板填充
633 1
|
监控 安全 JavaScript
DVWA CSP Bypass 通关解析
DVWA CSP Bypass 通关解析
|
Ubuntu 机器人 Shell
ubuntu20.04创建ros环境、创建rospackage
至此,我们已经详细讲解了在Ubuntu 20.04上创建ROS环境及ROS包的步骤。这为进一步的机器人软件开发奠定了坚实的基础。
582 1
【数据结构与算法】:关于时间复杂度与空间复杂度的计算(C/C++篇)——含Leetcode刷题-1
【数据结构与算法】:关于时间复杂度与空间复杂度的计算(C/C++篇)——含Leetcode刷题
|
自然语言处理 算法 Shell
【Rasa+Pycharm+Tensorflow】控制台实现智能客服问答实战(附源码和数据集 超详细)
【Rasa+Pycharm+Tensorflow】控制台实现智能客服问答实战(附源码和数据集 超详细)
376 0
|
存储 IDE KVM
不想用了PVE了怎么办?那就迁移到VMware呗!
不想用了PVE了怎么办?那就迁移到VMware呗!
|
SQL 消息中间件 分布式计算
Hadoop学习笔记(HDP)-Part.05 Yum源配置
01 关于HDP 02 核心组件原理 03 资源规划 04 基础环境配置 05 Yum源配置 06 安装OracleJDK 07 安装MySQL 08 部署Ambari集群 09 安装OpenLDAP 10 创建集群 11 安装Kerberos 12 安装HDFS 13 安装Ranger 14 安装YARN+MR 15 安装HIVE 16 安装HBase 17 安装Spark2 18 安装Flink 19 安装Kafka 20 安装Flume
268 0
|
存储 缓存 OLAP
阿里云 X Apache Doris X Zilliz沙龙回顾|大模型时代的数据存储与分析
9月16日,阿里云存储和云原生联合两个热门的数据分析项目 Apache Doris 和 Zilliz 共同探讨非结构化数据处理和分析的最佳实践
1097 0
|
数据安全/隐私保护
校园直播平台应用场景分享
目前,职高学校都建有报告厅、多功能厅等,用于举办一些专案讲座、开学典礼、毕业典礼、学术论文等,但是现场容纳的人数有限,无法让所有的学生同时参加,基于这种情况,学校采用多机位摄像机拍摄,将现场画面以直播,该方案用于将其整合
校园直播平台应用场景分享