前端、js基础
来源:互联网 发布:nginx添加站点 编辑:程序博客网 时间:2024/06/03 15:09
前端基础
前端:一切可视化的事物叫前端。
前端:包括了网页端和移动端。网页端:HTML 4.0/CSS 2.0 /JS/JQuery 2.x/HTML 5.0/CSS 3.0/Bootstrap 2.0/3.0/node.js/Auglar.js ....
移动端:
- OC/android/swift 原生开发技术
iOS 10万
android 8万
20万
- HTML5 混合式开发技术
HTML5 10万
我们要学的:
HTML 4.0/CSS 2.0 /JS/JQuery 2.x/HTML 5.0/CSS 3.0/Bootstrap 2.0/3.0/会有一些移动端开发框架
==================== HTML CSS JS =======================
HTML 4.0 是一种最基础的网页开发语言。它被所有浏览器的所承认。也就是一旦你写出了HTML 所有的浏览器都可以显示。
浏览器内核:IE(360、IE、搜狗、猎豹)、Firefox(Firefox)、Chrome(chrome、淘宝浏览器)
<>HTML 全部的标签,都是以<>为表示形式。
标签:一个标签有一种含义。
<XHTML> 所谓的XHTML 就是HTML + XML的结合体。
所以XHTML其实就是规范化的HTML语言。
第一个基础的HTML:
<html>
<head><title>xxxxxxxxxx</title></head>
<body>
yyyyyyyyyy
</body>
</html>
以上案例告诉我们,<head></head> 内部一般放的是浏览器的标题和浏览器标题相关的东西,比如后期说的引入文件和脚本。<body></body>内部一般放的是浏览器正文显示的东西。<body bgcolor> 一般是用来设置背景颜色
1、<h1> 浏览器标题。标题具有换行的特点。从h1到h6 逐次递减。align 属性可以标题的位置。如:<h1 align="center"></h1>
2、<p> 段落标记。具有上下换行的特点。
3、<br/> 单纯的换行标记。相当于java里面的\n
4、<hr> 分割线。注意:如果没有标签之间没有任何内容,可以只写一个头部。但是要这么写<hr/>
5、<a> 超链接标签。需要添加属性,大部分HTML标签里都需要添加属性以达到标签具体实现的效果。如:<a href=""></a> href属性表示你要去往哪里。注意:href的值,只能有2种:一种是网址。一种是本地文件(在引用文件的时候注意路径,也就是我们经常提到的绝对路径和相对路径),target属性,一般表示以何种形式打开。_blank表示新窗口打开。
绝对路径:完整的路径。如:file:///C:/Users/mybirdie/Desktop/a/html1.html
注意:如果使用绝对路径:在HTML里请告诉他是file协议
相对路径: 相对论的路径。如:
1、a/html1.html
2、../ 表示上一级目录
6、<!-- 这里填写注释 --> 表示的就是注释。
7、<img> 图片标签。可以引入一张图片。src属性 表示图片的路径。由于<img></img>标签之间不需要任何东西,因此可以简写<img src="" />。 width 表示宽度。 heigth表示高度。如:
<img src="" width="" height="" />
8、<font> 文字标签,属性color 可以设置文字颜色。size 设置文字大小
9、<table> 表格标签。<thead>一般用来表示表格头部,<th> 一般用来表示头部的标题 <tbody> 一般用来表示表格的内容。<tr> 一般用来表示一行, <td> 一般用来表示一行中的某一个单元格。
练习一:请完成以下图例:
序号 姓名 密码
1 jabez 123456 编辑(超链接) 删除(超链接)
2 jack 12456 编辑(超链接) 删除(超链接)
10、<ul><li></li></ul> 无序列表标签。<ol><li></li></ol> 有序列表标签,会在<li>之前加入序号。
11、<form ></form> 表单标签。表单里面有很多的元素。比如:输入框,复选框,单选框, 普通按钮,提交按钮,重置按钮,下拉菜单,多行文本框,上传文件框。
- <form action=""> 表单提交的地址 <form method="post/get">
- <input type="text"> 文本框
- <input type="password"> 密码框
- <input type="radio"> 单选框 (多个单选框用name属性约束)
- <input type="checkbox"> 复选框
- <input type="button"> 普通按钮
- <input type="submit"> 提交按钮
- <input type="reset"> 重置按钮
- <input type="file"> 上传文件
- <select name=""> 下拉菜单
<option value=""> 下拉选项
- <textarea cols="列" rows="行"></textarea>
注意:如果需要给后台传值的时候,需要加入name属性,如<input name="userName" type="text"/>
12、<marquee> 跑马灯标签。behavior="slide/scroll" 滚动行为 direction="left/right/up/down" 方向 loop 循环几次
13、<B></B> 加粗 <i></i> 斜体
14、<iframe> 内联框架,说白了就是可以通过该标签引用一个页面,支持透明。
15、<frameset> 内联框架,该种更加灵活。
例如:
<html>
<frameset cols="50%,50%">
<frame src="html1.html"></frame>
<frame src="html1.html"></frame>
</frameset>
</html>
16、<div> 块元素其中的一种。也是经常用到的一种。一般基本所有的“赞美”都会给到这个元素。
17、<span> 內联标签其中的一种。也是经常用到的一种。一般基本“所有动词和形容词”都会给到这个元素
块元素:主要是分块表示,会自动有换行的概念。而且块元素可以设置边距,宽高等。
如:<h1></h1> <p> <div> <th> <tr> ....
内联元素:没有换行的概念。是不可以设置边距和宽高的
如: <span> <font> ...
注意:几乎所有的标签都会有style属性。所有标签的大小写问题,在HTML中,是不计较大小写的。也就是你可以用大写。
js基础
所以又称之为“动词”;
原生的JS,简单但是使用起来较复杂。
JS标识:
1、JS需要在HTML代码中用Script标识的。2、标准的Script需要加入type属性。type="text/javascript"
3、script的位置根据特定的情况而定。
JS输出:
1、alert( 输出内容 );//警告框2、console.log( 输出内容 ); //一般用于控制台输出。
注意:一般集合类型,建议都是控制台输出
JS注释:
// 单行/* */ 多行
JS变量:
所有的变量可以用var声明。
JS运算符:
- + * / % 都可以使用。1、但是+在运算的时候如果与字符串在一起运算,那么起到的就是连接符的作用。
2、注意:包括字符串在内所有的运算符会遵守优先级。
注意:parseInt("10"); 为强制转化成整型。
parseFloat("10");为强制转化为浮点型。
typeof(10+"");typeof为显示数据类型。
JS三大弹出框:
1、alert 警告框
2、confirm 确认框。返回的是布尔类型
if( confirm("确认要关闭吗?") ){
window.close();
}
3、prompt 输入框 (标题输入框,默认值)
var a = prompt("请输入你喜欢的动物","猪");
alert( a );
JS数组:
1、定义一个数组:var arr = new Array();
var arr = [1,2,3,5,5,6,7];
2、往数组里添加一个元素
arr.push(); 注意:是尾部添加
3、从数组里删除一个元素
arr.pop(); 注意:是尾部移除。
4、arr.length 数组的长度
5、遍历:
for( var i = 0 ; i < arr.length; i++ ){
console.log( arr[i] );
}
js 一般把键值对叫做对象。
6、键值对表示方式为:
var arr = { "a" : "b","c":"d" }
取出键值对的值:
arr.a;
var arr = { "a" : [1,2,3,4,5] }
console.log( (arr.a)[2] );
js特殊值:
1、NaN: 无法识别数据类型。一般是由运算造成的。2、undefined
1、初始化没有赋值的时候,打印会undefined;
2、在取值的时候,如果目标值不存在,会打印undefined;
注意:变量在初始化的时候,默认值是undefined,如果没有给出具体的值,相当于没有找到引用对象,这个时候该引用会去找最近一个有值变量。
3、null 空值
1、一般是指对象本身是null值的时候打印。
2、选择器获取不到相关控件的时候,一般会显示null
js函数: function 关键字
function abc(){
alert( 1 );
}
abc();
1、函数有作用域。
2、作用域内优先使用自己的变量。再考虑作用域外的变量。
3、作用域包括形参。
4、如果在作用域范围内,重新定义,那么它将不会污染全局变量。
5、如果在作用域范围内,直接使用或者定义,那么将可能污染全局变量。
6、在弱语言中,重复定义,没有定义都是没有错的。但是不推荐此种做法。
//动态调用函数方式。
var a = abc; //abc为函数名
a();
//封装函数写法
var a = {
"userName" : "jabez.huang",
"userPwd" : "123456",
init : function(){
return this;
}
};
js三大选择器:
1、ID选择器 document.getElementById("a")2、Name选择器 document.getElementsByName("a")[]
3、类选择器 document.getElementsByClassName("a")[]
4、Tag选择器 document.getElementsByTagName("a")[]
.value 一般文本框、下拉菜单等只要有value属性设置的值。都可以用value方法获取或者设置。
.checked 用来获取相关 复选框,单选框是否被选中的值。
.innerHTML 用来设置或者获取元素的内容,包括设置或者获取HTML。
.innerText 用来设置或者获取元素的内容,不包括设置HTML。
JS事件:
1、全局事件。也就是说任何在该页面发生的某种事件,都可以被监听。2、在外部监听某一个控件的事件的形式。
3、在控件内部监听。
控件内部监听事件:
1、通过传参的方式,获取相关的控件对象的属性值
function goto( dom ){
window.open( dom.value );
}
<input type="text" value="" onclick="goto(this)"/>
2、通过普通的选择器方式,获取相关的控件的值
funtion goto(){
document.getElementById("url").value
}
<input type="text" id="url" onclick="goto()"/>
新语法: url.indexOf("www"),返回找到字符串的索引位置。否则返回-1;
新语法:url.split(","),返回字符串分割后的数组。
JS 是一种基于客户端,网页的脚本.JS是一门弱语言。
又由于JS是基于客户的脚本语言。因此它所有的代码不可避免的可以被外界查看。
所以基于两个方面考虑:
1、JS的安全问题。(压缩、混淆代码等)
2、访问速度的问题。 (压缩,加入CDN)
JS基础跟所有的语言一样。都有逻辑判断,循环语句,条件判断,运算符。
只不过JS的运算符+,在跟字符串操作的时候,就会起到连接的作用。
JS基础的三大弹出框:
1、alert2、confirm 返回的是布尔类型 确认框
3、prompt 输入框,(标题,默认值)
JS三大特殊值:
1、NaN 无法识别的类型。 一般出现在运算中。
2、undefined
1、变量未初始化赋值。
2、通过document找相关的对象,获取不到的时候就是undefined
3、null
1、该值本身的值为null
强制转换:
1、parseInt 2、parseFloat
JS集合
1、var a = new Array();2、var b = [1,2,3,4];
3、a.push 在集合尾部加入一个数据。
4、a.pop 在集合尾部移除一个数据。
5、a.length 返回数组的长度。
数组转字符串:
1、join(",")字符串转数组:
1、split(“”)字符串语法:
1、indexof() 找到字符串中,出现的位置
2、substr( start, length )
3、substring( start, end )
JS对象,键值对:
var obj = {"键1" : "",
"键2" : function(){
}
};
可以通过键找到相关的值。
添加一个键值对:obj["a"] = "b";
JS函数。关键字 function。
function a(){ return b; }this 在函数内部this,就是返回当前调用对象本身。
如果是在js里调用可能就返回windows,如果是控件里调用就返回控件对象。
选择器:
1、ID选择器 document.getElementById()2、类选择器 document.getElementsByClassName()
3、标签选择器 document.getElementsByTagName()
4、Name选择器 document.getElementsByName()
.value 获取/赋值文本框或一切有value属性的值。
.innerHTML 获取/赋值某一个控件,并且可以使用HTML语法。
.innerText 获取/赋值某一个控件。不可以使用HTML语法。
自定义属性:就是为了方便自己设置获取某些值的属性。
.getAttribute 获取任一控件的属性
.setAttribute 赋值任一控件的属性。
另一种设置style的方式,简单:
document.getElementById("").style.color = "";
JS事件:DOM对象
1、全局的事件document.onclick = function(){
alert("1");
}
2、在外部监听的某个控件的事件。
document.getElementById("a").onclick = function(){
alert("123");
}
3、在控件内部监听事件。
<input type="text" onclick="" />
1、点击事件 onclick
2、失焦事件 onblur 失去焦点,常用于表格填写。
3、聚焦事件 onfocus
4、改变事件 onchange
5、鼠标移动事件 onmousemove
6、鼠标移入事件 onmouseenter 注意:需要表示一个控件
7、鼠标移出事件 onmouseleave
8、鼠标弹起事件 onmouseup
9、鼠标移动元素触发事件 onmouseout
10、鼠标移到元素上 onmouseover
11、键盘事件 onkeyup / onkeydown / onkeypress
keyCode = 回车 13
keyCode = 左 37 上 38 右 39 下 40
keyCode = 空格 32
- 前端、js基础
- JS前端基础-数据类型
- 【前端学习笔记】JS基础
- js基础.前端作业总结
- 【前端学习笔记】JS学习基础
- 前端基础笔记HTML&CSS&JS
- 前端学习 HTML、CSS、JS基础
- 从零开始,学习web前端之js基础
- 前端开发笔记(5)js基础
- 前端基础之JS(一)
- WEB前端 | JS基础——(1)JS初识
- WEB前端 | JS基础——(9)JS事件01
- 前端js面试技巧(1)——js基础部分
- Facebook前端框架React.js JSX语法基础
- WEB前端 | JS基础——(3)循环
- WEB前端 | JS基础——(5)字符串和时间
- WEB前端 | JS基础——(6)函数定时器
- WEB前端 | JS基础——(7)DOM
- SparkContext主要组成部分
- 有关c++对象模型的几个小问题
- 使用XmlPullParser
- 深入分析LinkedBlockingQueue
- Maven实战之旅第二篇——配置maven
- 前端、js基础
- jetty基本架构
- Guibs 的 Python学习_字符串
- HDOJ 3664 Permutation Counting / UVALive 5092 DP
- Java NIO系列教程(一) Java NIO 概述
- 【转】【書評】1984──喬治‧歐維爾
- ConcurrentHashMap原理
- FPGA开发流程:详述每一环节的物理含义和实现目标
- 【已解决】Android Studio下,gradle project sync failed 错误