Java教程

JavaScript学习记录（一）

本文主要是介绍JavaScript学习记录（一），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JavaScript学习记录（一）

  • JS的3种书写位置：
    • 行内：
    • 内嵌：
    • 外部：
  • vscode注释快捷键
  • JS的输入输出
  • 变量
  • 数据类型
    • 简单数据类型
    • 检测变量的数据类型 typeof
    • 数据类型转换
      • 转换为字符串
      • 转换为数字型
      • 转换为布尔型
  • 运算符

JS的3种书写位置：

行内：

<html >
<body>
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>
</html>

内嵌：

<html>
<head>
       <script>
        alert('沙漠骆驼');
    </script>
</head>
</html>

外部：

<html >
<head>
    <script src="my.js"></script>
</head>
</html>

js文件中：

alert('如果我是DJ，你还爱我吗')

vscode注释快捷键

1、单行注释，使用“Ctrl + /”；
2、块注释，使用“Alt+Shift+A”。

快捷键可在设置中修改

JS的输入输出

<html>
<head>
    <script>
        //这是一个输入框
        prompt('请输入你的年龄：');
        //alert 弹出警示框 输出的 展示给用户的
        alert('计算的结果是：');
        //console 控制台输出 给程序员测试用的
        console.log('我是给程序员看的QAQ');
    </script>
</head>
</html>

在这里插入图片描述
点确定：
在这里插入图片描述
点确定，打开检查（F12）：
在这里插入图片描述

变量

<script>
    var age;
    age = 22,myname = '神里凌华的狗';
    console.log(age);
    console.log(myname);
</script>

在这里插入图片描述

    <script>
        var myname = prompt('你的名字是：');
        alert(myname+'是要当海贼王的男人！');
    </script>

在这里插入图片描述
在这里插入图片描述
JS当中变量可以不定义直接赋值，但会变成全局变量：

<script>
        p = 3;
        console.log(p);
</script>

在这里插入图片描述

数据类型

JS的数据类型，是在程序运行过程中，根据“=”后面的类型自动确定。并且可以改变：

<script>
	var x = 10;//x是数字型
	x = 'kalise';//x是字符串型
</script>

简单数据类型

数字型
进制表示：

<script>
        //在数字前加'0'表示八进制
        var num1 = 010;
        console.log(num1);
        //在数字前加'0x'表示十六进制
        var num2 = 0xa;
        console.log(num2);
</script>

在这里插入图片描述
infinity无穷大；NaN，（not a number）,非数字值；
函数isNaN()：
isNaN() 函数用于检查其参数是否是非数字值。
如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。
字符串型
'kalise’和"kalise"，单引号和双引号都可以；注意嵌套使用；

<script>
	var str = '"天降"又胜"青梅"';
</script>

转义符：’'
\n 换行；\ 斜杠；’ 单引号；" 双引号；\t 缩进tab；\b 空格blank；
检测获取字符串的长度：length

<script>
	var str = 'My name is kalise';
	console.log(str.length);//17
</script>

字符串的拼接：‘+’

<script>
	var age = 22;
	console.log('kalise'+true);//kalisetrue
	console.log('12'+12);//1212
	console.log('kalise'+' '+'is OK');//kalise is OK
	console.log('kalise今年'+age+'岁了');//kalise今年22岁了
</script>

布尔型boolean
true当1；false当0
undefined和null
如果一个变量声明未赋值，就是undefined未定义数据类型

<script>
	//undefined
	var variable = undefined;
	console.log('kalise' + variable);//kaliseundefined
	console.log(variable + 1);//NaN
	//null 空值
	var space = null;
	console.log('kalise' + space);//kalisenull
	console.log(space + 1);//1
</script>

检测变量的数据类型 typeof

<script>
	var num = 10;
	console.log(typeof num);//number
	
	var str = 'kalise';
	console.log(typeof str);//string
	
	var flag = true;
	console.log(typeof flag) ;//boolean

	var vari = undefined;
	console.log(typeof vari);//undefined
	
	var timer = null;
	console.log(typeof timer);//object
</script>

prompt 取过来的值是 字符型的

<script>
	var age = prompt('请输入你的年龄:');
	console.log(typeof age);//string
</script>

还可以通过浏览器的控制台输出结果判断数据类型：
圆珠笔色的是num；黑色的是字符型；墨水蓝色的是布尔型；undefined和null是浅灰色的；

数据类型转换

数字 + ‘字符串’ = ‘字符串’；
数字 - ‘字符串’ = 数字；
数字 * ‘字符串’ = 数字；
数字 / ‘字符串’ = 数字；

转换为字符串

1.toString(); 2.String()强制转换; 3.+‘字符串’

<script>
        var num = 10;
        console.log(num.toString());
        console.log(String(num));
        console.log(num+'');
        console.log(num);
</script>

转换为数字型

1.parseInt()和parseFloat() 2.Number(); 3.隐式转换

    <script>
        //parseInt(变量)只能得到整数；parseFloat(变量)可以得到浮点型
        console.log(parseInt('3.14'));//3  (数字型)
        console.log(parseInt('120px'));//120  会去掉单位px
        console.log(parseInt('rem120'));//NaN 开头便是字符，不能转换
        console.log(parseFloat('3.14'));//3.14  (数字型)
        console.log(parseFloat('120px'));//120  同上
        console.log(parseFloat('rem120'));//NaN 同上
        //Number(变量)
        console.log(Number('123'));
        //运用-*/隐式转换(不能+)
        console.log('123'-0);
    </script>

在这里插入图片描述
做两个简单的案例：计算年龄 和 简单加法器
计算年龄：

    <script>
        var year = prompt('请输入你的年龄：');
        var age = 2022 - year;
        alert('你今年'+ age +'岁了');
    </script>

简单加法器：

    <script>
        var sum = 0;
        var num = prompt('请输入加数：（直接回车结束计算）');
        while(num != ''){
            num = num - 0;
            if(isNaN(num)){
                alert('请正确输入！')
            }
            else{
            sum=num+sum;
            }
            num = prompt('请输入加数：（直接回车结束计算）');
        }
        alert("计算结果是:" + sum ) ;
    </script>

转换为布尔型

Boolean()函数
1.空字符（’’）,0,NaN,null,undefined 会转化为false;
2.其他都会转化为true

拓展阅读：
解释型语言：比如js，通过解释器直接执行
编译型语言：比如Java，通过编译器生成中间代码文件，然后执行
标识（zhi）符：
关键字：
保留字：
课后作业：
依次询问并获取用户的姓名、年龄、性别，并打印用户信息：

    <script>
        var stu = {
            name : prompt('请输入你的姓名：'),
            age : prompt('请输入你的年龄：'),
            sex : prompt('请输入你的性别：')
        };
        alert('你的姓名是'+stu.name+'\n你的年龄是'+stu.age+'岁\n'+'你的性别是'+stu.sex); 
    </script>

运算符

1.算数运算符：+，-，*，/ 以及：（假设y=5）

运算符例子x运算结果y运算结果
% x = y%21y=5
++x = y++ +166
x = ++y +176
--x = y-- +164
x = --y +154
2.赋值运算符：=，+=，-=，*=，/=以及 %= (以/=和%=为例) 假定x=10，y=5：
运算符例子等同于运算结果
/=x/=yx=x/yx=2
%=x%=yx=x%yx=0

3.比较运算符：==，!=，>，<，>=，<= 以及：（假设x=5）

运算符描述比较返回值
===绝对等于（值和类型均相等）x==="5"false
x===5ture
!==不绝对等于（值和类型有一个不相等，或两个都不相等）x!=="5"ture
x!==5false

4.逻辑运算符：&&，||，!

优先级运算符顺序
1小括号( )
2一元运算符++ ， – ， !
3算法运算符先 * ， /， % 后 + ， -
4关系运算符> , >= , < , <=
5相等运算符== , != , === , !==
6逻辑运算符先&&后||
7赋值运算符=
8逗号运算符,

浮点数在算数运算中会有问题，我们不能直接拿着浮点数来进行比较是否相等，如下：

    <script>
	    console.log(0.1 + 0.2);//0.30000000000000004
	    console.log(0.07*100);//7.000000000000001
	    var num = 0.1 + 0.2;
	    console.log(num==0.3);//false
    </script>
这篇关于JavaScript学习记录（一）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航