上次讲到css样式的几种加载方式,后来又去查了下关于javascript的基本内容,这里稍微记录下笔记
认识完 css 后,当然要了解下 javaScript 这个相当于Android的逻辑处理部分的内容。
javaScript 是Html里面的逻辑代码部分,用于对Html中的一些数据进行处理
JavaScript使用方式
- 内部使用,在HTML 内部通过 < script>定义 ,一般我们都会在< head>标签内定义
栗子
<script>
alert("Test JavaScript");
</script>
- 内联使用,在标签内部使用javascript代码
羞涩的栗子
<a href="javascript:alert(‘标签内部使用的哦‘)">点我!</a>
<a href="#" onClick="myf()">点我!!</a>
上面,第一种是直接在标签中使用javascript代码,第二种其实是调用现有的javascrpit写好的方法使用
- 外联使用,在 < head>内部使用存放在外部的js文件内容
成熟的栗子
<head>
<script src="xxx.js"></script>
</head>
src中的路径是你项目中js对应的存放路径
JavaScript的格式
说完javascript的导入使用方式,现在说下它的格式吧
- 属性
javaScript的属性比较单一, 不像其他语言,有什么Integer String Boolean 等等,JavaScript的属性只有 var 相当于 Android的 Object
注意事项: 在JavaScript中 var n = 1; 是可以省略掉 var 直接写 n = 1 来声明变量,但是 所有没有用var 来声明的对象都会被当做全局变量来使用。
尽量在变量前增加var声明,以确保变量不会被当成全局变量重复应用。
尤其是在存在递归调用的函数中,特别要注意用var声明循环变量,否则的话递归调用会因为变量被递归修改而产生意想不到的错误,很难调试和查找。
- 方法
javaScript 的 方法 都是以 function 开头 , 加一个方法名 有参数的话 加一个参数名即可,因为只有一个var类型,所以不用定义参数的类型,至于返回值,不需要特别的定义,无论有没有都不用去定义,有的话直接在方法中return
还是栗子
<script>
//javascript 方法构造
function show()
{
var i = "soso";//声明一个方法内部的局部变量
alert(i);//弹出dialog
return false; //返回值
}
</script>
JavaScript的打印输出
一般开发的时候,我们都需要一些提示,所以需要代码对外输出一些内容作为参考提示,javaScript也有很多输出方式,这里我记录两种
- 文档打印输出
document.write方法
var mytext = "Hello again";
document.write(mytext);
这种方法是想页面中打印输出内容,缺点是会覆盖掉页面原来的内容
- 控制台打印输出
console输出,该输出有很多种方法类似Android的Log输出
Console.log() 是最简单输出信息到 console 窗口的方法,除了console.log(),还支持多种不同的日志级别:debug、info、warn、error。
console.log(“Log level”);
console.debug(“Debug level”);
console.info(“Info level”);
console.warn(“Warn level”);
console.error(“Error level”);
不同日志级别的打印信息,其颜色和图标是不一样的;同时,可以在控制台中选择不同的日志级别来对这些信息进行过滤:
javaScript 就告一段落吧 ,以上都是我学习过程中认识到的内容,可能会与大家认识有点点不同,毕竟我是初学,还请大家见谅
div 与 span
在布局的时候,认识到了div,看到网上很多demo都大量使用这玩意,所以我也好奇的去模仿了下,但是发现用起来还很别扭,仔细查阅才发现div有一些小特性
- div本身默认的样式属性是独占一行的
由于这个小特性,导致我在使用多个div的时候出现了各自占据一行,完全没办法布局
解决方法
- 修改div样式中布局方式为float
或者
- 将div的display属性修改为 inline //在一排显示
与div独占一行的风格不一样的是span
- span自适应其包裹内容的宽度
注意: 因为其自适应宽度的属性,部分CSS3样式对其无效,例如什么宽度的设置什么的.. 统统无效
设置div的时候 比较常见的问题是如何让div水平居中和垂直居中
- 水平居中
- 首先让div的父标签设置text-align:center;样式
- 其次设置div的样式内容 margin-left:auto; margin-right:auto;
- 垂直居中
- 设置div 的 line-height:高度值;
- 设置div 的 vertical-align:middle;
最后记录下,常用的一个事件方法,在android中布局也是最常用的
// 返回上一页
function back(){
history.go(-1);
}
好了,今天的笔记就到这里 初学者奉上