JavaScript基础之----1

1.弹出框法则

在一个创建好的HTML页面上

<body>

# 内嵌式JS
<script> alert('我是只小白鼠') </script>

# 行内式JS交互
<input type="button" value="唐伯虎" οnclick="alert('啊  是秋香')">

# 外部引入JS文件, 在外部文件写入JS代码
<script src='my.js' ></script>

</body>


访问此页面,会有弹出框显示
第一个是页面弹出框
第二个是按钮弹出框
第三个是外部文件引入弹出框

2.弹出框输入

<body>
    <script>
        # 这是一个输入框
        prompt('请输入内容');
    </script>

</body>

浏览器弹出输入框     这里的 # 代表注释,执行时请去掉  注意末尾加分号
之后添加 alert 输出框可跟随弹出

在这里插入图片描述

3.程序员调试

<body>
    <script>
        console.log('我是程序员看到的');
    </script>
</body>


在F12开发者模式Console 可以看到内容

在这里插入图片描述

4.变量

var myname = 18;
使用 var 开头赋值

var my_love = prompt('请输入爱人名称')
alert (my_love)
变量赋值后存储使用

var age = 20,
    name = 'li',
    love = 'lala';

一次声明多个变量

console.log(Number.MIN_VALUE)  最大值
console.log(Number.MAX_VALUE)  最小值
console.log(Number.MAX_VALUE * 2)  无穷大   Infinity
isNaN(12)    判断是否为非数字  


此处代码都在 script 语句中 

5.字符串拼接

只要有字符串和其他类型相拼接,最终的结果是字符串类型

console.log('12'+12)  ---  

prompt('请输入')  获得输入的数字默认是字符串型

parseInt()       字符串转化整形,强制取整
Number()         字符串转整形
parseFloat()     转化浮点型

6.隐式转换

console.log('120' - '0')
输出为数字 120

- * / 等运算符都会转化为数字
字符串加法执行拼接法则  
布尔类型判断

 <script>
    console.log(Boolean(''))
    console.log(Boolean(0))            结果都为 false
    console.log(Boolean(NaN))
    console.log(Boolean(null))
    console.log(Boolean(undefined))
 </script>

布尔值以上五个为 false
其他值只要存在都为 true

7.小测试

<script>
    var age = prompt('你的年龄是');
    var sex = prompt('你的性别是');
    var na = prompt('你的名字是');
    alert ('你的年龄是:' + age  + '\n' + '你的性别是:' + sex + '\n' + '你的名字是:' + na);
</script>


分别输入 1   2    3

在这里插入图片描述

8.前置和后置递增运算符

单独使用时二者相同
a = a + 1    ---a++   ++a


放在运算式中
var a = 1
console.log(++a + 1)      输出 3   先自加再运算
console.log(a++ + 1)      输出 2   先运算后自加  运算结束后 a 是 2
注意 a++ + ++a   是 4

==    会自动将字符串转换为数值型
console.log(10 == '10')     true
===   返回 false  要求类型和数值均相等


逻辑与  1真2决定   1假1决定     逻辑或相反  

9. if 语句

    if (判断条件) {
           如果条件为真则执行这些内容
    }

if–else 基本实现

 <script>
    var age = prompt('你的年龄')
    if (age >= 18) {
        alert ('我要带你上王者')
    }
    else {
        alert ('你太菜')
    }
 </script>

二选一
if (第一个判断条件) {
    对应语句
}
else if (第二个判断) {
    对应语句
}
else if (第三个) {
    对应
}
else  { 
    对应语句
}


多分支语句,多选一

10.while循环

恋爱询问

<script>
    var message = prompt('你爱我吗');
    while (message != '我爱你') {
        message = prompt('你爱我吗');
    }
    var mess = prompt('你真的爱我吗')
    while (mess != '我真的爱你') {
        mess = prompt('你真的爱我吗')
    }
    alert ('我也爱你啊');
</script>


死循环,直到对方答应询问结束
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章