JavaScript回顾

什么是javaScript（Js）

JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

为什么学习 JavaScript?

• HTML 定义了网页的内容
• CSS 描述了网页的布局
• JavaScript 控制了网页的行为

JS语法和使用

我的第一个 Web 页面

<!--如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：-->
<h1>我的第一个 Web 页面</h1>

<p id="demo7">我的第一个段落</p>
<button type="button" onclick="test1()">点击这里</button>
<script>
    var  text = document.getElementById("demo7")
    function test1() {
        text.innerHTML = "段落已修改。";
    }
</script>

JavaScript 能改变 HTML 元素的内容

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

改变图像

<script>
    document.write("
JavaScript：改变 HTML 图像
");
</script>
<script>
    function changeImage()
    {
        element=document.getElementById('myimage')
        if (element.src.match("bulbon"))
        {
            element.src="https://www.runoob.com/images/pic_bulboff.gif";
        }
        else
        {
            element.src="https://www.runoob.com/images/pic_bulbon.gif";
        }
    }
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="https://www.runoob.com/images/pic_bulboff.gif" width="100" height="180">

判断

<p>点击按钮检测年龄。</p>
年龄:<input id="age" value="18" />
<p>是否达到投票年龄?</p>
<button onclick="myFunction11()">点击按钮</button>
<p id="demo11"></p>
<script>
    function myFunction11()
    {
        var age,voteable;
        age=document.getElementById("age").value;
        voteable=(age<18)?"年龄太小":"年龄已达到";
        document.getElementById("demo11").innerHTML=voteable;
    }
</script>



<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo2" type="text">
<script>
    function myFunction1()
    {
        var x=document.getElementById("demo2").value;
        if(x==""||isNaN(x))
        {
            alert("不是数字,是你的名字");
        }
    }
</script>
<button type="button" onclick="myFunction1()">点击这里</button>

浏览器调试

<!--
如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
-->

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

加减

<script>
    var x1 = 5 + 6;
    x2 = 16 + "Volvo"
    function myFunction9() {
        document.write(x2);
    }
</script>
x1 = 5 + 6;
x2 = 16 + "Volvo"

<button onclick="myFunction9()">点我</button>

搜索字符串

<p>搜索字符串 "runoob", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo5"></p>
<script>
    function myFunction() {
        var str = "Visit 123Runoob!";
        var n = str.search(/Runoob/i);
        document.getElementById("demo5").innerHTML = n;
    }
</script>

类型强制转换

<script>
    String(false)        // 返回 "false"
    String(true)
</script>


p>toString() 方法将数字转换为字符串。</p>
<p id="demo6"></p>
<script>
    var x = 123;
    document.getElementById("demo6").innerHTML =
        x.toString() + "
" +
        (123).toString() + "
" +
        (100 + 23).toString();
</script>

正则表达式

<!--正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。-->
<!--
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）
使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式
搜索模式可用于文本搜索和文本替换。
-->

循环

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction10()">点击这里</button>
<p id="demo18"></p>
<script>
    function myFunction10(){
        var x="",i=0;
        while (i<5){
            x=x + "该数字为 " + i + "
";
            i++;
        }
        document.getElementById("demo18").innerHTML=x;
    }
</script>