JavaScript初识（笔记）

最新推荐文章于 2025-02-01 22:48:57 发布

原创最新推荐文章于 2025-02-01 22:48:57 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

本文从JavaScript的诞生历史讲起，介绍了JavaScript的引入方式，包括行内、内嵌式和外链式，以及如何进行注释。深入探讨了事件处理、元素内容和属性的操作，并讲解了JavaScript的组成部分和变量定义。

JavaScript初识

2.JavaScript的历史

诞生的时间：1995年
布兰登·艾奇借鉴了C语言的基本语法 Java的数据结构用了7天时间这门语言诞生了
最初名字叫LiveScript 当时Java比较火蹭下热度后来改名为JavaScript (网景公司)
js诞生之初是为了解决网页的表单验证（没有js的时候都是服务器做表单验证）

3.js的引入

行内

基本不常用

 <div style="width: 100px; height: 100px;background-color: red;" onclick="alert('我喜欢写代码')"></div>
 <div style="width: 100px; height: 100px;background-color: red;" onclick="alert('不忘初心，方得始终。')"></div>

内嵌式

书写位置

一般在紧挨着body的结束标签
head中

<body>
    <!-- 
        内嵌式
        书写位置 
             任意（一般写到紧挨着body的结束标签） 因为到这HTML一定加载完毕了 
                  head中
        alert('内容'); 弹窗 
        <script>
            js代码   
        </script>
     -->
     <script>
         alert('hello world');
         alert('hello world1');
     </script>
</body>

外链式

script标签中不要书写内容不识别
书写位置和内嵌式一致

    <script src="js/test.js">
        // 外链式的script的标签中不能写内容 （写了也白写）
        // alert('我喜欢学习JavaScript');
    </script>

4.js的注释

// CTRL + / 单行注释
/* 注释内容 */ 多行注释

5.js三部曲

获取要操作的元素
绑定事件
做对应的事情

6.js的调试

alert(内容)；
- 放的是文本内容：需要用单引或双引包起来
- 数字：直接放即可
console.log(内容); 控制台输出（比较常用的）
- F12开发者工具
- Console里
- 内容类比alert的内容

7.window.onload

保证文档中的资源加载完毕
使用场景：在结构之前引入js文件

    <script>
        // window.onload ：表示文档中的资源加载完毕（HTML,CSS,图片，音频，视屏等）
        // onload:资源加载完毕事件
        window.onload = function(){
            //js代码
            document.getElementById("box").onclick = function(){
                console.log("我被点击了");
            }
        }
    </script>

8.js中其它的鼠标事件

onclick 单击事件
ondblclick 双击事件
onmouseover 鼠标移入
onmouseout 鼠标移出
onmouseenter 鼠标进入
onmouseleave 鼠标离开
oncontextmenu 鼠标右击

自己试一下

onmousedown 鼠标按下
onmouseup 鼠标抬起
onmousemove 鼠标移动

9.鼠标移入和进入及以处和离开的区别

onmouseover 和 onmouseout 不仅仅回触发本身的事件也会将父的事件去出触发

onmouseenter 和 onmouseleave 仅仅回触发自身的，不会触发父集的

//onmouseover   和  onmouseout 不仅仅回触发本身的事件也会将父的事件去出触发
// document.getElementById("father").onmouseover = function(){
//     console.log('father')
// }

// document.getElementById("son").onmouseover = function(){
//     console.log('son')
// }

//onmouseenter 和 onmouseleave  仅仅回触发自身的，不会触发父集的
 document.getElementById("father").onmouseenter = function(){
    console.log('father')
}

document.getElementById("son").onmouseenter = function(){
    console.log('son')
}

10.javaScript的组成

javaScript的概念：js是一门具有面向对象能力的，基于事件驱动的，具备一定安全性浏览器脚本言语。
javaScript组成
- ECMAScript(核心js):规范js的基本语法，变量，命名规范，操作语句等一些内容
- DOM（Documnet Object Model）文档对象模型操作HTML的
- BOM（Browser Objet Model）浏览器对象模型

11.变量

1.变量的理解

变量：用来存储值或代表值的
怎么去定义一个变量
- var 变量名 = 值;
  - =:赋值运算符将等号右边的值赋值给左边
  - ；表示当前这行代码段结束了

2.变量的声明方式

只声明不定义
- 声明：var
- 定义：赋值
```
var a;
console.log(a);
```
声明+定义
```
 var b = 10;
 console.log(b);
```
连续声明+定义
```
var c = 12,d=100,f=200;
```
连续声明不定义
```
var num1,num2,num3;
```

3.变量的命名规范

可以由数字，字母，下划线，$组成，但是不能以数字开头
简明知意，符合驼峰命名法（约定俗成，第一个有意义的首字母小写，其它有意义的首字母大写）；
不能使用关键字和保留字
- 关键字：js中内置的名称
- 保留字：未来可能成为关键字的

不能重复命名，后边的回覆盖前边的

12.操作元素内容

规律：给值就是设置，不给值就获取

1.操作表单元素内容

设置
- 元素对象.value = 值；
获取
- 元素对象.value;

2.操作闭合标签

设置
- innerHTML 可以识别标签 innerText：只能识别文本
- 元素对象.innerHTML = 值；
- 元素对象.innerText = 值；
获取
- 元素对象.innerHTML ；
- 元素对象.innerText ；

3.练习

//1.获取要操作的元素
var myTxt = document.getElementById("myTxt"),
    show = document.getElementById("show"),
    btn = document.getElementById("btn");

//绑定事件
// 驼峰命名法：第一个有意义的首字母小写，其它有意义的首字母大写
btn.onclick = function(){
    // 1.获取输入框的值
    var myTxtValue = myTxt.value;

    //2.获取原来的内容   (不要覆盖的情况下我们要用原来的内容加上输入框的内容)
    var showText = show.innerHTML;

    //3.设置到DIV
    show.innerHTML = showText + '<br/>' +myTxtValue;

    // 4.清空原来输入框的内容
    myTxt.value = "";
}