1.网页的组成
html(结构)
- HTML:超文本标记语言除了可以渲染和容纳文字以外还可以容纳图片、音视频等;
- XHTML:更加严谨的超文本标记语言;
- HTML5:基于HTML的基础上增加许多强大并且非常实用的API;
- DHTML:网页中的内容是通过JS动态绑定的;
css(表现)
- css:层叠样式表
- css3:源于css的基础上增加了一些非常方便我们开发的样式属性,例如:border-radius:20px;可以实现盒子的属性。
javascript(行为)
- 一门轻量级的客户端脚本编程语言,运行在客户端,运行在浏览器上的语言,编程语言,都是面向对象来开发的。
书写顺序
- 先加载css, 再加载html代码,保证页面好看,最后在body的最后面加载js,因为js主要用来操作HTML元素的
2.JavaScript的作用
1.实现页面产品中的交互效果,例如:我选中那个一个图片,就展示对应的大图(选项卡思想),局部导航定位,轮播图等等,凡是能够操作交互的一般情况都是需要JS处理。
2.把数据绑定到一个html页面中,我们通过JS中提供的AJAX、JSONP技术,从后台服务器上获取所需要的数据,并且绑定在页面中呈现给用户,以后只需要后台把数据更改了,前端页面的数据会自动的跟着进行更改
3.用JS语言写服务器后台,进行文件处理,数据存储分析,业务逻辑处理等核心的操作(nodeJS)
3.js的引入方式
<div style="width: 300px;background: red; border-radius: 20px" onclick="alert('OK')">你好</div>
[removed]("<p>我的第一段 JavaScript</p>");
[removed]('<script src="js文件的路径"></script>')
- 注意:我们使用外链式引入JS,通过src把外部文件引入到当前的HTML页面,在它的<script>中间,不能在编写任何的JS代码了,即使写了,不会起作用
<script src="js/index.js">
alert('我是外链式标签块中的代码');
//外链式标签块中不要写任何js代码
//写了不会报错,但是肯定不执行
</script>
4.JS中的输出方式
1、alert(要输出的内容); 在浏览器中弹出一个框,在框中有我们要输出的内容(不管最后输出什么内容,输出的都是字符串内容)
2、confirm:在浏览器中弹出一个提示确认框(confirm(“确定要删除吗?”))
3、console.log(要输出的内容); 按F12在控制台中的console页卡中显示(一般用于调试,不会影响页面中的内容)
4、console.dir:他只是比.log输出的内容更加详细一些
5、console.table:他能把我们需要查看的数据在控制台中以一个表格的形式展示出来
6、removed; 直接显示在页面中,不停的输出
7、innerHTML/innerText 动态的向指定的元素中添加内容
5.JS的组成
ECMAScript(可以理解为是javascript的一个标准)
定义了JS的基本语法,命名规范,操作语句,变量,数据类型等最基础最核心的知识
DOM(document object model 文档对象模型)
提供了JS操作页面上元素的常用属性和方法
BOM(browser object model 浏览器对象模型)
提供了JS操作浏览器的常用属性和方法
6.JS的命名规范
var test = "hello";
console.log(test);
console.log(Test);
//Uncaught ReferenceError: Test is not defined
使用驼峰命名法(匈牙利命名法)
1.第一个单词的首字母小写,其余每一个有意义的单词的首字母都要大写
2.只能使用数字、字母、下划线命名
3.数字不能作为名字的第一位不能使用关键字和保留字
关键字就是在JS中有特殊含义的;保留字是未来可能会成为关键字的
在真实项目中我们一些约定俗称的规范:
1.命名不要用拼音,不要缩减的太短,因为这两类名字别人是很难看懂的
2 对于复杂的名字建议使用多个英文单词拼接的方式命名前缀建议
get/query 获取
set/insert/add 增加插入
update/replace 修改替换
remove/del 删除
jnxxhzz/自己的姓名作为前缀防止大项目函数冲突
7.JS中的变量
变量
可变的量,js中的变量是松散型的变量的作用
存储值和代表值声明一个变量
var 变量名 = 变量值 (注:通过var可以声明任何类型的变量,只声明不赋值,不知道这个变量是什么类型的;变量名不能用中文)变量类型
JavaScript里面包含的数据类型为:字符串、数字、布尔、数组、对象、Null、Undefined
1.JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型
var x // x 为 undefined
var x = 1; // x 为数字
var x = "Little"; // x 为字符串
2.JavaScript 字符串
字符串是存储字符(比如 “Little”)的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号:var name="Little";
var name='Little';
var answer="Hello!";
var answer="He is called 'Little'";
var answer='He is called "Little"';
3.JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
var y=123e5; // 12300000
var z=123e-5; // 0.00123
4.JavaScript 布尔
布尔(逻辑)只能有两个值:true 或 false。var x=true
var y=false
5.JavaScript 数组
下面的代码创建名为 cars 的数组:
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者 (condensed array):
var cars=new Array("Audi","BMW","Volvo");
或者 (literal array):
var cars=["Audi","BMW","Volvo"];
6.JavaScript 对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"Bill", lastname:"Gates", id:5566};
上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行:var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
对象属性有两种寻址方式:
name=person.lastname;
name=person["lastname"];
7.Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。cars=null;
person=null;
8.声明变量类型
当声明新变量时,可以使用关键词 “new” 来声明其类型:var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;