一、什么是JavaScript?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门:

  1. HTML 定义了网页的内容
  2. CSS 描述了网页的布局
  3. JavaScript 网页的行为

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

  1. JavaScript 是一种轻量级的编程语言。
  2. JavaScript 是可插入 HTML 页面的编程代码。
  3. JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
  4. JavaScript 很容易学习。

二、简单实例

JavaScript:对事件的反应

<button type="button" onclick="alert('欢迎!')">点我!</button>

image-20210331170222701

JavaScript:改变 HTML 内容

<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

image-20210331170423352

您会经常看到 document.getElementById("some id")。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。

JavaScript:改变 HTML 图像

<div class="box">
        <img id="change" onclick="changeImg()" src="#.jfif" alt="">
    </div>
    <script>
        function changeImg(){
            ele = document.getElementById("change");
            if(ele.src.match("1")){
                ele.src="2.jfif";
            }else if(ele.src.match("2")){
                ele.src="3.jfif";
            }else if(ele.src.match("3")){
                ele.src="4.jfif";
            }else{
                ele.src="#.jfif";  
            }
        }
    </script>

以上实例中代码 element.src.match("1") 的作用意思是:检索* 里面 src 属性的值有没有包含 1 这个字符串,如果存在字符串1,图片 src 更新为 ./2.jfif

image-20210331180252236

image-20210331180300166

  1. 在标签中填写 onclick 事件调用函数时,不是 onclick=函数名, 而是 onclick=函数名+()
  2. 外部 javascript 文件不使用<script>标签,直接写 javascript 代码
  3. HTML 输出流中使用 document.write,相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用(如使用函数),会覆盖整个文档。

三、JavaScript输出

JavaScript 可以通过不同的方式来输出数据:

  1. 使用 window.alert() 弹出警告框。
  2. 使用 document.write() 方法将内容写到 HTML 文档中。
  3. 使用 innerHTML 写入到 HTML 元素。
  4. 使用 console.log() 写入到浏览器的控制台。
    <p id="demo">HELLO</p>
    <script>
        window.alert("弹出窗口");
        document.getElementById("demo").innerHTML="Hello"
        document.write(new Date)
        a=5
        b=5
        c=7
        result = a+b+c
        console.log(typeof a)
        console.log("result="+result)
    </script>

image-20210401132640931

四、JavaScript 语法

JavaScript 语法

  1. JavaScript 是一个脚本语言。
  2. 它是一个轻量级,但功能强大的编程语言。

JavaScript 字面量

  1. 在编程语言中,一般固定值称为字面量,如 3.14。
  2. 数字(Number)字面量可以是整数或者是小数,或者是科学计数(e)。
    <script>
        a=3
        b=0.23
        c=2e5
        console.log(a)
        console.log(b)
        console.log(c)
    </script>

image-20210401133442658

3.字符串(String)字面量可以使用单引号或双引号

    <script>
        a=3
        b="0.23"
        // typeof 是判断字面量的类型
        console.log(typeof a)
        console.log(a)
        console.log(typeof b)
        console.log(b)
    </script>

image-20210401134053770

4.表达式字面量用于计算:

 <p id="demo"></p>
    <script>
        document.getElementById("demo").innerHTML=4*20;
    </script>

image-20210401134631114

5.数组(Array)字面量定义一个数组:

[40, 100, 1, 5, 25, 10]

6.对象(Object)字面量定义一个对象:

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

7.函数(Function)字面量定义一个函数:

function myFunction(a, b) { return a * b;}

JavaScript 变量

1.JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值

变量是一个名称。字面量是一个

    <p id="demo"></p>
    <script>
        var length;
        length = 6;
        document.getElementById("demo").innerHTML = length;
    </script>

image-20210401142325641

三种变量命名规则:

var firstName='king';//小驼峰

var FirstName='queen';//大驼峰

var first_name='maizi';//下划线法

JavaScript 操作符

JavaScript使用 算术运算符 来计算值:

    <script>
        a = 5;
        b = 6;
        console.log("a+b="+(a+b))
        console.log("a*b="+(a*b))
        console.log("a-b="+(a-b))
        console.log("a/b="+(a/b))
    </script>

image-20210401143215273

JavaScript语言有多种类型的运算符:

image-20210401143400186

JavaScript 关键字

JavaScript 同样保留了一些关键字,这些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。

image-20210401143653212

JavaScript 注释

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略:

JavaScript 数据类型

JavaScript 有多种数据类型:数字,字符串,数组,对象等等:

    <script>
        var length = 16;                                  // Number 通过数字字面量赋值
        var points = length * 10;                              // Number 通过表达式字面量赋值
        var lastName = "Johnson";                         // String 通过字符串字面量赋值
        var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
        var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值
        console.log(typeof length);
        console.log(length);
        console.log(typeof points);
        console.log(points);
        console.log(typeof lastName);
        console.log(lastName);
        console.log(typeof cars);
        console.log(cars);
        console.log(typeof person);
        console.log(person);
    </script>

image-20210401145007402

JavaScript 函数

JavaScript 语句可以写在函数内,函数可以重复引用,引用一个函数 = 调用函数(执行函数内的语句)

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}

JavaScript 字母大小写

  1. JavaScript 对大小写是敏感的。
  2. 当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
  3. 函数 getElementByIdgetElementbyID 是不同的。
  4. 同样,变量 myVariableMyVariable 也是不同的。

JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Q.E.D.