As we know, HTML defines the content of a page.
Now that we know how to replace text,
we can replace placeholders in HTML with real data.
After that, we just need to append HTML strings to start building our resume.
>> Let's look inside helper.js, which through the magic of computers we
have over here on this side of the screen.
It contains some helper data that your project will take advantage of.
Because helper.js shows up before resumebuilder.js, which you can't see,
but it's way down here at the bottom of the screen.
It will load first, and we'll have access to all the data from helper.js,
when we start writing resumebuilder.js.
We can see a few string variables here,
Ike HTML mobile, HTML email and HTML twitter.
Each of them has a percent, data percent place holder.
Here and here.
And each of those will be replacing %data% with our actual data.
>> So how are they going to replace %data%?
>> The same way we replaced awesome with fun, using the replace method.
>> Let's see it.
>> Let's say I wanted my properly formatted name to appear on the page.
In that case,
I first need to create a new variable that stores HTML with my data.
I'll save a variable called formattedName and set it equal to
HTMLheaderName.replace, %data%,
and pass in a variable storing my name.
Then I will pin the formattedName to the header.
Voila.
There's my formatted name.
>> Very cool.
.كما نعلم، فإن HTML تقوم بتحديد محتوى الصفحة
،والآن، وقد عرفنا كيفية استبدال النص
.فيمكننا استبدال العناصر النائبة في HTML ببيانات حقيقية
.وبعد ذلك، سنحتاج فقط إلى إرفاق سلاسل HTML في النهاية للبدء في وضع سيرتنا الذاتية
>> دعونا نلقي نظرة داخل helper.js حيث يتم ذلك من خلال سحر أجهزة الكمبيوتر التي
.لدينا هنا على هذا الجانب من الشاشة
.فهي تحتوي على بعض البيانات المساعدة التي سيستفيد منها مشروعك
،ولأن helper.js يتم عرضها قبل resumebuilder.js والتي يتعذر عليك مشاهدتها
.ولكنها موجودة بطريقة ما هنا في الأسفل في نهاية الشاشة
،وستقوم بالتحميل أولاً وسيكون لدينا حق الوصول إلى جميع البيانات من helper.js
.عندما نبدأ في كتابة resumebuilder.js
ويمكننا مشاهدة القليل من متغيرات السلاسل هنا مثل
.رقم الهاتف بـ HTML والبريد الإلكتروني بـ HTML وعنوان Twitter بـ HTML
.ولكل منهم نسبة وعنصر نائب لنسبة البيانات
.وهي موجودة هنا وهنا
.وسيقوم كل واحد من تلك باستبدال %data% ببياناتنا الحقيقية
>> لذا كيف سيقوموا باستبدال %data%؟
.>> فهي الطريقة نفسها التي نقوم بها باستبدال الروعة بالمرح باستخدام أسلوب الاستبدال
.>> ودعونا نرى ذلك
.>> ودعونا نقول أني أريد ظهور اسمي المنسّق بشكل ملائم على الصفحة
،وفي هذه الحالة
.فأنا أريد فقط إنشاء متغير جديد يقوم بتخزين HTML مع البيانات الخاصة بي
وسأقوم بحفظ متغير يطلق عليه formattedName وتعيينه
ليساوي HTMLheaderName.replace و%data% وتمرير ذلك
.إلى متغير يقوم بتخزين اسمي
.وبعد ذلك، سأقوم بتثبيت formattedName في الرأس
.وها هو ذا
.ستجدون اسمي المنسّق
.>> فيا له من أمر رائع
HTML은 페이지의 내용을 정의합니다
텍스트를 바꾸는 법을 배웠고
placeholder를 실제 값으로 바꿀 수 있어요
HTML 문자열만 append 하면
이력서를 만들 수 있다는 거죠
>>helper.js를 한번 볼까요
이쪽 화면을 보면 마법 같지 않나요
여기에 프로젝트를 도와줄 정보가 있습니다
helper.js가 저 아래의 resumebuilder.js보다
먼저 나오기 때문에
resumebuilder.js를 쓸 때는 helper.js의 모든 데이터를
사용할 수 있어요
문자열 변수가 보이네요
HTML mobile, HTML email
그리고 HTML twitter 같은 것들이요
각 문자열 변수는 %data%라는
placeholder을 가지고 있어요
여기랑 여기에요
%data%는 실제 데이터와 바뀔 거예요
>>어떻게 바뀌는 건가요?
>>awesome을 fun으로 바꾼 것처럼
replace 메소드를 쓰는 거죠
>>봅시다
>>제 이름을 올바른 형식으로 페이지에
나타나게 하려면
새로운 변수를 만들어서
제 데이터를 가진 HTML을 저장해야겠죠
formattedName이라는 변수를 저장하고
=HTMLheaderName.replace("%data%", )
를 입력하고
그 안에 이름이 저장된 변수를 넣습니다
그리고 formattedName을 header에 고정시키겠습니다
자 보세요
제 이름이 제대로 나타났네요
>>정말 근사해요
Como sabemos, o HTML define
o conteúdo de uma página.
Agora que sabemos como substituir texto,
podemos substituir os espaços
reservados no HTML por dados reais.
Depois disso, precisamos anexar strings HTML
para começar a criar nosso currículo.
Vamos ver dentro de helper.js,
que graças à mágica dos computadores,
temos aqui deste
lado da tela.
Ele contém alguns dados auxiliares que
serão aproveitados pelo seu projeto.
Como helper.js é mostrado antes
de resumebuilder.js,
que você não pode ver,
mas está aqui
na parte inferior da tela,
ele será carregado primeiro, e teremos acesso
a todos os dados de helper.js,
quando começarmos a escrever resumebuilder.js.
Podemos ver algumas variáveis de string aqui,
como HTMLmobile,
HTMLemail e HTMLtwitter.
Cada uma delas tem um espaço
reservado %data%.
Aqui e aqui.
E cada uma delas substituirá %data%
pelos nossos dados reais.
Como elas vão substituir %data%?
Da mesma forma que substituímos "awesome" por "fun",
usando o método replace.
Vamos ver.
Digamos que eu quisesse que meu nome corretamente
formatado aparecesse na página.
Nesse caso, primeiro preciso criar
uma nova variável
que armazene HTML com meus dados.
Vou salvar uma variável chamada formattedName,
defini-la como igual a
HTMLheaderName.replace, %data% e passar
uma variável armazenando meu nome.
Em seguida, vou fixar
formattedName no cabeçalho.
Aqui está.
Meu nome formatado.
Muito legal.
Як ми знаємо HTML визначає зміст сторінки
Тепер коли ми знаємо як замінювати
текст
ми можемо замінити вказівники в HTML
на дійсну інформацію
Після цього нам потрібно буде додати до
HTML рядки аби почати будувати резюме
>>Давайте оглянемо helper.js який за
допомогою комп'ютерної магії
висить на цій стороні єкрану
він містить деяку допоміжну інформацію яку
використає проект
Тому що helper.js йде після
resumebuilder.js котрий ти не бачиш
проте він тут в кінці сторінки
Він завантажиться першим і в нас буде
доступ до інформації helper.js
коли ми почнемо писати resumebuilder.js
Ми бачимо декілька рядкових змінних
як HTML mobile HTML email та HTML twitter
Кожний з них має %data%
Тут і тут
І кожний із них буде замінювати %data% на
нашу інформацію
>>Та як вони замінять %data%?
>>Так же як ми замінювали слова awesome на
fun використовуючи string.replace
>>Давай це спробуємо
>>Нехай я хочу аби правильно
відформатоване ім'я з'являлося на сторінці
В цьому випадку
Мені потрібно створити нову змінну яка
зберігає HTML із моєю інформацією
Я збережу змінну formattedName та надам
їй значення рівне
HTMLheaderName.replace(%data%, name)
та передам їй змінну із моїм іменем
Потім прикріплю formattedName до хєдера
Вуаля
Ось і моє відформатоване ім'я
>> Дуже круто
我们知道 HTML 定义了页面的内容
也了解了文本替换的方法
HTML 里的占位符可以用真实数据替换
只要再加些 HTML 字串就能建好我们的简历
来看 helper.js 我们获取了其中内容
并置于屏幕的右侧
里面包含有你所需的帮助数据
因为 helper.js 出现在 resumebuilder.js 之前
后者在下面 你暂时看不到
它先被载入 我们能访问 helper.js 中的所有数据
下面来写 resumebuilder.js.
这里有几个字符串变量
比如 HTML mobile HTML email 和 HTML twitter
几个变量都含有 百分号-数据-百分号 格式的占位符
看这些地方
这些占位符最后都会由实际数据替代
那么我们如何完成替换过程?
跟之前用 fun 替换 awesome 一样 调用 replace 方法
让我们来看看
比如想要我的名字出现在这里
这种情况下
先新建一个存储 HTML 数据的变量
给变量起名 formattedName
赋值为 HTMLheaderName.replace %data%
再传入存储我名字的变量
再然后把我的名字加到头部
好了
一切搞定
很酷