Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月16日_JavaScript基础（变量和函数的定义、流程控制和循环以及数据类型转换）
Blogger Information
Blog 38
fans 1
comment 0
visits 28659
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
12月16日_JavaScript基础（变量和函数的定义、流程控制和循环以及数据类型转换）
fkkf467
Original
715 people have browsed it

1. JavaScript 变量

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不推荐）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）
    使用 var 关键词来声明变量： var num; var num = 1; var str = "hello";
  1.     var str = 'hello javascript!';
  2.     var x = 5;
  3.     var y = x + 1;
  4.     alert(str);  // 弹窗
  5.     console.log(str);  // 控制台输出
  6.     console.log(y);


2. 函数

  • JavaScript 使用关键字 function 定义函数。
  • 函数可以通过声明定义，也可以是一个表达式。
    1. function myFunction(){
    2.      alert('我是一个函数');
    3.  }
    4.  myFunction();
    1. function myFunction2(a,b) {
    2.      console.log(a+b);
    3.  }
    4.  myFunction2(3,4);
    1.  var m = function () {
    2.      alert('我是匿名函数');
    3.  }
    4.  m();

3. 流程控制

  1.     var score = 85;
  2.     if (score >= 90){
  3.         alert('优秀');
  4.     }else if (score >= 70){
  5.         alert('良好');
  6.     }else if (score >= 60){
  7.         alert('及格');
  8.     }else {
  9.         alert('不及格');
  10.     }

  1.     var score = 65;
  2.     switch (true) {
  3.         case score >= 90:
  4.             console.log('优秀');
  5.             break;
  6.         case score >= 70:
  7.             console.log('良好');
  8.             break;
  9.         case score >= 60:
  10.             console.log('及格');
  11.             break;
  12.         default:
  13.             console.log('不及格');
  14.     }

  1.     function fun(score) {
  2.         if (score >= 90) {
  3.             return alert('优秀');
  4.         }
  5.         if (score >= 70 && score < 90) {
  6.             return alert('良好');
  7.         }
  8.         if (score >= 60 && score < 70) {
  9.             return alert('及格');
  10.         }
  11.         return alert('不及格');
  12.     }
  14.     fun(98);

4. 循环

  1.     for (var i=0;i<10;i++){
  2.         console.log('i='+i);
  3.     }

  1.     var i = 10;
  2.     while (i > 0) {
  3.         i--;
  4.         console.log('i=' + i);
  5.     }

  1.     var i = 10;
  2.     do {
  3.         i--;
  4.         console.log('i的值为：' + i);
  5.     } while (i > 0)


输出九九乘法表 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>九九乘法表</title>
  6. </head>
  7. <body>
  8. <p id="demo"></p>
  9. <script type="text/javascript">
  10.     for (var i = 1; i <= 9; i++) {
  11.         for (var j = 1; j <= i; j++) {
  12.             document.getElementById("demo").innerHTML += j + ' * ' + i + ' = ' + i * j + ' ';
  13.         }
  14.         document.getElementById("demo").innerHTML += '<br>';
  15.     }
  16. </script>
  17. </body>
  18. </html>

5. 数据类型转换

parseInt() 函数

parseInt() 函数可解析一个字符串，并返回一个整数。
parseInt(string, radix)

  • string:必需。要被解析的字符串
  • radix:可选。表示要解析的数字的基数

isNaN() 函数

  • isNaN() 函数用于检查其参数是否是非数字值。
  • 如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。
  • isNaN(value)
  • value：必需。要检测的值
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>确认年龄</title>
  6. </head>
  7. <body>
  8. <input type="text" id="age" value="" placeholder="请输入您的年龄">
  9. <button onclick="is_sex()">提交</button>
  10. <script type="text/javascript">
  11.     function is_sex() {
  12.         var age = document.getElementById('age').value;
  13.         age = parseInt(age);  // 将字符串转为整数
  14.         if (isNaN(age)) {  // 判断是否是非数字值
  15.             return alert("非法输入!!!");
  16.         }
  17.         if (age <= 0 || age > 120) {
  18.             return alert("请确认您的年龄!");
  19.         }
  20.         alert("您的年龄为：" + age);
  21.     }
  22. </script>
  23. </body>
  24. </html>

6. 总结

学会了JavaScript声明变量和函数、流程控制和循环以及parseInt() 和 isNaN() 函数的基本使用。

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post