JAVAScript是一门编程语言。
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程
下面就是关于JS的基础:
JS的组成
javascript包括ECMAScript(语法)、DOM(页面文档对象模型)、BOM(浏览器对象模型).
ECMAScript:ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。
ECMAScript是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展。
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
BOM (Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
下面开始体验一下
JS查找HTML元素
getelement:获取元素 document:用文件证明感觉翻译一下更加好记的样子。
查找id="demo"的HTML元素,并把元素内容(innerHTML)更改为"Hello JS"
document.getElementById("demo").innerHTML = "Hello JavaScript";
提示:JavaScript 同时接受双引号和单引号:
document.getElementById("demo").innerHTML = 'Hello JavaScript';
根据JavaScript能够改变HTML属性的特性,来尝试改变一张HTML图像
改变 <img>
标签的 src
属性(source)来改变一张 HTML 图像
<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>
也就是说使用document.getElementById('指定的ID').什么什么东西
改变 HTML 元素的样式,是改变 HTML 属性的一种变种:
document.getElementById("demo").style.fontSize = "25px";
可通过改变 display
样式来隐藏 HTML 元素:
document.getElementById("demo").style.display="none";
可通过改变 display
样式来显示隐藏的 HTML 元素:
document.getElementById("demo").style.display="block";
也就是说在某些时候JS是能够写很多style的样式的,而且还挺方便的。
弹出框:
内联式
<script>
// 弹出警示
alert("hello,js!")
</script>
外联式
HTML文件内:<script src="js/Js1.js"></script>
js文件内:alert("你好,JS")
行内式
HTML:<button onclick="alert('hello,world')">按钮</button>
而这三种都具有相应的优点的缺点:
比如行内式可以将部分js写在HTML标签的事件属性中比如说onclick:"javascript:alert('hello,js')"。这种带有on的这种,用户相对主动的事件属性。
内嵌(内联)式就比如说我们在HTML最下面写的
<script>
alert(''hello js);
</script>
这种。
外部js(外联式)就是建一个外部js文件像是建一个外部css文件那样。更加美观方便把。
<script src="my.js"></script>
ok下一部分
JS基本的语法
1.注释
不知道有啥好解释的
单行注释快捷键:ctrl + /
多行注释快捷键:shift + alt + a
- vscode中修改快捷键方式:vscode➡ 首选项按钮➡ 键盘快捷方式 ➡ 查找原来的快捷键➡ 修改为新的快捷键➡ 回车确认
2.输入输出语句:
比如上面的内联外联举得例子alert就是输出语句的一种
alert(msg)浏览器弹出一个警示框(浏览器弹框)。主要用来给用户显示消息
console.log(msg) 浏览器控制台打印输出信息。主要用来给程序员看自己运行时候的消息。(alt+b然后再打开控制台可以看到)
prompt(info)浏览器弹出输入框,用户可以输入。
3.定义变量的语句
在这种就是定义变量
可以从变量获取数据也能改变变量的数据。
变量是用于存放数据的容器,可以存放数据。
var用来声明变量(variable),程序员定义的变量名,我们要通过变量名来访问内存中分配的空间。这个空间就是存放变量的空间。
//定义变量
var userName;
//为变量赋值
userName = prompt("请输入你的名字");
//输出变量
console.log("你的名字是",userName);
//字符串输入到页面里面
document.write("<h1>" + userName = "</h2>");
当然在声明变量的时候也能直接赋值
注意变量名
严格区分大小写,字母,数字,下划线和美元符号$都可以用,不能是关键字不能用数字开头,遵循驼峰命名法(这样式的:myFirstName)
JS把数据分成两种类型,基本数据(number,string,boolean,undefined(未定义的),null)和复杂数据(Object)。
Boolean:布尔值类型,如true,false,等价于1和0
number:既可以保存整数值,又可以保存小数(浮点数)。
数字型进制:二进制八进制十进制十六进制(十六进制数字序列范围1~9,A~F)
在JS中八进制前面加0,十六进制前面加0x
数组
数组是用来保存多个数据的一种结构。