javascript简单入门（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47591145/article/details/109295386

本文从JavaScript的基础语法入手，详细介绍了变量、数据类型、运算符、流程控制等内容，并通过实例演示了如何利用这些基本元素实现简单的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript简单入门（一）

1、书写位置（内嵌，外链，行内）
内嵌：

<script type="text/javascript">
			alert("疑是地上霜")
		</script>

外链：

<script src="js文件路径地址">这里不能写js语句</script>

行内：

<button onclick="alert('床前明月光')"></button>

2、注释：
单行注释： // 注释语句快捷键ctrl+/
多行注释： / 注释语句 / 快捷键ctrl+shift+/
注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！

3、数据类型：

数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包裹起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（特殊取值null）
未定义型：undefined

4、变量：
定义：就是存放数据的、内疗可以存储任意数据
声明变量：var 变量名称 = 存储的数据; (variable 变量)
变量命名规范：

只能由字母、数字、_（下划线）、$（美元符号）组成。
不能以数字开头。
命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。

5、js是弱类型语言，不重视类型的定义，但js会根据为变量赋值的情况自定判断该变量是何种类型：

数值型：var i = 1; var d = 2.35;
字符串：var str = "用心学习";
布尔型：var b = true;

6、检测数据类型：
typeof(value); 或者typeof value; 返回这个变量的类型.
说明 : 同一个变量, 可以进行不同类型的数据赋值.
在这里插入图片描述
7、算术运算符：

+	-	*	/	%	++	--

一元运算符：
只有一个操作数
+-
自增 ++
	通过自增可以使变量在自身基础上+1
	对于一个变量自增以后，原变量的值会立即+1
	自增分为两种 前++（++a） 后++（a++）
	无论先++还是后++，最终变量的结果都自增1
	a++ 的值等于原变量的值（自增前的值）
	++a 的值等于新值（自增后的值）
自减 --
	通过自减可以使变量在自身基础上-1
	对于一个变量自减以后，原变量的值会立即-1
	自减分为两种 前--（--a） 后--（a--）
	无论先--还是后--，最终变量的结果都自减1
	a-- 的值等于原变量的值（自增前的值）
	--a 的值等于新值（自增后的值）

 
    alert(1234 / 1000 * 1000); // 1234
  
    var s = "12";
     s -= 10;
    alert(s);  // 2
 
    var s = "aa";
    s -= 10;
    alert(s);  // NaN       Not a Number 不是一个数字
 
    var s = "12";
    s += 10;
    alert(s);       // 1210

8、关系（比较）运算符：

  >=		<		<=  	!=

== 等于（只比较内容） === 恒等于（比较内容的同时还要比较数据类型）
注意：关系运算符返回的结果只有两个：true / false

<script>
 
    // 请问1 : 3 > 5, 结果为 ?
    alert(3 > 5);   // false
 
    // 请问2 : “22” == 22  结果为 ?
    alert("22" == 22); // true  (仅仅判断数值)
 
    // 请问3 : “22” === 22  结果为 ?
    alert("22" === 22);  // false  (恒等于, 数值和类型都要相等)
    
</script>

9、逻辑运算符

&&	 	与		true&&false		====>false
|| 		或		true||false			====>true
！ 		非		!true				====>false
false（理解）：false,  0,  null,  undefined 
true（理解）：true, 非0,  非null,  非undefined
 
针对 && 顺口溜: 找第一个出现的假值. (一假即假)
针对 || 顺口溜: 找第一个出现的真值. (一真即真)

<script>
 
    // 短路与 (一假即假)
    // 口诀 : 找第一个为假的值.
 
    // 请问1 :  8 < 7 && 3 < 4, 结果为 ?
    alert(8 < 7 && 3 < 4);  // false
 
    // 请问2 :  -2 && 6 + 6 && null 结果为 ?
    alert(-2 && 6 + 6 && null); // null
 
    // 请问3 :  1 + 1 && 0 && 5  结果为 ?
    alert(1 + 1 && 0 && 5); // 0
 
</script>

10、三元运算符：

条件？表达式1：表达式2
如果条件为true，返回表达式1的结果
如果条件为false，返回表达式2的结果

<script>
    // 请问1 :  3 ? “aaa” : “bbb” 结果为 ?
    alert(3 ? "aaa" : "bbb");       // aaa
 
    // 请问2 :  0 ? “ccc” : “ddd”  结果为 ?
    alert(0 ? "ccc" : "ddd");       // ddd
</script>

11、if条件语句

var score = 59; 
  if (score >= 90) {
        alert("优秀");
    } else if (score >= 80) {
        alert("良好");
    } else if (score >= 60) {
        alert("及格");
    } else {
        alert("不及格");
    }
 //多条件分支 并制定范围展示
	var age = 60;
	if(age < 120 && age > 80){
		alert("老神仙呀")
	}else if(age <=80 && age > 40){
		alert("你狠有前途")
	}else if(age <= 40 && age > 20){
		alert("40一枝花")
	}else if(age <= 20 &&  age >16){
		alert("嗨起来")
	}else{
		alert("小屁孩回家找妈妈")
			}

12、switch分支结构

  var score = 59;
   switch (score) {
          case 10:
          case 9:
              alert("优秀!");
              break;
          case 8:
              alert("良好!");
              break;
          case 7:
          case 6:
              alert("及格!");
              break;
          default:
              alert("不及格!");
              break;
      }

13、循环结构 while、do-while. for：
while(循环条件){循环体;}
do{循环体;}while(循环条件);
for(循环变量赋初值；循环条件；循环变量增值){循环语句;}
console.log（…）; 以日志的形式在控制台输出结果！

while：

循环输出1-10的偶数
var n = 1;
while(n <= 10){
	if(n % 2 == 0){console.log(n);}
	n++;
}

//循环输出1-10的累加和
var a = 1;
var sum = 0;
while(a <= 10){
	sum+=a;
	a++;
}
console.log(sum)

//循环输出1-10的奇数的和
var n1 = 1;
var sum1 = 0;
while(n1 <= 10){
	if(n1% 2 == 1){
//	console.log(n1);
		sum1+=n1
	}
	n1++;
}
console.log(sum1)

do-while：

	循环输出1-10
   		var i = 1;
   		do{
   			console.log(i)
   			i++
   		}while(i<=10)
   		
   		
   		//循环输出 1-10的奇数
   		
   		var i = 1;
   		do{
   			if(i % 2 ==1){console.log(i)}
   			i++;
   		}while(i<=10)
   		
   		
   		//循环输出 1-10的偶数的累加和
   		var i = 1;
   		var sum = 0;
   		do{
   			if(i % 2 == 0){
   				sum += i;
   			}
   			i++;
   		}while(i <= 10)
   		console.log(sum)

for：

	//循环输出 1-10
   		var i = 1
   		for(; i <= 10; i++){
   			console.log(i)
   		}
   		
   		//循环输出 1-10的奇数
   		for(var a = 1;a <= 10;a++){
   			if(a%2==1){
   				console.log(a)
   			}
   		}
   		
   		//循环输出 1-10的累加和
   		var sum = 0;
   		for(var b = 1; b <= 10; b++){
   			sum += b;	
   		}
   		console.log(sum)

14、循环嵌套
表格

document.write("<table border=1 width=300 height=400>")
	//外层控制行
	for(var row=0;row<5;row++){
		document.write("<tr>")
		//内层控制列
		for(var col = 0; col < 3 ;col++){
			document.write("<td></td>")
		}
		document.write("</tr>")
	}
	document.write("</table>")

九九乘法表

document.write("<table border=1 width=300 height=400>")
	//外层循环行
	for(var row=1;row<=9;row++){ 
		document.write("<tr>");
		//内层循环列 1*9 = （1*9）
		for(var col=1;col<=row;col++){
			document.write("<td>"+row +"*"+ col+"="+(row*col) +"</td>")
			}
			document.write("</tr>");
		}
		document.write("</table>")