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])