30min带你入门JavaScript

一口一个大饼

已于 2023-03-21 10:50:27 修改

阅读量48

点赞数

文章标签： javascript 前端 html

于 2023-03-14 15:53:40 首次发布

本文链接：https://blog.csdn.net/weixin_58480821/article/details/129519052

版权

学习前准备

1.下载安装Visual Studio Code
直接在浏览器官网上下载即可，注意小心下载到盗版。安装很简单，一直next就行
安装包链接: https://code.visualstudio.com/
2.新建一个html文件，在此便不再赘述不会的可以看这篇回答：Visual Studio Code如何新建一个文件：https://jingyan.baidu.com/article/b7001fe175bf944f7382dd59.html
3.记得打开自动保存：文件->自动保存
4.运行html文件：选中文件右键选择在文件资源管理器中显示，然后双击打开生成的html文件即可
运行html文件操作

一、JS的基本书写方式

1.行内式：

JS代码直接嵌入到html元素内部

<input type="button" value= "这里写页面显示的内容" onclick ="alert('这里写弹框中内容')">

运行结果：

2.内嵌式：

写在script标签中

<input type="button" value= "这里写页面显示的内容" onclick ="alert('这里写弹框中内容')">
    <script>
        alert('内嵌式写法')
    </script>

运行结果
点击确定后再展示行内式结果

3.外部式：

写在外部单独的js文件中

<script scr ="test.js"></script>

test.js内容

alert("输出内容");

此时script标签内部不能写东西了，必须空着（写了也不执行）

4.输入输出

输入：弹出一个输入框
prompt("请输入内容");
输出：弹出一个警示框
alert("我是输出的结果");
控制台输出：仅供程序员看
console.log("输出程序员看到的结果");
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS博客测试</title>
</head>
<body>
    <script>
        prompt("请输入内容");
        alert("我是输出的结果");
        console.log("输出程序员看到的结果");
    </script>
</body>
</html>

运行结果：

二、JS基础语法

1.变量

1.1创建变量

<body>
    <script>
        let t1 = 10;
        let t2 = 'huahua';
        let t3 = true;
        let t4 = null; 
        console.log(t1);
        console.log(t2);
        console.log(t3);
        console.log(t4);
    </script>
</body>

由上可见：JS在定义变量时不分int，double，string等类型，所有数字类型都为number
比起var更建议使用let来创建变量，因为let更接近C++,Java等主流语法，还可以防止出现数据越界和重复定义问题

1.2理解动态变量

1.2.1JS中的数据类型：

（1）number：数字类型（不区分整数小数）
（2）boolean：true真；false：假
（3）string：字符串类型
（4）undefined：未定义的值，只有唯一的值undefined
（5）null：表示空值

1.2.2动态变量

<script>
        
        let t1 = 10;
        console.log(t1);
        t1 = 'ajhfjd';
        console.log(t1);
        t1 = true;
        console.log(t1);
        t1 = null;
        console.log(t1);
    </script>

控制台输出结果：

2.运算符

运算符基本和Java等主流语言相同
但要注意：== 和 ===

==：比较相等（会进行隐式比较）
===：比较相等（不会进行隐式比较）

隐式比较：在比较时会自动将其转换类型
因为JS示弱类型语言，所以在比较时会进行隐式类型转换（弱类型支持隐式类型转换）
隐式比较举例：

<script>
        
        let t1 = 10;
        t2 = '10';
        console.log(t1 == t2);
        console.log(t1 === t2);
        
    </script>

输出结果： true \ false

结论：
t1为number类型的10，t2为string类型的10
第一次比较用的== ，输出true，可以看出进行了隐式类型转换
第二次比较用的===，输出false，可以看出没有进行隐式类型转换

三、函数

1.创建函数格式

function 函数名(形参列表){
            return 返回值;
        }

2.参数调用

1.调用时若实参比形参多，则多出的实参不参与运算，若想让其参与运算则要在函数内部写入一些语句实现
2.调用时若实参比形参少，则多多出的形参值为undefined

JS函数举例：

<body>
    <script>
        
        function add(){
            let result = 0;
            for(let elem of arguments){
                result += elem;
            }
            return result;
        }
        console.log(add(10));
        console.log(add(10,20));
        console.log(add(10,20,30));
        console.log(add(10,20,30,40));
    </script>
</body>

运行结果：

四、创建对象

<body>
    <script>
    let test1 = {};
    let test2 = {
        name : '吴磊',
        height : 185,
        weight : 60,
        say : function(i){
            while(i>0){
                console.log("你好，我是演员吴磊");
                i--;
            }
            
        }
    };
    console.log(test2.name);
    console.log(test2.height);
    console.log(test2.weight);
    test2.say(5);
    </script>
</body>

运行结果：

一口一个大饼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
30min带你入门JavaScript

由上可见：JS在定义变量时不分int，double，string等类型，所有数字类型都为number。4.运行html文件：选中文件右键选择在文件资源管理器中显示，然后双击打开生成的html文件即可。因为JS示弱类型语言，所以在比较时会进行隐式类型转换（弱类型支持隐式类型转换）（4）undefined：未定义的值，只有唯一的值undefined。第一次比较用的== ，输出true，可以看出进行了隐式类型转换。第二次比较用的===，输出false，可以看出没有进行隐式类型转换。
复制链接

扫一扫