0


JavaScript的简易概念及基本语法

一.JavaScript简单介绍

1.JavaScript 简称 JS,是一门弱类型的语言。主要用于给HTML页面上添加动态效果与交互效果。

2.JavaScript 的组成(ECMAScript、DOM、BOM)

ECMAScript:JavaScript的基本语法

DOM:文档对象模型

BOM:浏览器对象模型


二.JavaScript的特点

1.JavaScript是一门弱类型的语言,对代码的规范性要求不是很高,使用起来较为灵活。

2.JavaScript的代码不需要编译就能执行。

3.JavaScript是基于客户端的语言,运行在客户端的浏览器上。

4.可在多平台运行 如(Windos,Linux,Max,ios,Android等)。


三.JavaScript的基本使用

1.如何使用JS?

1.使用script标签,一般而言都是放在head标签中

2.编写js文件,通过script标签中的src属性引入

3.可以在同一个界面中引入多个js文件,执行顺序与引入顺序一致


2.JS的调试

浏览器 : 控制台(Console) 右键进入检查 点击控制台进行查看

Console:

    .log() 打印信息

    .dir() 打印一个对象的所有属性和方法

3.变量与数据类型:

js中的所有变量都由var来定义,并且变量的值与类型都可以发生改变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript01</title>
    </head>
    <body>
        <h1>JavaScript01</h1>
        <script type="text/javascript">
/*             编写代码必须在 script 标签中*/    
            console.log('hello world')
            console.log('你好 世界')
            
            /* 定义变量 :js中的所有变量都由var来定义*/
            var i=10;
            var f=1.23;
            
            /* 定义字符串变量 */
            var s='1';
            var s2='数字的值:'+f+'hello world';
            var s3=`发大水发生¥{f}激发事件发生`;//反引号,用反引号可以直接用美元符号来连接字符串与数字
            var s4='a';
     </script>
    </body>
</html>

使用 typeof 可以查看数据类型(number,string,boolean)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript01</title>
    </head>
    <body>
        <h1>JavaScript01</h1>
        <script type="text/javascript">

            var s4='a';
            
            //查看类型
            console.log(s4/i);
            //NaN not a number 不是一个数字
            console.log(1/0);
            //Infinity 无穷大
            console.log(-Infinity)
            //转换 在这里分整数小数
            //Integer.parseInt()
            console.log(parseInt("1.23"));
            console.log(parseFloat("1.23"));
            //答案
            //在所有编程语言中,基本上小数的运算都不靠谱
            console.log(0.6-0.2);
            //小数的取几位
            console.log((1.234).toFixed(2));//取小数点后两位

            //boolean
            var f1=true;
            var f2=false;
            console.log(f1||f2)//true 或者,只要有一真,则都为真
            console.log(f1&&f2)//false 并且,只要有一假,都为假
            console.log(!f1)//false f1是true !f1 就是不为true
            console.log(!!-1)// !! 将这个变量变成boolean
            
            //什么情况下会得到false
            //字符串:"" 为空字符时;
            //数字:0
            // null 也为 false;
            //underfined 未定义 也为false;
            //NaN 不是数字类型 也为false;
            
            //短路
            console.log(""||0)//0 也可理解为false
            console.log(1||0)//1 ||只要有一个为true 就会停止
            console.log("2"||"1"||1)// 2
            
            console.log("2"&&"1"&&1)//1 &&只要有一个为false 就会停止
            console.log("2"&&0&&1)//0 0就是代表false
            
     </script>
    </body>
</html>

4.JS中的弹框

alert :提示框

confirm :询问框

prompt :输入框


5.基本语句结构

if结构


switch结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript01</title>
    </head>
    <body>
        <h1>JavaScript01</h1>
        <script type="text/javascript">
    
            var f6=prompt("请输入星期几");//接收到的是一个String类型,需要进行类型的转换
            if(!isNaN(parseInt(f6))){
                switch(parseInt(f6)){
                    case 1:
                        console.log("周一")
                        break
                    case 2:
                        console.log("周二")
                        break
                    case 3:
                        console.log("周三")
                        break
                    default:
                        console.log("xxx")
                }
            }
     </script>
    </body>
</html>

while结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript01</title>
    </head>
    <body>
        <h1>JavaScript01</h1>
        <script type="text/javascript">
    //while 循环
            var j=1
            while(j<10){
                j++;
            }
            
            //死循环
            while(true){
                console.log("死循环")
            }
     </script>
    </body>
</html>

for结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript01</title>
    </head>
    <body>
        <h1>JavaScript01</h1>
        <script type="text/javascript">
        //for循环
            var count=prompt("请输入次数")
            for(var i=0;i<count;i++){
                //在页面中进行html输出
                document.write("<font color='red'>哈哈哈<font><br>")
            }
     </script>
    </body>
</html>

6.基本语法

1.JavaScript的语法和Java语言类似,每个语句以;结束,语句块用{}

2.JavaScript并不强制要求在每个语句的结尾加;

3.// 行注释

4./* */ 块注释

5.JavaScript严格区分大小写


今天的JS分享就到此为止,精彩下期继续。


本文转载自: https://blog.csdn.net/weixin_65474399/article/details/123146425
版权归原作者 xiongᥫᩣ 所有, 如有侵权,请联系我们删除。

“JavaScript的简易概念及基本语法”的评论:

还没有评论