JavaScript 是一种脚本语言，解释性语言通常JavaScript代码是插入到HTML文档当中的，通过浏览器解释执行JavaScript脚本代码必须位于＜script＞ 标签当中

原创 于 2023-09-11 12:06:22 发布 · 172 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文介绍了JavaScript中alert(),console.log(),document.write(),innerHTML和value属性的基本用法，以及变量、数据类型、运算符、函数、事件处理、条件语句（如if,else,switch）、循环（while,for）等基础概念和技术。

1 alert()在警告框当中显示内容    

<script>

alert("脚本弹出的警告框");

</script>   

 2. console.log()在控制台输出   

    <script>

    console.log("在控制台输出  的内容")

</script>    console.log("在控制台输出  的内容")

3. document.write()将内容写入到HTML文档当中 

<script>

   document.write("将内容写入到HTML文档当中")

   document.write("<h3>写法</h3>")

</script>  

 4. 使用innerHTML写入到HTML元素当中 通过脚本获取页面元素   

 <p id="p1" ></p >

    <script>

        document.getElementById("p1").innerHTML="通过js添加的文本内容"

    </script>

  5. 使用value属性写入到input元素 【通过设置input元素的value属性来输出内容】  <input id="1" value="初始内容">

    <script>

        document.getElementById("1").value="通过js添加的文本内容"

    </script>       

2e496f314ec644f387ce2bf2a4883ca4.png

7aa0886923764f7ab9a225880cb2e949.png 

476c9459281240ce8bcdaedd65027c30.png 

b145b99d4ee841ba86992970685e9020.png 

c359c35c1a61478387cbaf82c6532140.png 

 JavaScript的的语语法

   字面量

数字类型的字面量： 100， 3.14 字符类型的字面量：

"test string"

'test string'

变量

在编程语言当中，变量用于存放数据

在JavaScript当中使用var来定义变量， 使用=来为变量复制

<body>

    <script>

        var  i; // 定义一个变量i

        i = 100; // 将字面量100 赋值给 变量i

        console.log(i)

 

        i = 200   // 给变量赋值一个新的值

        console.log(i)

 

        i = "test string" // 给变量赋值一个不同类型的值

        console.log(i)

 

         var x, y,  z ;    // 一次性定义多个变量

        x = 1;

        y = 2;

        z = 3;

        console.log(x,y,z)

 

        var num = 100;    // 在定义变量的时候给变量赋值

        console.log(num)

    </script>

</body>7d2dc9f4c73e40f9ac0e0280807e694f.png

 JavaScript中常用的的数据类型

number : 数字

string ：字符串

boolean ：布尔值，两个字面量值 true(真) 和 false （假）

object : 对象

array ： 数组

undefined：未定义    

   例如： <script> // 数组 array

        var testArray = [1,2,3,4]

 

        console.log(testArray[2])// 通过下标来获取数组当中的元素

 

        testArray[2] = 10   // 通过下表来修改元素

        console.log(testArray[2])

 

        testArray[4] = 5  // 通过下标来增加元素

        console.log(testArray)

        // 对象使用大括号表示，元素由键值对组成

        var person = {"name": "张三","age": 20} 

        console.log(person)

        console.log(person["name"])

        console.log(person.age)

    </script>

</body>f22c277fe70c48548435c8f760204065.png

 JavaScript中的运算符

 算术运算符

[加 + 减 - 乘 * 除 / 模运算 %(余数） 自增 ++ 自减--]     <script>

        console.log(12 + 3)  // 加 +

        console.log(12 - 3)  // 减 -

        console.log(12 * 3)  // 乘 *

        console.log(12 / 3)  // 除

        console.log(13 % 3)  // 模运算 % （取余数）

 

        var num = 1;         // 自增 ++

        console.log(num++)  

 

        var num = 2          // 自减--

        console.log(num--)

    </script>

fbdd6381b9d34c369a104013f7111e99.png

 赋值运算符

=：赋值运算符   

    <script>

       var num = 100;  // 赋值num=100 

       num += 100      // num=num+100

       console.log(num)

 

       num -=30;      // num=num-30

       console.log(num)

       

       num %=50;       // num=num%  余数

       console.log(num)

    </script>e058aaceda674745b328748b00988602.png

比较运算符

案例

==: 判断两个值是否相等，如果相等返回true，否则返回false

===: 绝对相等（值相同，并且类型相同）

!=： 不等于

>

>=

<

<=

    <script>

       console.log(1 == 1.0)

       console.log(1 === 1)

       console.log(1 != 2)

       console.log(1 === "1")

       console.log(2 >1 )

       console.log( 1<= 2)

    </script>

</body>06a3aca4cf1f4bc7af41472604fbd4ef.png 

 JavaScript函数

函数是对特定功能的封装，调用函数，则是执行函数封装好的代码块，达到实现特定功能的目的。

     语法：

① // 函数定义的语法

function function_name(){实现功能的代码块//函数体}

② // 函数调用

function_name() 

例如【<script>

    function func_01(){ console.log("test")}  //定义一个函数

    func_01()

    function one(){console.log("今天天气很好")}

    one()

 

    function func_2(a,b){console.log(a+b)} //带参数的函数

    func_2(4,5)

 

    function  func_1(x,y){return x = y} //带返回值的函数

    var result = func_1(3,9)  //函数的返回结果

    console.log(result)

    console.log(func_1(11,22))

   </script>

56ceb2584ab2469cb41e9298009b059b.png

 事件 ： 当某个事件发生的时候，可以触发的JavaScript代码的执行

<!--onclick表示当用户点击时，会触发的动作-->

<!--动作实际就是JS代码-->

<button onclick="func()">点击获取较大的一个数的数值</button>

案例

 <h3>找出用户输入的比较大的这个数</h3>

    <div>

        值1:<input  id="value1" type="number">

    </div>

    <div>

        值2:<input id="value2" type="number">

    </div>

    <div>     <!--onclick表示当用户点击时，会触发的动作-->

              <!--动作实际就是JS代码-->

        <button onclick="func()">点击获取较大的一个数的数值</button>

    </div>

    <p>

        较大的数是：<span id="result"></span>

    </p >

    <script>

        function func() { 

          var num1 = document.getElementById("value1").value

          var num2 = document.getElementById("value2").value

 

          num1 = Number(num1)

          num2 = Number(num2)

          var result = (num1>num2) ? num1 : num2

          document.getElementById("result").innerHTML=result

        }

    </script>

5fd07ab2915f4048870ed5a6689a050f.png

 条件语句 ：根据不同的条件执行不同的代码

if

if ... else ...

if ... elif ... else

     <!-- if (condition){

        当condition为true的时候会执行的代码1

         当condition为true的时候会执行的代码2} -->

<script>

    var age = 15      

    if (age >=16){

        console.log("已成年")

        console.log("可以进入游戏")

    }

    console.log("end")

   </script>

73e07c989c09474ebdbba9ce05cb40ef.png

 if... else ....     

 if (condition){ 当condition为true的时候会执行的代码1                       

                      当condition为true的时候会执行的代码2

                      }

else { 当condition为false的时候会执行的代码1 

        当condition为false的时候会执行的代码2

......

}

例子【 <script>

    var age = 16      

    if (age >=16){

        console.log("已成年")

        console.log("可以进入游戏")

    }

    else{

    console.log("未成年")

    console.log("赶紧去做作业")}

    console.log("end")

 

    var age = 15      

    if (age >=16){

        console.log("已成年")

        console.log("可以进入游戏")

    }

    else{

    console.log("未成年")

    console.log("赶紧去做作业")}

    console.log("end")

   </script>

ddcbe04e146046f38b032a3006007c70.png

 if ... else if ... else  

if (condition1){ 

当condition1为true的时候会执行的代码1   

当condition1为true的时候会执行的代码}

                                                                                                                                                                                                    else if (condition2){ 当condition1为false, condition2为ture的时候会执行的代码1 

                                当condition1为false condition2为ture的时候会执行的代码2 }

else { 所有的条件都不成立的时候执行的代码1 

            所有的条件都不成立的时候执行的代码2}

例子： 

<br>

<script>

    var age = 16      

    if (age >=16){

        console.log("已成年")

        console.log("可以进入游戏")

    }

    else{

    console.log("未成年")

    console.log("赶紧去做作业")}

    console.log("end")

 

    var age = 15      

    if (age >=16){

        console.log("已成年")

        console.log("可以进入游戏")

    }

    else{

    console.log("未成年")

    console.log("赶紧去做作业")}

    console.log("end")

   </script>

7085b4302cd5486cbf2df21e482b95e3.png

 分支语句

执行多个代码块中的某一个

switch (n)

{ case 1: 代码块1

            break;

case 2: 代码块2

            break;

......

default: 和上面的case没有匹配成功的时候，执行此代码块}

案例

<script> 

        var d = new Date().getDay()

        console.log(d)

 

        var result

     switch (d){

        case 0:

        result = "星期日"

        break

        case 1:

        result = "星期一"

        break

        case 2:

        result = "星期二"

        break

        case 3:

        result = "星期三"

        break

        case 4:

        result = "星期四"

        break

        case 5:

        result = "星期五"

        break

        default:

        result = "星期六"

         }     // 今天是周三  所以控制台输出是3  星期三                            

        console.log(result) 

        </script>

2db78e99c4354944873ad6452c38dd87.png

 循环 语句 1，while循循环   

while (condition){ 当condition为true的时候会不断执行的代码1 

                           当condition为true的时候会不断执行的代码2}

案例： 

<script>

        // 求1-100之间的累加和

        var result = 0 //用于存放累加和,初始值为0

        // 执行了100次 resutl += i, i的值从1开始,到100结束

        var i = 1

        while(i <= 100){

        result += i

        i++

        }

        console.log(result)

        </script>

54be407a23134109b92e4bb6d999fb6d.png

 for循环 for(语句1; 语句2; 语句3){ 循环体}

语句1： 循环体代码执行之前会执行1次该语句

语句2： 循环的判断条件

语句3： 循环体执行完1次之后都会执行该语句  

  例子：  <script>

        var result = 0 

        for (var i = 1; i <= 100;i += 1){

            result += i

        }

        console.log(result)

    </script>

89f3980d34ee4be48fd551e88b3b9410.png

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LCC920@

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值