JS简介
计算机程序是由计算机“执行”的一系列“指令”。在编程语言中,这些编程指令被称为语句。JavaScript 程序就是一系列的编程语句javaScript 是属于 HTML 和 Web 的编程语言, JavaScript 能够改变 HTML 内容、属性、样式、或者是某些属性等。
JS语法注意
1:“===”与“==”
==:只比较值是否相同;
===:不仅比较值是否想爱你沟通还要比较类型是否相同。
2:运算有关字符串的级联问题:
var x="8"+3+5;------835
var y=3+5+"8";------88
实际是级联为字符串(引号)后面的数,实际前面的的数的运算不受影响。
3.let,const
- 可以使用
let
关键词声明拥有块作用域的变量,var
是拥有全局作用域的,如果在块级里声明,变量也将重新声明块外的变量
var x = 10;
{
var x = 2;
}
// Here x is 2
document.getElementById("demo").innerHTML = x;
结果是:2
在相同的作用域,或在相同的块中,通过 let
重新声明一个 var
变量是不允许的。
- JavaScript const 变量必须在声明时赋值:不是真正的常数因此,我们不能更改常量原始值,但我们可以更改常量对象的属性。
const PI = 3.141592653589793;
PI = 3.14; // 会出错
PI = PI + 10; // 也会出错
在同一作用域或块中,不允许将已有的 var
或 let
变量重新声明或重新赋值给 const
。
js如何查找HTML元素
主要分为三大类:
- 通过id查找:
<p id="demo6">loo</p>
<script>
var myelement = document.getElementsById("demo6");
document.getElementById("demo6").style.color = "red";
document.getElementById("demo6").style.fontFamily = "Arial";
document.getElementById("demo6").style.fontSize = "large";
</script>
- 通过标签名查找
<div id="main">
<p id="demo7">hello</p>
</div>
<script>
var myelement = document.getElementsByTagName("p");
var myelement = document.getElementsById("main");
var myelement = document.getElementsByTagName("p");
</script>
- 通过类名查找
<p calss="struo">hi</p>
<script>
var x = document.getElementsByClassName("struo");
</script>
DOM一小部分内容
JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件
注意:getElementById
是方法,而 innerHTML
是属性。
eg:表单验证:
<form name="myForm" action="" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
action
表示表单提交的地址,为空时默认提交到当前页面,method
表示表单提交的HTTP方式( get 、post、dialog )
,它的默认值为get
。
这里给name
设定值“myForm”
是为了在js中获取到这个form
。当一个页面有多个表单的时候,我们就需要用name
来区分
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
myForm
代表name
为“myForm”
的表单,以此推fname
。这里就是接收用户输入姓名的input
框。合起来的意思就是获取了表单“myForm”
中input
的value
值,其实就相当于:
“document.getElementsByName(“fname”[0].value;”)
其实可以直接在<input>
中使用required=“required”
验证,当你提交时表单会自动帮你验证。