cccttt10 / creativity-center Goto Github PK

GitHub URL: https://github.com/shaqiumeiying

Qs about HTML:

1. meta tag 的含义是什么？通常在什么情况下使用？
2. class="" 中的内容有特定的命名规则吗？
3. 我想要在title旁边插入一个icon, 是应该在HTML里面实现还是CSS里实现？如何实现？

Qs about JavaScript:

1. 如何知道function的return type? 设定return type是必要的吗？

  changeItemName: function(index, name) {
        this.items[index].name = name;
    },

2. items 后面的[index]是什么意思？ 一个list of index?

createItem: function(name) {
        if (typeof name === "string" && name.length > 0) {
            this.items.push({
                name: name,
                done: false
            });
        }
    },

3. 为什么"string“在引号里，在引号里的东西不就变成真正意义上的string了吗？以及单双引号的使用区别？

Qs about CSS:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

1. focus 有什么含义？

.content-div {
        max-width: 50vw;
    }
#create-item-form {
    display: inline;
}

2. ”.“ 有什么含义？ “#” 有什么含义？区别是什么？分别何时使用？
3. 在设置layout、margin等涉及到长度的模块时，有时会用rem,有时会用em,有时会用vw等.... 他们在显示上有何区别？自己写程序时该如何选择单位？

todo-list URL: shaqiumeiying.github.io/todo-list/
character-card URL: shaqiumeiying.github.io/character-card/

React是一个JavaScript Class Library，主要用于创建UI界面。

React 和我们之前学的 HTML/CSS/JavaScript 是什么关系，有哪些异同？

• 相同之处：
  · 同样都是构建WebPage的工具
  ·

• 不同之处：
  · 前者可辅助使用JSX，后者只使用JS
  · React 只需要处理Model-View-Controller框架中的View
  · 语法稍有不同
  · 像阅读资料中提到的，React只做必要更新。每当程序中一段状态被改变，JavaScript都会重新渲染整个页面。但是在
  React中对DOM只更新不读取, 使渲染速度大幅提升

我们为什么要学 React？

• React渲染速度快
• 拥有components and Props的概念, 可维护性高
• 兼容性、针对性强
• 出色的UI操作和数据维护

React 哪里比较难以理解？
Component划分，props的传递等

React难点
React 是关于沿组件层次结构向下流动的单向数据。有时候无法立即清楚哪个组件应该拥有什么状态，比较难以理解。

React 与之前我们学习的一些区别：
1.样式class的写法

        javascript: class

        react：className

2.创建虚拟dom的时候写法不同

js通过react特有的api创建，jsx是直接写html。 使用JSX，组件的结构和组件之间的关系看上去更加清晰。

3.变量（react变量是大括号，js是引号）

        javascript: onClick="clickSearch(e)"

        react：onClick={(e)=>this.clickSearch(e)}

4.资源的引入

传统html文件中css文件引用方式：

ReactJs中css文件引用方式：

直接采用require: @@require('./Category.css');

或者采用import: import styles from './Category.css';

js与jsx的联系：

渲染虚拟dom方式相同；
jsx中babel转换的就是虚拟dom，转换后就是js通过调用react的api创建的虚拟dom；因此可以把jsx创建虚拟dom的方式看为js创建虚拟dom.

我们为什么要学习React

组件化

使用 React 的好处是你可以创建 component，组件。然后可以把一个网站或者是应用上面的一些按钮、菜单等这些小一点的单元做成一个组件，这些组件可以在不同的地方去重复使用。而组件之间的变化是通过状态来改变的，你可以把这个状态想象成是一个触发器的开关，只要状态变了之后，那么 React 就会根据这些新的状态把这个组件在渲染一次，把它更新成新的。这个状态是由组件内部来管理的，那么在组件这么一个独立的单元里边，它负责自己的样式还有状态的改变，会使得开发很有逻辑。就不像是 jquery，如果你想改变哪个组件的状态的话，需要先找到这个组件，然后再手动的去改变它的状态。

效率高

React 开发效率高，就是因为有了这些组件。而且，这些组件可以作为未来你自己的一个样式库，在开发新的项目的时候可以拿过来直接就用，这样还能保持风格的统一。

url for Todo-list :
https://ymt520.github.io/To-dolist-final/

url for Gundam-display:
https://ymt520.github.io/Gundam/

JavaScript questions from homework 1:

Every time "this" occurs in a function from the controller section, does it mean that in the view section we need to use bind(controller)? Could we rewrite the function as bind(this.controller)?

Does Javascript have a testing section such as JUnit test that we use for Java? If not, is it true that we could only track our progress using live server?

url for Todo-list : https://rachel790.github.io/todo-list/

url for Shoe-display: https://rachel790.github.io/shoe-display/

JS
1.

this.items.forEach(allItemsDone ? markItemAsUndone : markItemAsDone);

"?"代表boolean的含义吗？
2.

        const createItemInput = document.getElementById('create-item-input');
        createItemInput.value = createItemInput.getAttribute('placeholder');
        const createItemForm = document.getElementById('create-item-form');
        createItemForm.reset();

是重新把ItemForm 重新设置成新的吗？
3.

 deleteItem: function(index) {
        this.items.splice(index, 1);
    },

为什么index是1？
HTML
1.关于格式，所有的div空格数都要对齐吗？
2.meta name 设置的值都是一样的吗

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

3.html 网页和手机上的效果都一样的吗
CSS
1.transition的作用是什么？
2.vw 是什么单位
3.vss 的overflow 是什么