day16 js（JavaScript）基础

js（JavaScript）基础

document

document指代的是HTML；write就是写入。

document.write('<h1>这是一个一级标题</h1>')
document.write('<p>这是一个段落</p>')

引入js文件：

先设置两个span标签：

<span>请输入姓名：</span>
<span id="name">张三</span>

在下方添加一个文本框以及提交按钮：

这里的onclik就是点击事件，innerText就是内部文本。

<input type="text" name="" id="info">
		<!-- onclick 点击事件 -->
		<!-- innerText内部文本 onclick 点击事件-->
		<input type="submit" value="提交"
			onclick="document.getElementById('name').innerText=document.getElementById('info').value">

这里就可以把输入的文字上传到html页面中。

修改图片：先上传一张本地图片，然后设置一个更改图片的按钮，更改的图片也是本地的：

<img src="../day14/img/cat_close.png" alt="" id="phto">
		<input type="submit" value="更改图片" onclick="document.getElementById('phto').src='../day14/img/cat_open.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=''">

在html页面中添加一个列表，列表的元素用|隔开：

这里用span标签添加的|符号，这里改变颜色是默认改变一个，改变全部的后面再讲。

<script type="text/javascript">
			// Python的列表在其他编程语言中叫做数组。
			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>

JavaScript基础

这里主要说明在控制台输出(在控制台输出1)：

num = 1
consle.log(num)

consle.log()也可以进行数学运算符：+、-、*、/、%、**，比较运算符：>、<、>=、<=、、!=，逻辑运算符：&&(逻辑与运算and)、||（逻辑或运算==or）、!（逻辑非运算）

console.log(4 > 3 && 4 < 5)
console.log(4 > 3 && 4 > 5)
console.log(4 > 3 || 4 > 5)
console.log(!(4 > 3 || 4 > 5))

js的循环

以一个案例来说计算1-100的和：

		i = 1
		total = 0
		while (i <= 100) {
			total += i
			i += 1
		}
		console.log(total)

		total = 0
		for (i = 0; i <= 100; i += 1) {
			total += i
		}
		console.log(total)

其实js的循环和java差不多的只是输出是用console.log()而已。

函数

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

函数的作用就是降低代码的冗余度。

			function num_total(n) {
				total = 0
				for (i = 1; i <= n; i += 1) {
					total += i
				}
				console.log(total)
			}
			num_total(100)
			num_total(50)

这里先给形参传值然后再进行下面的循环运算。

数组

js中的数组就是Python中的列表

list_1 = [‘Python’, ‘JavaScript’, ‘C’, ‘HTML’]

增加

push - 向数组末尾添加新元素

list_1.push('C++')
console.log(list_1)

删除

pop - 删除数组中的最后一个元素

list_1.pop()
console.log(list_1)

修改

直接对下标做操作修改

list_1[1] = 'Java'
console.log(list_1)

删除

splice(下标，个数) - 从指定下标开始，删除指定个数的数据

list_1.splice(0, 2)
console.log(list_1)

查找

console.log(list_1.length)
console.log(list_1[0])