一.js初识-CSDN博客

本文链接：https://blog.csdn.net/kzwsa/article/details/126471657

1. JavaScript的发展历史(了解)

1995年   网景公司研发了第一个商用浏览器  js最开始出现的目的是为了解决表单提交

是布兰登艾奇 利用10天时间解决了表单提交问题  借鉴liveScript---JavaScript
JavaScript和Java有什么区别  

微软也研发浏览器  1995年 发布了IE3.0----自己研发了一个类似于js的东西
研发了一套标准：ECMAScript1.0  es1
现在用的最广泛的标准是ECMASCript5.0简称es5    ECMASCript6.0---简称es6

3. JavaScript介绍

1.网站组成

HTML--超文本标记语言---结构
CSS---层叠样式表-----样式
js---js脚本语言---网站交互

2.什么是JavaScript

==基于对象和事件驱动的解释性脚本语言==

基于对象：。
事件驱动：JavaScript 可以直接对用户或者客户输入做出响应，无须经过 web 服务器，它对用户的响应，以事件驱动的方式进行。
解释性
- 解释性：可以直接识别，读一行执行一行
- 编译性：高级语言，c c++ ,先编译计算机能识别的，再执行（速度快）

3.==JavaScript的特性==

基于对象
事件驱动 
解释性
跨平台

3.==JS的组成==

ECMASscipt：js的标准  这个标准里面有js的语法和常用对象
DOM  Document Object Modal  文档对象模型
BOM  Browser object Modal  浏览器对象模型

2.代码初识

1. JS引入方式

1. 行间引入

  <!-- 第一种 行间引入 将js的语法直接写在开始标签上
         注意：双引号不能嵌套双引号  单引号也不能嵌套单引号  但是双引号和单引号可以相互嵌套
         onclick  鼠标点击事件
         alert("提示信息")  浏览器弹窗
         缺点:结构行为不分离  不方便后期维护
     -->
    <button οnclick="alert('今天周一')">提交</button>

2. 内部引入

  <!-- 
        第二种 内部引入 
        js代码放在script标签中 script标签可以放在任意位置  代码的执行顺序是从上往下执行
        建议：一般放在head和body的末尾 是因为js一般都是操作标签 我们要确保标签先加载出来
        缺点:结构行为不分离
     -->
     <script>
        //浏览器弹窗
        alert("弹走弹走6")
        //操作div标签   操作p标签
    </script>

3. 外部引入

  <!-- 第三种 外部引入
             在外部创建js文件 通过script标签的src属性引入文件 src="js文件路径"
             注意:引入外部文件的script标签 里面不能再写其他的js脚本
    -->
    <script src="./1.js">
        // alert("没有弹走")  不要在这里面再写其他的js代码
    </script>
    <script>
        alert("没有弹走")
    </script>

4. 语法规则与注释

<body>
   
    <!-- 注释
        单行注释 //  一行js代码  快捷键是ctrl+/
        多行注释 /*  多行js代码 */  快捷键是ctrl+shift+/
    -->
    <!-- js的语法
        1-每行语句后面要加;
        2-js中严格区分大小写，有时候会使用驼峰命名 fontSize
    -->

    <script>
        /*  */
        // 
        alerT("123");
    </script>
</body>

4.2 JavaScript的调试语句

js调试:在实际开发过程中用于检测代码的功能的一种方式

1.alert()

语法: alert(提示信息)
作用: 在页面中弹出警告框，用于提示
缺点: 阻塞性的弹窗一次只能输出一个

  <script>
       alert("提示信息");
       alert("你在说什么");
       console.log("123")
    </script>

2. console.log()

语法：console.log(输出信息)
作用：在控制台打印信息多个输出之间用逗号隔开

 <script>
        //2.console.log()
        console.log("中午吃啥");
        console.log("米饭","泡面","西北风");
    </script>

3 .打断点

在sources找到当前运行的文件---在打断点的代码行号上点击

3. 变量

概念:存储数据的容器称作变量(标识符) 给存储数据的区域起个名字
语法:var 变量名 = 值

基础用法

<script>
        // 1.声明变量--基础用法
        var a;
        console.log(a);//undefined  未定义 声明了变量但是没有赋值
        //2 赋值   读法：将右侧数据123赋值给左边的变量a
        a = "123";
        console.log(a);//123

        //3.声明变量和赋值同时进行
        var b = "456";

        //4.同时声明多个变量 逗号意味着这行代码没有结束
        var c = "泡面", d = "赵四";
        console.log(c, d)//泡面 赵四

        //5.连等写法  x y的值都是”789
        var x = y = "789";
        console.log(x, y);// 789 789

    </script>

特殊用法

//6.特殊用法  不建议使用
        t = "10";//全局变量
        console.log(t);//10

        console.log(a1);//a1 is not defined  没有声明没有赋值
        
        var a2;
        console.log(a2);//undefined   只是声明了变量  但是没有赋值

变量的命名规则
- 以数字字母下划线 $组成,但是不能以数字开头
- 不能使用关键字和保留字
- 见名知意使用驼峰命名（大驼峰和小驼峰都可以）
- 变量不要重名重名会覆盖

4.JS基础交互

1. 获取标签

2. 鼠标事件

==注意:onmouseover和onmouseenter及onmouseout和onmouseleave的区别放在事件冒泡讲==

onclick : 点击事件
ondbclick:鼠标双击
onmouseover/onmouseenter :  鼠标移入事件
onmouseout/onmouseleave  :  鼠标移出事件
onmousemove :  鼠标移动事件
onmousedown :  鼠标左键按下
onmouseup   :  鼠标左键抬起
oncontextmenu: 鼠标右键显示菜单