JavaScript学习Day001

最新推荐文章于 2024-04-18 21:21:58 发布

放在糖果旁的是我很想回忆的甜

最新推荐文章于 2024-04-18 21:21:58 发布

阅读量294

点赞数 4

分类专栏： javaScript 文章标签： javascript 学习前端马力

本文链接：https://blog.csdn.net/qihaojinqiuma/article/details/126852940

版权

javaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

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">
    <title>Document</title>
</head>
<body>
    <!-- JS代码可以再标签中通过事件属性来触发JS代码的执行
    在某个标签 -->
    <p onclick="alert('123')">点击</p>
</body>
</html>

内部

<script>
    var pEles = document.getElementsByTagName("p");
    pEles[0].addEventListener("click",function(){
        this.style.color="red";
    })
</script>

外部

//等待页面加载完毕之后执行
window.onload=function(){
//获取p标签
var pEle=document.querySelector('p');
//给获取的p标签绑定点击
pEle.onclick = function (e) {
    this.style.fontSize = "40px";
    this.style.color = "#f00";
}
}

<!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>Document</title>
    <script src="js/myJavaScript.js"></script>
</head>
<body>
    <p>点击变大</p>
</body>
</html>

js变量

js中所有的变量声明都是用var

变量的声明

先声明变量，再赋值

var num1;
var result;

num1=10;
result='dasd'

变量声明和赋值一起写

var result2=true;
console.log(result2)

var result2=true;
console.log(result2)

不声明变量直接赋值,这种方式容易出现问题，轻易不要使用

result3='hello java'
console.log(result3)

result3='hello java'
console.log(result3)

操作数据：通过操作变量来操作数据

doucument.write():将内容输出再页面中
console.log()将内容输出在控制台，用于调试

js数据类型

数据类型包含

Primitive值类型(基本类型)

字符串String
       数字Number
       布尔Boolean
       空Null
       未定义Undefined
       Symbol

Object引用数据类型(对象类型)

对象Object
       数组Array
       函数Function
       正则RegExp
       日期

通过typeof查询数据类型

运算符

赋值运算符

算数运算符

+、-、*、/、%、++、--、+=、-=、*=、/=、%=

关系运算符

>、<、==、===、<=、>=、!=关系运算符的返回值是布尔类型

==与===(恒等于)的区别

==比较内容，不比较数据类型
===不仅比较内容还比较数据类型

逻辑运算符

&、&&、|、||

&&和&的区别

&是先把两边的转换成0或者1，在进行比较，最后输出出来的是0或者1
&&两边的值为true或false，最后输出出来的也是true或者false

||和|的区别

|是先把两边的值转换成0或者1，再进行比较，最后输出出来的是0或者1
||两边的值为true或者false，最后输出出来的是true或者false

console.log(true|false)
console.log(true||false)

关系运算符

条件？表达式1：表达式2

键盘输入数据

prompt()

从页面输出中输入的数据，类型是String类型，如果不输入数据，最后的到的内容是空，类型也是String类型，如果直接点击取消最后得到的类型是Object

弹出输入框
       var age=prompt();
   弹出输入框，输入框带提示
       var age = prompt("请输入您的年龄：");
   弹出输入框，输入框带提示、默认值
       var age = prompt("请输入您的年龄：",12)

选择结构

if选择结构

单分支if选择结构

var jsScore=90
if(jsScore>80){
console.log("奖励100元")
}

双分支if选择结构

var jsScore=9;
if(jsScore>80){
console.log("奖励100元");
}else{
 console.log("无奖励")
}

多分支选择结构

        var Score= prompt("请输入你的成绩");
        if(Score>90){
            console.log("优秀");
        }else if(Score>80){
            console.log("良好");
        }else if(Score>60){
            console.log("中等");
        }else{
            console.log("差")
        }
        console.log("程序执行完毕");

嵌套if选择结构

        var runScore=prompt("请输入您的百米赛跑成绩")
        if(runScore<10){
            console.log("恭喜您进入决赛")
            var gender=prompt("请输入您的性别")
            if(gender=="男"){
                console.log("进入男子决赛组");
            }else if(gedner="女"){
                console.log("进入女子决赛组");
            }else{
                console.log("性别输入有误")
            }
        }else{
            console.log("很遗憾不能进入决赛")
        }

switch选择结构

switch选择结构
switch选择结构的穿透现象


<body>
    <script>
        var month = 11;
        switch (month) {
            case 12:
            case 1:
            case 2:
                console.log("冬季")
                break;
            case 3:
            case 4:
            case 5:
                console.log("春季")
                break;
            case 6:
            case 7:
            case 8:
                console.log("夏季")
                break;
            case 9:
            case 10:
            case 11:
                console.log("秋季")
                break;
        }
    </script>
</body>
</html>

js中日期时间的获取

js中的时间日期获取
   var date = new Date();
console.log(date)
   获取年
       var year = date.getFullYear();
   获取月
       var month = date.getMonth()
console.log(month+1)
   获取日
       当月的第几天
           console.log(date.getDate())
       这个星期的第几天
           console.log(date.getDay())