前段JavaScript的基本介绍和使用_前段js使用的是-优快云博客

本文链接：https://blog.youkuaiyun.com/LeFran/article/details/118069640

本文介绍了前端开发的三大核心技术——HTML、CSS和JavaScript。其中，JavaScript作为关键部分，负责实现网页的交互功能，增强用户体验。JavaScript是一种在浏览器端运行的脚本语言，为网页带来活力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端开发三大块
1、HTML：负责网页结构

2、CSS：负责网页样式

3、JavaScript：负责网页行为，比如:网页与用户的交互效果

JavaScript的定义:
JavaScript是运行在浏览器端的脚本语言, 是由浏览器解释执行的, 简称js.

它能够让网页和用户有交互功能, 增加良好的用户体验效果。

在这里插入图片描述

<!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">
    <!-- 外链式的导入 -->
    <!-- <script src="./wai.js"></script> -->
    <title>js的使用</title>
</head>
<body>
    <!-- 行内使用 -->
    <!-- onclick 触发点击事件 alert 事件触发后执行弹窗操作 -->
    <a href="#" onclick="alert('点尼玛呢')">点击</a>
    <!-- 鼠标覆盖 hover -->
    <p hover='alert()'>文本信息 </p>
    <!-- 输入框失去焦点 blur -->
    <input type="text" blur='alert("asd")'>

    <script>
        // alert('内嵌式')

        //使用变量
        // 整形
        var iNum = 10
        // 字符串类型
        var b = 'hello js'
        // 数组类型
        var c = [1,2,3]
        // 无类型
        var d
        // 空
        var e = null
        // JSON对象
        var f = {'name' : 'python'}
        // 布尔类型
        var d = false

        // alert(iNum)
        // alert(b)
        // alert(c)
        // alert(d)
        // alert(e)
        // alert(f)
        // alert(d)


        // 函数的使用 function函数定义关键词 函数名称 (参数)括号内可以定义接受参数的变量
        // function add(num1,num2){
        //     // 编写业务逻辑
        //     alert('add函数')
        //     console.log(num1+num2)
        // }
        // // 函数调用 如果有接受参数,需要传递对应的参数数据
        // add(10,22)

        // 变量的作用域范围
        // function mydata(){
        //     // 在函数内部1使用外部定义的变量
        //     // alert(iNum)
        //     var mydatanum = 20
        //     alert(iNum+mydatanum)

        //     // 结果返回
        //     return mydatanum
        // }

        // 定义变量接受函数的返回结果
        // var mynum = mydata()
        // alert(iNum+mynum)


        // 条件语句判断
        function myfunc(data){
            // if(data == 12){
            //     alert('条件成立')
            // }else{
            //     alert('条件不成立')
            // }
        
        
            // if(data === 12){
            //     alert('三个等号 --条件成立')
            // }else{
            //     alert('三个等号 --条件不成立')
            // }
            // 多个条件判断
            // if (data === 'python'){
            //     alert('名字是python')
            // }
            // else if(data === 'itcast'){
            //     alert('名字是itcast')
            // }
            // else {
            //     alert('名字不正确')
            // }
            // 不等条件
            // if (data !== 12){
            //     alert('数据不相等')
            // }
            // else(
            //     alert('数据相等')
            // ) 

            // 与或非判断. 当有多个条件时,进行与(所有条件都成立 &&)或(有一个条件满足就可以执行||)非(取反!)判断
            // var a =10
            // var b =33
            // if(a>11 && b>10){
            //     alert('条件成立')
            // }
            // else {
            //     alert('条件不成立')
            // }
            // if(a>11 || b>10){
            //     alert('条件成立')
            // }
            // else {
            //     alert('条件不成立')
            // }
            // if(!(a>20)){
            //     alert('条件成立')
            // }
            // else{alert('条件不成立')}
            
            // 取反使用场景
            // 需求: 判断数据为空则输出不能为空的提示信息

            // var c =null
            // var d =false
            // var e =0
            // var f
            // if(!c){
            //     alert('数据不能为空')
            // }
            
            // if(!d){
            //     alert('数据为false')
            // }
            
            // if(!e){
            //     alert('0也可以作为false')
            // }
            // if(!f){
            //     alert('未赋值的数据')
            // }
                
        }
        // myfunc('12')

        // 数组操作
        function mylist(){
            // 定义数组
            // var datalist = ['a','b','c','d']
            // // 取值 下标取值
            // alert(datalist[1])
            // // 计算长度
            // alert(datalist.length)
            // // 写入数据
            // datalist.push('zed')
            // alert(datalist)

            // // 弹出数据
            // // 从数组的最后一位进行取值,取值后从数据从数组中删除
            // datalist.pop()
            // alert(datalist)

            // 指定位置删除和写入数据
            // 第一个指定删除的下标位置,第二个指定删除的数量,第三个是删除后需要补充的数据,有则写 没有则不写
            // datalist.splice(0,1,'jinx')
            // alert(datalist)
            // // 指定位置写入数据时只需要将第二个删除数量写为0
            // datalist.splice(0,1,'zed')
            // alert(datalist)


        }

        // mylist()
        // 循环
        function xunhuan(){
            // for循环
            namelist = ['zhangsan','lisi','wangwu']
            // var index = 0 第一个参数指定初始的循环次数
            // 第二个参数指定循环结束条件
            // 第三个 参数循环次数累加
            // for(var index = 0; index < namelist.length;index++){
            //     alert(namelist[index])
            // }

            // while 循环
            // var index = 0
            // while(index<namelist.length){
            //     alert(namelist[index])
                

            //     if(namelist[index] === 'lisi'){
            //         break
            //     }
            //     index++
            // }
        }
        // xunhuan()

        // 字符串
        function strfunc(){
            var iNum = 10
            var sStr = 'abc'
            var sData ='python'

            alert(iNum+sStr)
            alert(typeof(iNum+sStr))
            // 一般应用于网址拼接
            var host = 'http://www.baidu.com'
            // 注册
            var path = '/register'
            var url = host+path

        }
        strfunc()
    


    </script>
</body>
</html>