JavaScript (二) -- 基础语法

目录

1.  输入输出语句

1.1  prompt()（对话框） ：

1.2  alert() （弹出框）

1.3  console.log()（控制台输出）

1.4  document.write() （网页输出）

2.  变量与常量

3.  原始数据类型

4.  typeof（）方法

5.  运算符

5.1  算数运算符

5.2  比较运算符

5.3  逻辑运算符

6.  流程控制语句（if、swich语句）

6.1  if语句

6.2  switch语句

7.  循环语句

7.1  for循环语句

7.2  while循环

8.  数组（重点记忆）

9.  函数（重点记忆） 

1.  输入输出语句

1.1  prompt()（对话框） ：

JavaScript中的prompt()函数用于向用户显示一个对话框，提示用户输入一些信息。该函数有一个参数，表示要显示给用户的提示信息。

var name = prompt("请输入您的姓名:");

        上述代码中，使用prompt()函数显示一个对话框，提示用户输入姓名，并将用户输入的值赋值给变量name。用户输入的内容以字符串的形式返回，如果用户点击了"取消"按钮，则会返回null。

1.2  alert() （弹出框）

可以使用alert()函数向用户显示一个窗口，弹出框通常用来显示提示信息。

alert("Hello world!");

1.3  console.log()（控制台输出）

控制台输出是开发者常用的一种输出方式，可以在浏览器的开发者工具中查看输出结果。

console.log("Hello world!");

1.4  document.write() （网页输出）

可以在网页中输出信息。

document.write("Hello world!");

2.  变量与常量

JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型。

• 定义局部变量： var 变量名 = 值;

//1.定义局部变量
var name = "张三";
var age = 23;
document.write(name + "," + age +"<br>");

• 定义全局变量： 变量名 = 值;

//2.定义全局变量
{
    var l1 = "aa";
    l2 = "bb";
}
//document.write(l1);
document.write(l2 + "<br>");

• 定义常量 const： 常量名 = 值;

//3.定义常量
const PI = 3.1415926;
//PI = 3.15;
document.write(PI);

3.  原始数据类型

 小拓展：

在JavaScript中，undefined是一种特殊的值，用于表示变量未定义或未赋值。如果一个变量没有被显式赋值，那么它的值就是undefined。例如：

var x;
console.log(x); // 输出undefined

在上述代码中，变量x没有赋值，因此它的值是undefined。

另外，可以使用typeof操作符来检查一个变量的数据类型，例如：

var x;
console.log(typeof x); // 输出"undefined"

最后，需要注意的是，在使用变量之前，应该先对它进行判断，避免出现未定义的情况，例如：

if (typeof x !== "undefined") {
  // 变量已定义，可以使用
  console.log(x);
} else {
  // 变量未定义，无法使用
  console.log("Variable is undefined");
}

4.  typeof（）方法

在JavaScript中，typeof是一个操作符，用于判断一个值的数据类型。它可以用于任何值，包括变量、函数、字符串、数值、布尔值、对象和undefined等。

<script>
		var age = 18;
		document.write( typeof(age) );//number
		
		document.write("<br/>")
		
		var name = "金刚芭比";
		document.write( typeof(name) );//string
		
		document.write("<br/>")
		
		var isMan = true;
		document.write( typeof(isMan) );//boolean
		
		document.write("<br/>")
		
		var a = null;
		document.write( typeof(a) );//object ,null的类型解析出来是object,这时js遗留的远古BUG
		
		document.write("<br/>")
		
		var b;
		document.write( typeof(b) );//undefined

		document.write("<br/>")

		var fun = function(a,b) {
		    alert(a+b);
		}
		document.write( typeof(fun));//function

		document.write("<br/>")

		var arr = [1,2,3];
		document.write( typeof(arr));//object
		
	</script>

5.  运算符

5.1  算数运算符

算术运算符的特殊使用：

1. 在JS中,如果算数运算符运算的不是number类型,JS会自动将元素往number进行转换。
2. boolean: true:1  false:0。
3. string: 能转为数字的直接转成数字,不能转的就是NaN(不是数字的数字)。

<script>
		// 算术运算符的特殊使用
		//在JS中,如果算数运算符运算的不是number类型,JS会自动将元素往number进行转换
		//boolean: true:1  false:0
		//string: 能转为数字的直接转成数字,不能转的就是NaN(不是数字的数字)
		var s = +true;
		document.write(s+ ":" + typeof(s) );//1:number
		
		document.write("<br/>")
		
		var name = +"叫你一声，你敢答应吗？";
		document.write(name+ ":" +  typeof(name) );//NaN:string
		
		document.write("<br/>")
		
		var age = +"123";
		document.write(age+ ":" +  typeof(age) );//123:number
	</script>

 小拓展：

        "NaN"（Not a Number）表示不是数字（Not a Number），通常在JavaScript中表示数字类型的操作失败时会返回NaN。NaN是一个特殊的数字值，它不等于任何其他值，包括自身。因此，在JavaScript中，不能使用等于运算符（==）或全等运算符（===）来比较NaN和其他值，这两个运算符都会返回false。

        例如，如果尝试将非数字字符串转换成数字，将返回NaN：

var x = parseInt("hello");
console.log(x); // NaN

        在上述代码中，将字符串"hello"尝试转换成数字，由于该字符串不是数字，所以会返回NaN。

        由于NaN不等于任何值，因此在某些情况下需要检查一个值是否为NaN。可以使用全局的isNaN()函数来检查一个值是否为NaN，例如：

var x = parseInt("hello");
if (isNaN(x)) {
  console.log("Not a number");
} else {
  console.log("Valid number");
}

        在上述代码中，通过调用isNaN()函数来检查变量x是否为NaN，如果是则输出"Not a number"，否则输出"Valid number"。

5.2  比较运算符

        在JavaScript中，"=="和"==="都是用来比较两个值是否相等的运算符，但它们的比较方式有所不同。

        "=="运算符会先进行类型转换，然后再比较两个值是否相等。如果两个值的数据类型不同，JavaScript会自动将它们转换成相同的数据类型，然后再进行比较。

        例如，以下代码中的"123"会被自动转换成数字123，然后再与数字1进行比较：

console.log(123 == "123"); // true

        "==="运算符会直接比较两个值的数据类型和值是否都相等。如果两个值的数据类型不同，或者值不相等，就会返回false，例如：

console.log(123 === "123"); // false

        注：由于"=="运算符会进行类型转换，因此可能会产生一些意想不到的结果。建议在比较两个值时，优先使用"==="运算符，以避免出现错误的结果。

5.3  逻辑运算符

        逻辑运算符运算的应该是boolean类型，不过不是boolean, 那就将其向boolean转化，转化规则如下：

1. number: 0/NaN->false，  其他的全是true
2. string: ""（即空字符串）->false，  其他的全是true
3. null/undefined -> false

<script>
		
		/* 
			逻辑运算符运算的应该是boolean类型
			不过不是boolean, 那就将其向boolean转化
				number: 0/NaN->false  其他的全是true
				string: ""->false  其他的全是true
				null/undefined -> false
		 */
		
		var num = 100;
		document.write(!num) //true => num=true
		
		document.write("<br/>")

		var num = 0;
		document.write(!num) //false => num=false

		document.write("<br/>")

		var num = NaN;
		document.write(!num) //false => num=false

		document.write("<br/>")
		
		var name = "aaa";
		document.write(!name) //true => name=true
		
		document.write("<br/>")

		var name = "";
		document.write(!name) //false => name=false

		document.write("<br/>")
		
		var a = null;
		document.write(!a) //false => a=false
		
		document.write("<br/>")
		
		var b = undefined;
		document.write(!b) //false => b=false
		
	</script>

6.  流程控制语句（if、swich语句）

6.1  if语句

//if语句
var month = 3;
if(month >= 3 && month <= 5) {
    document.write("春季");
}else if(month >= 6 && month <= 8) {
    document.write("夏季");
}else if(month >= 9 && month <= 11) {
    document.write("秋季");
}else if(month == 12 || month == 1 || month == 2) {
    document.write("冬季");
}else {
    document.write("月份有误");
}

document.write("<br>");

6.2  switch语句

//switch语句
switch(month){
    case 3:
    case 4:
    case 5:
        document.write("春季");
        break;
    case 6:
    case 7:
    case 8:
        document.write("夏季");
        break;
    case 9:
    case 10:
    case 11:
        document.write("秋季");
        break;
    case 12:
    case 1:
    case 2:
        document.write("冬季");
        break;
    default:
        document.write("月份有误");
        break;
}

document.write("<br>");**for 循环**

7.  循环语句

7.1  for循环语句

//for循环
for(var i = 1; i <= 5; i++) {
    document.write(i + "<br>");
}

7.2  while循环

//while循环
var n = 6;
while(n <= 10) {
    document.write(n + "<br>");
    n++;
}

8.  数组（重点记忆）

• 数组的使用和 java 中的数组基本一致，但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制。

• 定义格式

  • var 数组名 = [元素1,元素2,…];

• 索引范围

  • 从 0 开始，最大到数组长度-1

• 数组长度

  • 数组名.length

示例演示：

<script>
		//数据类型没有限制
		var arr = [1,2,3,"hello",true];
		
		document.write(arr)
		document.write("<br/>")

		document.write("数组的长度："+arr.length)
		document.write("<br/>")

		//数据长度都没有限制
		//长度可变, 索引5~9都没有元素
		arr[10] = "world";
		document.write(arr);
	</script>

结果展示：

9.  函数（重点记忆） 

        JavaScript中的函数是一种可重复使用的代码块，它接收参数，执行特定的任务，并返回结果。函数可以在不同的位置、多次调用，从而实现代码的复用和模块化。

        使用function关键字定义函数，函数名可以自定义，参数列表使用小括号括起来，多个参数之间用逗号分隔，函数体使用大括号括起来，例如：

function add(a, b) {
  return a + b;
}

在上述代码中，定义了一个名为add的函数，它有两个参数a和b，函数体中执行了a+b并返回结果。

        函数可以通过函数名加小括号的方式来调用，例如：

var add = function(a,b){
			return a+b;
		}

var result = add(1, 2);
console.log(result); // 输出3

        在上述代码中，调用了add函数，并将1和2作为参数传递给函数，执行结果被保存在result变量中，最后通过console.log()函数输出结果。

        函数也可以不返回值，或者返回undefined。例如：

function showMessage(message) {
  console.log(message);
}
showMessage("Hello java world!"); // 输出"Hello, world!"

        在上述代码中，定义了一个名为showMessage的函数，它有一个参数message，函数体中执行了console.log()函数，输出message的值。

        函数还可以嵌套定义，定义在内部的函数称为内部函数。内部函数可以访问外部函数的变量和参数，例如：

function outerFunction(x) {
  function innerFunction(y) {
    return x + y;
  }
  return innerFunction(2);
}
var result = outerFunction(1);
console.log(result); // 输出3

        在上述代码中，定义了一个名为outerFunction的函数，它有一个参数x，内部定义了一个名为innerFunction的函数，它有一个参数y，内部函数返回x+y的值。在外部函数中调用内部函数并传递参数2，最终返回3。

 继续学习之路：

JavaScript (一) -- 快速入门（js技术的两种 引入方式 ）

JavaScript (三) -- 内置对象

 如果对你有帮助，请帮我点一下赞，我才有动力继续创作，谢谢！文章来源地址https://www.toymoban.com/news/detail-430423.html

到了这里，关于JavaScript (二) -- 基础语法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！