(缩写:JS)是一种完整的动态编程语言
首先我们在index主页的同目录下创建一个 s的文件夹,在里面再创一个名为main.js的文件
然后再到index.html文件编码里标签前添加以下代码。
调用main.js文件规则
我们再回到main.js文件里面添加
let myHeading = document.querySelector('h1');
myHeading.textContent = '欢迎您';
我用图表给你们看一下关系
1.let是声明一个变量
myVariable(注间一下大小写在‘js’里是有区分的)属于变量,变量是用来存储数值的.
querySelector('h1') 函数获取标题的引用,并把它存放于myVariable变量里面.
textContent变量的属性
myVariable.textContent = '欢迎您'; 指的是把存放变量面里的内容更改为 欢迎你
书写格式这里要注意一下,文本是需要( ' ' )单引号里面的的,结尾用( ;)。
2.我们主页插入编码时,
主页运行时调用js规则时把主页标题中的”
...
“的内容更改为( 欢迎你 )
但是把我的网站简介给弄没了,所以我在主页代码简介前面添加多一段
常来
看下图
以上所说是简单分析一下js编程变量其中的一种数据类型结构,但变量是可以有不同的数据类型.看下图
js之所以称为动态编程语言,就是因为它可以时刻改变变量的属性.
在js文件里也可以像CSS文件一样以( /*...*/ )标记注释之外. 还可以以( //....)注释,但是这是单行注释的
接下来我们说一说编程当中的运算符
按我们的理解是可以根据两个值(或变量)产生结果的数学符号,但这种两个变量的运算符是称为“二元运算符”
我们编程当中还会遇上一元运算符,三元运算符.所以人家问你们也要看一下实际情况来做答.
以下表格中我介绍了一些常用简单的运算符
以上的运算符是我们常用到的,取非即是我们之前所说的一元运算符.
在这里我们需要注意不同类型数据之间的计算可能会出现奇怪的结果,所以我们必须正确引用变量才能得到预期的结果。
比如在控制台输入“20”+“50”,为什么得不到70呢?因为引号将数字转换为字符串,所以结果是连接两个字符串即是2050,而不是两个数字相加。输入35+25得到正确的结果
日常生活中我们遇到某些事物或事情需要去判断真假或选择怎么处理时,我们的思维是怎么去思考的,哪就是需要参照物去判断。
但程序当中的参照物又是什么呢,这就需要我们用到条件语句去判断。
条件语句是一种代码结构,用于测试表达式的真假,并根据测试结果运行不同的代码。常用的条件语句是if...else 如下例
let numericalValue = '10';
if (numericalValue === '9')
{
alert('10');
}
else {
alert('9');
}
第一行代码之前讲过的赋值,第二行就是判断真假
如果if( ... )返回为真(true)运行第一个代码alert('10'),返回为假(false)则跳过第一个运行else之后第二个代码alert('9')
(注释一下,前面忘记讲了js这些代码可以用浏览器中的开发工具里面的控制台来测试)
函数(Function)
js函数是为执行特定任务而设计的代码块而当一些代码调用该函数时,它将被执行。
document.querySelector 和 alert 是浏览器内置的函数,随时可用
之前我们在js文件里使用的let myVariable = document.querySelector('h1'); 就是函数。
alert()函数在浏览器窗口中弹出一个窗口,窗口显示括号里面的内容。
函数通过 function 关键词进行定义,其后是函数名和括号 (),比如
function multiply(num1, num2) {
let result = num1 * num2;
return result;
}
对multiply定义两个参数 let声明result变量的值 return返回result变量的值
事件:事件可以给网页增加真正的交互能力。它可以捕获浏览器操作并运行一些代码作为响应。最简单的事件是点击事件,它是由鼠标点击触发的。
尝试在控制台中输入以下代码,然后单击页面上的任意位置:
document.querySelector('html'). = function() {
alert('没事别乱点,会挨揍的。');
}
有许多方法可以将事件绑定到元素。这里选择了
元素,并将一个匿名函数(即一个未命名的函数,其中匿名函数包含单击鼠标时要运行的代码) 分配给html的 属性。
函数与事件就简单说一下,这节课很多都是名词的解释与运用,大家多练习吸收一下 下一节实操再巩固一下。