js知识点01_js第一章知识点-CSDN博客

本文链接：https://blog.csdn.net/m0_45077860/article/details/125016566

1，js必须包含在script标签中，并且注意js脚本需要写在整个网页内容的最后面。

2，变量：程序在执行的过程中可以变化的量被称为变量。变量的定义语法：var 变量=初始值；变量名的定义规范：（1）.变量名由字母，数字，下划线组成，并且数字不能开头。（2）.变量名不能使用系统预留字段。（3）.变量命名时使用小驼峰结构，即多个单词，第一个单词首字母小写，后面的单词首字母大写（4）.变量命名时同一个变量名在同一作用于尽量不要重名，同时变量名要做到见名知意

3，变量中存储数据的基本数据类型：字符串类型（String）:通过''或者""包裹的内容；数字类型（Number）:比如10，20，3.14；布尔类型(Boolean)：该类型取值只有两个，分别是true, false（真,假）； undefined(空值类型):代表该变量已经定义单数变量中暂时未设置数据； null(空对象)：该数据针对对象类型的数据，代表对应的对象不存在。

4，JS运算符

（1）算术运算符： +, -, *, /, %, ++, --；

注意： 1.如果字符串和数字做+，此时会执行字符串的拼接,如果想要执行普通的数据加法，此时需要将字符串强制转换成数值类型。 2.++,--放在变量左边和右边时，造成的影响不同。如果++(--)出现在变量的右边，此时先使用变量中的数据进行运算，之后再让变量中的数据自增（自减）。如果++(--)出现在变量的左边，此时先让变量中的数据自增（自减），之后再使用变量中的数据进行运算。 3.+，-，*，/，%是双目运算符即在运算时需要两个变量参与运算，但是++(--)是单目运算符，即参与运算的变量只需要一个。

（2）复合运算符 +=, -=, *=, /=, %= a += b等价于a = a+b 复合运算符本质上是将运算符左侧的变量和运算符右侧数据做算术运算，之后将算术运算符对应的结果赋值给运算符左侧的变量。

(3)赋值运算符 var a = 10; 作用是将运算符右侧的数据赋值给左侧变量。赋值运算符可以用来区分变量当前是赋值过程还是取值过程。如果变量右侧存在赋值符号，此时代表向变量中存储数据，否则代表从变量中取出数据。注意：赋值运算符优先级最低

5，运算结果输出：

（1)，alert输出：调用浏览器自身的警告框进行输出

（2），console.log():调用浏览器的控制台输出,经常用来进行代码的运行调试

（3），confirm():确认框输出:返回一个布尔类型的数据，true代表确认，false代表取消

（4），document.write：将结果输出到页面

6，js实现计算器

<!DOCTYPE html>

<html>

<head>

.jianyijisuanqi {

width: 800px;

height: 400px;

background-color: antiquewhite;

margin: auto;

text-align: center;

}

.xia button{

width: 100px;

height: 50px;

}

.shang input{

width: 100px;

height: 50px;

margin: 50px 0;

}

</style>

</head>

<body>

</div>

</div>

</body>

var inputNum1=document.getElementById("num1");

var inputBiaodian=document.getElementById("biaodian");

var inputNum2=document.getElementById("num2");

var inputJieguo=document.getElementById("jieguo");

var btnJia=document.getElementById("jia");

var btnJian=document.getElementById("jian");

var btnCheng=document.getElementById("cheng");

var btnChu=document.getElementById("chu");

var btnQuyu=document.getElementById("quyu");

btnJia.οnclick=function(){

inputBiaodian.value="+";

inputJieguo.value=Number(inputNum1.value)+Number(inputNum2.value);

}

btnJian.οnclick=function(){

inputBiaodian.value="-";

inputJieguo.value=Number(inputNum1.value)-Number(inputNum2.value);

}

btnCheng.οnclick=function(){

inputBiaodian.value="*";

inputJieguo.value=Number(inputNum1.value)*Number(inputNum2.value);

}

btnChu.οnclick=function(){

inputBiaodian.value="/";

inputJieguo.value=Number(inputNum1.value)/Number(inputNum2.value);

}

btnQuyu.οnclick=function(){

inputBiaodian.value="%";

inputJieguo.value=Number(inputNum1.value)%Number(inputNum2.value);

}

</script>

</html>

（7），js实现图片选择性显示

<!DOCTYPE html>

<html>

<head>

* {

padding: 0;

margin: 0;

}

.anniu {

text-align: center;

margin-top: 50px;

}

button {

width: 100px;

height: 50px;

}

.kuang {

text-align: center;

width: 500px;

height: 200px;

margin: 20px auto;

}

img{

width: 100%;

}

</style>

</head>

<body>

</div>

</div>

</body>

var img1=document.getElementById("img1");

var img2=document.getElementById("img2");

var img3=document.getElementById("img3");

var img4=document.getElementById("img4");

var tupain=document.getElementById("tupian");

// var path=document.getElementById("tupian").src;

img1.οnclick=function(){

tupain.src= "img/1.jpg";

}

img2.οnclick=function(){

tupain.src= "img/2.jpg";

}

img3.οnclick=function(){

tupain.src="img/3.jpg";

}

img4.οnclick=function(){

tupain.src= "img/4.jpg";

}

</script>

</html>