前端知识小结

1.

var a=null==undefined?1:"abc";

var b=typeof(a);

var c=typeof(b);

var d=typeof(null);

console.log(a);

console.log(b);

console.log(c);

console.log(d);

写出a,b,c,d结果值

var a=null==undefined?1:"abc";//1

var b=typeof(a);//number

var c=typeof(b);//string

var d=typeof(null);//object

2.

<script type="text/javascript">

var s="aBaCaD";

var r1=s.relace("a","#");

var r2=s.replace(/a/,"#");

var r1=s.replace(/a/g,"#");

console.log(s);

console.log(r1);

</script>

写出s和r1,r2,r3的值

var r1=s.relace("a","#");//只替换第一个a,结果是:#BaCaD

var r2=s.replace(/a/,"#");//正则表达式,但也只是替换第一个a,结果:#BaCaD

var r1=s.replace(/a/g,"#");//正则表达式,全局替换。#B#C#D

 

3.

有字符串“15,30-40;50”,写JavaScript代码获得数值15,30,40,50.

<script type="text/javascript">

var myStr="15,30-40;50";

var pattern=/[0-9]{2}/g;//gloabl

var result=myStr.match(pattern);

for(var i=0;i<result.length;i++){

console.log(result[i]);

}

</script>

4.

<html>

<head>Test Question</head>

<style type="text/css">

.aBox{

width:100px;

height:100px;

background:#ffcc00;

}

</style>

<body>

<div>

<div class="aBox">

<div id="abc">This is a test content!</div>

</div>

</div>

</body>

</html>

通过方法取得class="aBox"的div的宽度和高度,并且设置其背景色为红色。

思路:1.使用JavaScript取得页面嵌入样式,动态改变元素的嵌入样式。

<!DOCTYPE>

<html>

<head>

<title>Test Question</title>

</head>

<style type="text/css">

.aBox{

width:100px;

height:100px;

background:#ffcc00;

}

</style>

<body>

<div>

<div class="aBox">

<div id="abc">This is a test content!</div>

</div>

</div>

<script>

window.onload=function(){

var abcDiv=document.getElementById("abc");

var aBoxDiv=abcDiv.parentNode;

var divWidth=0;

var divHeight=0;

if(aBoxDiv.currentStyle){

divWidth=aBoxDiv.currentStyle["width"];

divHeight=aBoxDiv.currentStyle["height"];

}else{

var styleArray=aBoxDiv.ownerDocument.defaultView.getComputedStyle(aBoxDiv,null);

divWidth=styleArray["width"];

divHeight=styleArray["height"];

}

console.log(divWidth);

console.log(divHeight);

//JavaScript动态修改"嵌入样式"

var oStyleSheet=document.styleSheets[0];

var oRule=oStyleSheet.cssRules[0];

oRule.style.backgroundColor="red";

}

</script>

</body>

</html>

5.谈谈你对Javascript代码的使用,优化方法。

常见的优化方法

1.将不是页面一加载就用到的JS放在body闭合之前。

2.合并多个JS文件

时间: 2024-08-02 20:42:48

前端知识小结的相关文章

web前端知识体系小结(转)

1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识--做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来.说干就干.上午我就开始在办公室画草图,乱七八糟的在那儿理思路. 大家不要害怕,其实下文中的这个知识框架要比草图中的好看的

JS闭包、作用域链、垃圾回收、内存泄露相关知识小结_javascript技巧

补充: 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的特性 闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变量不会被垃圾回收机制回收 闭包的定义及其优缺点 闭包 是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量 闭包的缺点就是常驻内存,会增大内存使用量,使用不当很容易造成内存泄露. 闭包是javascript

技术改变设计方式 设计师需要了解前端知识

国画中有句话,"画虎先画骨".对应到网页上,视觉效果只是一张皮,前端代码是支撑这张皮的骨,了解骨架是怎么长的,有助于设计出更合理高效的页面. 一.常见视觉效果是如何实现的 关于文字效果 文字自身属性相关的效果css中都是有相对应的样式的,如字号.行高.加粗.倾斜.下划线等,但是一些特殊的效果,主要表现为ps中图层样式中的效果,css是无能为力的.但是css也在不断发展,在css3中已经新增了文字阴影的效果,可惜IE6.7.8均不支持.所以,一些比较特殊的文字效果,依然只能通过图片来实现

最新最热门的Web前端知识技能盘点

项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目.我们可以通过协作的方式来共同维护这个项目.Git的历史记录也可以见证前端行业的一些变迁. 可视化效果 前端开发知识结构 前端工程师 浏览器 IE6/7/8/9/10/11 (Trident) Firefox (Gecko) Chrome/Chromium (Blink) Safari (WebKit) Op

为什么每个程序员都应该懂点前端知识?

[编者按]本文作者为 OneAPM 工程师李哲,文章主要介绍前端知识对于编程的必要性. 这里说的前端知识是比较通俗的前端知识,包括网页,桌面或移动端程序的界面,命令行程序的提示等等,即和用户进行交互的那一部分.我的工作经历中,很多人是不在乎这一部分的,更有很多人觉得这个很 low,在年初的时候,还听到一位这样说,"前端无非就是 Copy Paste",在前端技术发展这么迅猛的现在,还能说出这样的话,可见这个人的眼界是多么的狭小了,连冲他苦笑的时间都腾不出来. 由于工作内容的关系,大部分

前端知识图谱,你值得收藏

综合类 - [前端知识体系](http://www.cnblogs.com/sb19871023/p/3894452.html) - [前端知识结构](https://github.com/JacksonTian/fks) - [Web前端开发大系概览](https://github.com/unruledboy/WebFrontEndStack) - [Web前端开发大系概览-中文版](http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.h

MySql存储过程学习知识小结_Mysql

什么是存储过程: 存储过程可以说是一个记录集吧,它是由一些T-SQL语句组成的代码块,这些T-SQL语句代码像一个方法一样实现一些功能(对单表或多表的增删改查),然后再给这个代码块取一个名字,在用到这个功能的时候调用他就行了. 存储过程的好处: 1.由于数据库执行动作时,是先编译后执行的.然而存储过程是一个编译过的代码块,所以执行效率要比T-SQL语句高. 2.一个存储过程在程序在网络中交互时可以替代大堆的T-SQL语句,所以也能降低网络的通信量,提高通信速率. 3.通过存储过程能够使没有权限的

java中数组的相关知识小结(推荐)_java

1.  2.数组的命名方法 1)int[]ages=new int[5]; 2) int[]ages;     ages=new int[5]; 3)int[]ags={1,2,3,4,5}; 4)int[]ags;    ags=new int{1,2,3,4};    或者   int[]ags=new int{1,2,3,4}; 3.java不支持不同类型的重名数组 4.java中数组的循环赋值 package dierge; public class Shuzu { public sta

Android签名知识小结_Android

一.为什么要签名 开发Android的人这么多,完全有可能大家都把类名,包名起成了一个同样的名字,这时候如何区分?签名这时候就是起区分作用的. 由于开发商可能通过使用相同的Package Name来混淆替换已经安装的程序,签名可以保证相当名字,但是签名不同的包不被替换. APK如果使用一个key签名,发布时另一个key签名的文件将无法安装或覆盖老的版本,这样可以防止你已安装的应用被恶意的第三方覆盖或替换掉. 这样签名其实也是开发者的身份标识.交易中抵赖等事情发生时,签名可以防止抵赖的发生. 二.