小试牛刀——JS基础

n南x星

已于 2022-07-15 17:37:28 修改

阅读量255

点赞数

文章标签： javascript 前端

于 2022-07-12 20:29:26 首次发布

本文链接：https://blog.csdn.net/weixin_50517509/article/details/125749830

版权

本文介绍了JavaScript的基础知识，包括其作为脚本语言的角色、在HTML中的使用方式以及两种引入方式。通过示例展示了如何操作DOM元素，如修改文本、图片和样式。还探讨了变量定义、运算符、分支结构、循环和函数的基本概念，并提供了相关代码实例，如输出3的倍数、计算乘积、统计字符串中数字个数、计算平均分和斐波那契数列。

摘要由CSDN通过智能技术生成

JS（JavaScript）控制网页的行为。JS是互联网中最流行的脚本语言，网页、小程序、app等。
1.JS是脚本语言。
2.js是轻量级的编程语言。
3.JS是可插入HTML页面的代码。
4.所有现代浏览器均可执行JS代码
JS代码可以借助script标签放到head或者body标签中。

JS有两种引入方式

<body>
	<!-- 第一种js引入方式 -->
	<script type="text/javascript">
		// js代码注释（单行注释）
		
		/*
		js代码注释的多行注释
		*/
		
	   // document --> 指代HTML
	   // write --> 写入
	   document.write("<h1>这是一个标题</h1>")
	   document.write("<p>这是一个段落</p>")
	</script>
	
	<!-- 第二种js引入方式 -->
	<script type="text/javascript" src="js/demo1.js"></script>
</body>

以下为代码示例

修改span标签内容，
1)先加入点击事件onclick，
2)确定位置：document.getElementById(‘name’)，固定写法，我们记住就好
3)设置标签中的文本内容：添加 innerText
4)设置内容为document.getElementById(‘info’).value，第一个input.

<span>请输入姓名：</span><span id="name">张三丰</span>
<input type="text" name="" id="info">
<!-- onclick -- 点击事件 -->
<input type="submit" value="提交" 
onclick="document.getElementById('name').innerText = document.getElementById('info').value">

同理，我们修改图片时需要加 src，修改样式时需要加 style 。

<img src="./img/1.png" alt="" id="photo">
<input type="submit" value="更改图片" 
onclick="document.getElementById('photo').src = './img/2.png'">
	

<p id="style">段落</p>
<input type="submit" value="华丽的" 
onclick="document.getElementById('style').style = 'color:pink;font-size:20px;'">
<input type="submit" value="朴素的" 
onclick="document.getElementById('style').style = ''">

效果如图

图1 朴素

图2 华丽

在JS中插入html代码

<script type="text/javascript">
	titles = ['四川','云南','贵州','湖北']
	for (x in titles){
		title = titles[x]
		html_str = "<span id='one'>" + title + "</span><span>|</span>"
		document.write(html_str)
	}
	document.getElementById('one').style = 'color:red;'
</script>

通过前面几个代码，我们对JS的作用更为了解，接下来我详细地介绍关于JS的一些基础知识。

1.定义变量

变量名 = 变量值(全局变量)
var 变量名 = 值 (函数中的局部变量)
let 变量名 = 值（{}中的局部变量）
const 变量名 = 值（常量）

2.运算符

数学运算符：+、-、*、/、%、**
比较运算符：>、<、>=、<=、==、!=、===、!==
赋值运算符：=、+=、-=、*=、/=、**=、%=
逻辑运算符：&&（逻辑与）、||（逻辑或运算）、!(逻辑非运算)

3.分支结构

单分支

if(条件语句){
	代码块
}else{
	代码块
}

多分支

 if(条件){
	 代码块 
 }else if(条件){
	 代码块 
 }else if(条件){
	 代码块
 }else{
 }

else可以省略不写
三目运算符

条件?结果1:结果2 - 条件成立，结果1；反之，结果2
例如：
	console.log(age >= 18?'成年':'未成年')

4.循环

for-in循环

for(变量 in 序列){
	代码块
}

while循环

while(条件语句){
	代码块
}

传统for循环

for(表达式1;表达式2;表达式3){
	代码块
}

传统for循环改while循环

表达式1
while(表达式2){
	代码块
	表达式3
}

5.函数

定义：

将重复的代码封装起来，以便重复调用。

function 函数名(形参列表){
	函数体
}

调用

函数名(实参列表)

作用：

1.降低代码的冗余度。
2.将执行某一功能的代码封装起来，更容易让人理解。

测试一下掌握程度吧！

使用while循环输出 0~100内所有3的倍数

i = 1
while(i <= 100){
    if(i % 3 === 0){
        console.log(i)
    }
    i += 1
}

使用循环计算1*2*3*4*…*10的结果

i = 1
j = 1
while(i <= 9){
    i += 1
    j *= i
}
console.log(j)

统计一个字符串中数字的个数(使用函数进行封装)

function num_str(str){
    tot = 0
    for(i in str){
        if(str[i] >= 0 && str[i] <= 9){
            tot += 1
        }
    }
    console.log(tot)
}
num_str('woai1sdfgh876543223')

计算所有学生平均分

stu = [
  {name: '大黄', age: 27, score: 60},
  {name: '小明', age: 18, score: 89},
  {name: '张三', age: 23, score: 92},
  {name: '小花', age: 20, score: 71},
  {name: '小红', age: 30, score: 84}
]
b = 0
for(x in stu){
    a = stu[x].score
    b+= a
    mean = b / 5
}
console.log(mean)

求斐波那契数列列中第n个数的值:1，1，2，3，5，8，13，21，34… （这儿的n可以是任意正整数，可以通过输入来确定）

function n_val(n){
    if(n === 1 | n === 2){
        console.log(1)
    }
    else{
        f1 = 1
        f2 = 1
        for(i=3;i<=n;i++){
            f = f1 + f2
            f1 = f2
            f2 = f
        }
        return console.log(f2)
    }
}
n_val(1),n_val(2),n_val(3),n_val(4),n_val(5),n_val(6)