JavaScript
文章平均质量分 74
lishichengyan
zju过气涂鸦爱好者
展开
-
动态创建HTML内容
1)document.write()用来向HTML中插入东西,例入:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Test document.write("this is inserted.")原创 2017-09-03 20:57:14 · 2664 阅读 · 0 评论 -
js入门:建立一个图片库
js入门小项目——实现一个非常简单的图片库。。。其实就是做一个可以切换图片的网页,先上代码:1)html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml.dtd"> Image Gallery Famous Pai原创 2017-09-01 00:00:30 · 1189 阅读 · 0 评论 -
js图片库——改进版
《JavaScript+DOM编程艺术》一书作者给前端程序员的忠告:1)留后路:在浏览器禁用js的时候基本功能要保证。href要设置成真实存在的url,慎用javascript伪协议,慎用弹窗。2)分离javascript:js代码单独写入一个文件,减少它对html的依赖,在html中尽量去引用它,而不是直接插入js。3)向后兼容:充分照顾旧版本的浏览器,在实现一些功能的时候多做判断。原创 2017-09-02 23:15:50 · 1422 阅读 · 0 评论 -
React学习:组件生命周期、组件间数据传递
注:本篇文章仅供个人日后复习,所以没什么干货,只起类似“备忘录”的作用。最近,在看《深入浅出React和Redux》,目前到第二章了,这是本章代码:(1)counter.jsimport React, { Component } from 'react';import PropTypes from 'prop-types';const buttonStyle = { margin: ...原创 2018-03-22 22:31:18 · 342 阅读 · 1 评论 -
理解react-redux的工作方式:从一个实例谈起
本文中的代码来自《深入浅出React和Redux》这本书,特此说明,在此也对作者的工作表示感谢。代码用react、redux结合的方式实现了一个计数器,我们一步步来看:1、入口import React from 'react';import ReactDOM from 'react-dom';import {Provider} from 'react-redux';import Contro...原创 2018-04-12 14:52:20 · 612 阅读 · 0 评论 -
js中的申明提升
仅用作自己复习,其实是搬运了别人的东西,参考:点击打开链接先看一个例子:alert(a);var a=233;浏览器会告诉我们a是undefined,如下图:要知道,undefined在js里是说一个东西未被定义,并不是错误。难道说js里的变量可以未经申明就使用?其实造成这种诡异现象的原因js的“申明提升”机制,概括起来就是:不管申明处在代码中的什么位置,它都是被js引擎最先处理的。也就是说,不...原创 2018-04-13 18:39:43 · 162 阅读 · 0 评论 -
React+Redux实现计数器
复习练手用。先回顾一下redux是怎么工作的:无状态组件负责渲染以及用户交互(比如点击),它只有props。store的state通过容器组件注入到无状态组件,引起重新渲染,容器组件可以派发action,引起store的state改变。容器组件通过connect函数创建,connect是一个柯里化函数,第一、二个参数分别指定state如何被映射到无状态组件的props,以及要派发的动作如何映射到无...原创 2018-05-11 23:29:23 · 1883 阅读 · 1 评论 -
关于JavaScript的addEventListener第三个参数的注记
这篇文章不错:点击查看转载 2018-09-29 19:51:29 · 175 阅读 · 0 评论 -
推荐两篇讲解JS事件循环的好文章
nodejs的事件驱动和异步I/O详解JavaScript中的Event Loop(事件循环)机制转载 2018-10-25 22:30:47 · 222 阅读 · 0 评论 -
图解JavaScript中的原型链
引言[1]:遵循ECMAScript标准,someObject.[[Prototype]]符号是用于指向someObject的原型。从 ECMAScript 6 开始,[[Prototype]]可以通过Object.getPrototypeOf()和Object.setPrototypeOf()访问器来访问。这个等同于 JavaScript 的非标准但许多浏览器实现的属性__p...原创 2019-04-28 20:52:46 · 151 阅读 · 0 评论 -
谈谈JavaScript中的this
1、函数调用(1)在严格模式下('use strict'),this是undefined。(2)非严格模式下,此时this默认是全局对象,在浏览器中就是window,因此下面的代码将打印true:function f(){ console.log(this == window);}f();由于非严格模式下函数调用时this总是被绑定到全局对象,于是有可能出现下面的问题:...原创 2019-04-28 20:17:18 · 268 阅读 · 0 评论 -
DOM的几个基本属性
1)childNodes返回一个数组,用来检索子元素。例子:function countBodyChildren(){ var body_element=document.getElementsByTagName("body")[0]; alert(body_element.childNodes.length);}window.onload=countBodyChildren原创 2017-09-01 11:12:57 · 587 阅读 · 0 评论 -
将动画效果用于网页制作
例子:1)html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Web Design Web Design These are the things you should know.原创 2017-09-07 23:41:56 · 262 阅读 · 0 评论 -
js图片库二次改进(动态创建HTML元素)
第一版:http://blog.csdn.net/lishichengyan/article/details/77759324第二版:http://blog.csdn.net/lishichengyan/article/details/77806701在学了动态创建HTML元素以后还可以进一步改进:1)HTML:去掉了placeholder和后面的p标签,改成在js里动态创建<原创 2017-09-03 21:51:49 · 200 阅读 · 0 评论 -
实现一个简单的网页(缩略词表、文献来源链接、快速访问键列表)
1)html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Explaining the Document Object Model Home Search Cont原创 2017-09-05 21:43:31 · 400 阅读 · 0 评论 -
谈谈style属性
DOM模型中每个节点都是对象,每个对象都有自己的若干属性,其中style是与CSS密切相关的。1)style属性本身也是对象。2)CSS属性和DOM脚本代码(js)可能会有出入,比如CSS中的font-family对应的js代码是fontFamily(类似地,DOM对CSS中的连字符都采取camel命名法的方式去处理)3)style只能检查内嵌样式,如果样式表是外部的,那么通过styl原创 2017-09-05 22:02:07 · 658 阅读 · 0 评论 -
CSS的一些基础(有待改进)
1)有三种方法来设置样式:①根据某个标签,如:p{...}②根据特定的class属性,如:.classname{...}③根据特定的id,如:#id{...}2)什么时候用DOM方法来设置样式?①比如需要根据相对位置来设置样式的时候,CSS不能很好地满足要求,这个时候可以考虑DOM方法://html<!DOCTYP原创 2017-09-07 13:03:13 · 269 阅读 · 0 评论 -
用js实现动画效果
例子:1)Animation.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> example of animation Whee!!! 2)addLoadEvent.jsfuncti原创 2017-09-05 21:56:33 · 844 阅读 · 0 评论 -
JavaScript基础:在HTML中插入js代码
之前在数据库里学过一些简单的html,最近在学js,复习一下。。如下: This is an Example xixi haha xixihaha xixihiahia这是一个简单的网页框架,开头的用来定义类型,其后的html表明类型是html。html中使用不同的标签来区分内容,标签总是成对出现,例如:...,中间可以嵌入你需要写的内容。不同的标签作用不同,原创 2017-08-30 17:17:16 · 5075 阅读 · 0 评论 -
一个js函数的改进(实现动画效果)
《JavaScript DOM编程艺术》一书中的东西,作者优化得很好了://实现动画效果:移动元素function moveElement(elementID,final_x,final_y,interval){ if(!document.getElementById){//检查浏览器是否支持这个方法 return false; } if(!document.getElementB原创 2017-09-09 21:02:08 · 249 阅读 · 0 评论 -
用JavaScript实现一个网页版贪吃蛇
原文在这里:http://www.cnblogs.com/guaidaodark/p/4471565.html感谢作者。。初衷是通过看别人写的小项目学习一下js,结果发现坑还是不小。。。关于DOM,一个可供参考的网站:http://www.w3school.com.cn/js/js_htmldom.asp后续会看《JavaScript+DOM编程艺术》。。不看书还是不行。。转载 2017-08-30 17:40:07 · 2392 阅读 · 0 评论 -
DOM中的四个基本方法
来自《Javascript DOM编程艺术》那本书。示例代码如下: Shopping List What to buy Don't forget to buy this stuff. A tin of beans Cheese Milk alert(typeof document.getElementById("perc原创 2017-08-31 22:55:27 · 482 阅读 · 0 评论 -
浅谈JavaScript的作用域链
其实很简单,就是JS引擎为了保证函数的有序执行搞的一个东西。首先了解变量对象(variable object,vo)和活动对象(activetion object, ao)的概念:1. vo是静态的,是JS引擎在分析代码是生成的,包含函数的变量声明、参数列表、函数声明。2. ao是动态的,是执行是生成的,包含函数的局部变量、命名参数、this指向等等,还有__parent__指向函数的...原创 2019-04-28 21:09:34 · 188 阅读 · 0 评论