javascript基础一-优快云博客

本文链接：https://blog.youkuaiyun.com/xxf15162161455/article/details/79793684

本文介绍了JavaScript的基础知识，包括其组成（ECMAScript、DOM和BOM）、特点、引入方式及注解等内容。此外还讲解了变量的命名规则、数据类型转换、基本事件处理等关键概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript组成部分：
1.核心ECMAScript：ECMAScript是一个标准。
因为网景开发了JavaScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer ManufacturersAssociation）组织定制了JavaScript语言的标准，被称为ECMAScript标准。

2.文档对象模型DOM：文档对象模型（DOM），描述处理网页内容的方法和接口

3.浏览器对象模型BOM：浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

js的特点重点内容
1.是一种解释性脚本语言
2.向html页面中添加行为
3.可以直接嵌入html页面也可以写成单独的js文件
4.跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（window,linux,Mac,Android,iOS等）
5.简单弱类型的脚本语言
6.是一种事件驱动的脚本语言

js的引入方式
1.外部引入
2.内部引入

注解
1.单行注解
2.多行注解

输出方式
alert() / prompt() / console.log() / console.dir() / document.write()

变量，命名规则，关键字，保留字
1.变量（储存信息的容器）①变量值②变量名
2.命名规则：
①.由数字/字母/下滑线(_)/美元符($)构成, 第一个字符不能为数字
②.驼峰命名法
③.避免和系统关键字重复
④.区分大小写
3.关键字：关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等。
按照规则，关键字也是语言保留的，不能用作标识符。

break do instance typeof
case else new var
catch finally return void
continue for switch while
function this with default
if throw delete in
try
4.保留字：保留字有可能在将来被用作关键字来使用。

abstract int short boolean export interface static byte
extends long super char
final native class float
throws const goto private
double import public

基础事件
1.获取元素
2.事件
①.onclick
②.onmouseenter
③onmouseleave

类型、赋值、类型转化、运算符
1.6中数据类型http://www.cnblogs.com/wcs344292264/p/5368861.html
①.string
②.number
③.boolen
④.null:alert(typeof null); //object（其实这是JavaScript最初实现的一个错误，后来被ECMAScript沿用下来）
!exp && typeof exp != “undefined” && exp != 0
⑤.undefined:undefined值是派生自null值的，因此ECMA-262规定对他们的相等测试要返回true：
⑥.object

2.typeof操作符：typeof返回的是字符串有六种可能:”number”,”string”,”boolean”,”object”,”function”,”undefined”
3.赋值

4.类型转化
①.Number（）：只对纯数字进行转化
②.String（）
③.parseInt

5.运算符
1）.算数运算符
i——“ + ”
1.数字+字符串 + 成为连接符
2.隐式转化数字隐式转化为字符串
” + “参与运算的都是数字，那就按照数学运算加法；
如果参与运算的部分包含字符串，那么就转化为字符串链接
ii——、” - “1.数字-字符串 /字符串-数字
字符串转化为数字再运算
2.字符串-字符串
字符串转化为数字再运算
iii——、” * ”
iV——、” / “1.toFixed(num)保留几位小数
2.js数字类型的精度准确值精度是16位
V——、” % “

2）.符合运算符

引入方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                // 单行注释
                // window.onload 是当浏览器加载了所有的资源后再执行方法内的JS语句
                var b = document.getElementById("div1");
                console.log(b);
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
    <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var a = document.getElementById("div1");
        console.log(a);
    </script>
</html>

输出方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 警告，弹出框（每次刷新的时候都会弹出）
        alert("呵呵");
        // 确认框，
        confirm("确认吗");
        // 提问 回答框
        var ans = prompt("吃了吗");
        /*var ans = prompt("吃了吗");
        var ans2 = "没有";
        console.log(ans);
        if(ans==ans2){
            alert("来吃点吧");
            window.location.href = "https://www.baidu.com/"
        }else{
            alert("你走吧！")
        }*/
        // 控制台打印
        console.log("hello js");
        //控制台打印对象详细信息
        console.dir(document.body);
        // 直接在文档中写入内容
        document.write("我是body内容");
        document.write("<a href='https://www.baidu.com'>前往百度</a>");
    </script>
</html>

6种数据类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>

    <script type="text/javascript">
        var a = 1;// number 数字类型
        console.log(typeof a);
        var b = true;
        var c = false;// Boolean 布尔值类型
        console.log(typeof b,typeof c);//"boolean"
        var d = 'hellowordld';// String类型
        console.log(typeof d);//"string";
        var e = null;// Null 空类型
        console.log(typeof e);//"object"
        var f = undefined;// Undefined 未定义类型，派生自空类型
        console.log(typeof f);//"undefined"
        var g = {
            name:"张三",
            say:function(){
                alert("hello,我是张三");
            }
        };//Object 对象类型；
        console.log(typeof g);


        //函数、数组
        var h = function(){};
        console.log(typeof h);//"function";
        var i = [1,2,3];
        console.log(typeof i);//"object"
    </script>
</html>

变量命名规则

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
//  1.数字,字母,下划线.$,不可数字开头;
        var div_son$grandson3 = 1;// 正确的
//      var 3div$ = 2;// 错误3
//      bvr div#span$aa = 3;// 错误#

//  2.驼峰命名法，首单词首字母小写，气后的单词首字母大写；
        var divClassName="div1";

//  3.不能与系统的关键字和保留字重复；
        // var if=1;//错误

//  4.区分大小写；


    </script>
</html>

数据类型的转化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var a = 1;
        var b = Boolean(a);
        console.log(b);
        var c = 0;
        var d = Boolean(c);
        console.log(d);
        // 数字类型，非0即真 true

        var e = "";
        // 字符串类型，非空即真
        console.log(Boolean(e));

        var f = null;//false
        console.log(Boolean(f));

        var g;// false;
        var g = undefined;//false;
        console.log(Boolean(g));

        // "="赋值
        // "+"如果数据类型都是数字，则进行加法运算；如果有一个字符串，它是做连接符；
        var str1 = "abc";
        var str2 = "def";
        var res = str1+str2;// 字符串的拼接（连接符）；
        console.log(res);
        var num1 = 22;
        var num2 = 44;
        var res2 = num1+num2;// 运算符；数字之间的加法运算；
        console.log(res2);
        var str3 = "aaa";
        var num3 = "333";
        var res3 = str3+num3;
        console.log(res3);

        //Number(),parseInt(),parseFloat();
        var str3 = "123.89a12";
        var num = Number(str3);
        console.log(typeof num);
        // Number方法，对纯数字字符串可以直接转化，如果不是，则结果是NaN-not a number;
        //NaN==NaN 错误的
        var num = parseInt(str3);
        console.log(num);
        var num = parseFloat(str3);
        console.log(num);
        var num = 3.141592653;
        var num1 = Number(num.toFixed(3));
        console.log(num1);

    </script>
</html>

获取元素和绑定事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 100px;
                background-color: yellow;
                transition: 2s;
            }
            #div2{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
    <script type="text/javascript">
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");

        div1.onclick = function(){
            div1.style.width = "200px";
            div1.style.height = "200px";
            div1.style.backgroundColor = "blue";
        }
        div2.onmouseenter = function(){
            div1.style.backgroundColor = "cyan";
            div1.style.width = "300px";
            document.body.style.background="black"
        }
        div2.onmouseleave = function(){
            div1.style.backgroundColor="yellow";
            div1.style.width ="100px";
        }

    </script>
</html>