[Powered by Google Translate] [Семинары] [JavaScript Программные каркасы: как и зачем] [Кевин Schmid] [Гарвардский университет] [Это CS50.] [CS50.TV] 

Привет, всем. Добро пожаловать на семинар JavaScript рамки. Меня зовут Кевин, и сегодня я буду говорить о рамках JavaScript, и целью данного семинара является не заставить вас, скажем, освоить конкретный каркас, как таковой но, чтобы дать вам более широкий подход к пару рамки и показать, почему мы никогда не хочу использовать рамки. 

Прежде чем сделать это, я приведу небольшой фон в JavaScript, а потом мы возьмем его оттуда. Мы собираемся начать с реализации To-Do List. Вот наш список задач на сегодняшний день. Это довольно забавно. Мы должны реализовать список дел в JavaScript. Это то, что это будет выглядеть, так что это наша первая цель. Мы не собираемся использовать рамки, чтобы сделать это. Мы собираемся кода JavaScript и получить список дел на работу. Затем мы собираемся улучшить дизайн без использования рамки. Мы собираемся, чтобы обсудить различные вещи, которые мы можем сделать только с JavaScript только , чтобы сделать наш список дел немного больше хорошо продуманы. Затем мы собираемся бросить в некоторых JQuery, и тогда мы будем смотреть на то же список дел, просто реализованы в различные структуры, и мы обсудим  плюсы и минусы по пути. 

Давайте начнем реализацию, что список дел. Допустим, нам дают это HTML. Я собираюсь сделать это немного меньше. Как видите, у меня есть маленький заголовок, в котором Todo и небольшую коробку, где я могу ввести описание TODO , а затем кнопку Создать элемент, так что давайте попробуем ввести новый TODO в этот список. Провести семинар JavaScript рамки, и я ударить новый элемент. Я получаю это предупреждение JavaScript, который говорит мне реализации. У нас есть для его реализации. Давайте проверим код этого, как HTML и JavaScript. Вот наш HTML. Как вы можете видеть здесь, здесь наш маленький заголовок Todos. Это было смелое, что вещь в верхней части, а то у нас в поле ввода с заполнителем, а затем есть определенный атрибут этой кнопке, которая вызывает эту функцию addTodo. Кто-нибудь хочет погадать, что щелчок означало? [Студенческие слышно ответа] Хорошо, по щелчку вроде как событие, как кнопки мыши просто событие, и что мы делаем как мы связывая случае нажатия на эту кнопку, чтобы выполнить эту функцию. AddTodo это обработчик события для нажатия этой кнопки. 

Как вы можете видеть, когда я нажимаю на кнопку Создать элемент на события нажатия увольняют, и эта функция вызывается. Давайте посмотрим на функцию. Как вы можете видеть, вот мой код JavaScript до сих пор. То, что я на самом верху глобальной структурой данных для моего списка дел. Похоже массива. Это просто пустой массив. А то у меня addTodo функция, которую мы видели ранее, и единственная строка кода в этом есть предупреждение. Он предупреждает осуществления меня, а потом у меня есть 2 задач. Я должен добавить, что предстоит сделать, чтобы, что глобальная структура данных, а затем я хочу, чтобы вытянуть To-Do List. Ничто также не представляет себе просто пока нет, но вы JavaScript могут быть незнакомы с, так что я собираюсь идти медленно и пересмотреть основы JavaScript таким образом. 

Давайте дадим этому выстрел. Допустим, пользователь вводит что-то в этой коробке. Я только что ввели что-то в этом тексте. Как отсортировать доступа, текст через JavaScript? Помните, что JavaScript, одна из его основных черт является то, что она дает нам это программный доступ к DOM. Это позволяет нам получить доступ к элементам и их свойствам этой актуальной HTML. Как мы делаем, что с голыми костями JavaScript это мы действительно можем использовать функцию JavaScript называется GetElementById. Я хочу сохранить текст, который набрал там в некоторую переменную, так что я собираюсь сказать, новую переменную по имени new_todo, и я собираюсь получить этот элемент. Это функция,. GetElementById. И теперь я получаю элемента по идентификатору, так что мне нужно идентификатор, что текстовое поле, поэтому я дал ему ID new_todo_description. Вот как я иду, чтобы получить элемент. Это мой аргумент этой функции, чтобы указать, какие ID получить. И таким образом, это элемент HTML, и он имеет свойства. Вы видели это. Они атрибуты. Атрибут элемента текста, который хранит введенные пользователем, называется значением. Я сохранил значение этого текстового поля сейчас в этой переменной new_todo. Теперь у меня есть программный доступ к этой переменной, которая круто потому что теперь, что я могу сделать, это я могу добавить его в свой список дел. 

То, как мы сделали бы это в JavaScript-и не волнуйтесь, если вы не знакомы с этим, но просто переживает это todos.push , потому что это имя моего глобальную структуру данных здесь, и я собираюсь нажать new_todo. Это очень удобно, потому что теперь я добавил его к моей JavaScript Представление, что список дел. Но теперь как я могу получить его обратно в HTML? Я должен найти способ сортировки из вставьте его обратно. Другими словами, я вроде должны обратить на это. То, что мы собираемся сделать, это мы собираемся сделать список дел. Мне нужно обновить другие HTML на этой странице, и как вы можете видеть, я оставил эту маленькую контейнер здесь, это делитель страницы с идентификатором Todos, и я собираюсь поставить список дел там. Сначала я иду, чтобы очистить его, потому что, скажем, был старый список дел там. Я получаю этот элемент по ID снова, и я доступ к внутренним HTML этого элемента, и я собираюсь понять, что. Если мы покинули этот код как есть, мы не увидели бы ничего, пустое, и теперь я хочу начать предоставление мой новый список дел. Я в основном собираются уничтожить мой список дел. 

Теперь внутренний HTML внутри этого DIV Todos совершенно ясно, и теперь мне нужно, чтобы начать добавлять моем списке. Первое, что я хочу добавить спина неупорядоченный список тегов, который в основном означает, что это начало неупорядоченный список. Теперь для каждого элемента в моем массиве Todos Я хочу напечатать его внутри этого HTML. Хочу добавить его к нижней части этого списка. Так же, как в C, я могу использовать для петли, и я собираюсь начать в начале моего списка на элемент 0, и я собираюсь пройти весь путь к длине списка. Мы можем реально получить длину массива в JavaScript по длине собственности. В основном, я собираюсь сделать что-то очень похожее внутри здесь распечатать этот элемент. Я могу снова получит доступ к Todos DIV, внутренний HTML свойство, что, и я собираюсь добавить на этом новый элемент списка, и что собирается быть в окружении этот тег Ли, и я собираюсь объединить при помощи оператора +, и это-го элемента массива из моих Todos, и тогда я иду, чтобы закрыть этот тег. Теперь для каждого элемента мы добавим новую запись списка. И тогда все, что мы действительно должны сделать, это закрыть этот тег. Мне просто нужно, чтобы закрыть, что неупорядоченный список тегов. 

Вы почувствуете, как это работает? Это открывает весь список. Это добавляет отдельные элементы из списка Todos в список, а затем, что закрывает весь список, и это мой addTodo функции. Я в основном Начните получать TODO из текстового поля. Я добавлю, что в массив Todos, а потом я вновь сделать список дел. Теперь я могу добавить элементы в моем списке. Это своего рода захватывающим, потому что всего несколько строк кода мы в основном сделаны список дел, где мы можем добавить элементы. Великий. Это вроде того, введение в JavaScript. Не слишком беспокоиться о синтаксисе сейчас, но думать об этом концептуально. У нас были некоторые HTML. У нас было текстовое поле на странице, которая в основном позволяет пользователям вводить элемент списка, чтобы добавить. А потом мы использовали JavaScript извлечь эту TODO от текстового поля. Мы сохранили, что внутри массива JavaScript, которые в основном, как наши программное представление, что список дел, и тогда мы распечатал его. Это todos.js. 

Это круто, но как мы можем принять это дальше? Ну, как вы можете видеть, это не как полный список дел. Я, например, не может отметить любой из этих элементов как неполные, как если бы я хотел изменить приоритеты пунктов или исключать пункты. Это хорошо, но мы можем взять этот вопрос. Я не буду говорить слишком много о добавлении дополнительных функций, но мы могли бы считать, что дальше. Давайте поговорим о добавлении еще одна особенность этой список дел, который будет возможности проверить индивидуальный элемент списка и это зачеркнуть, поэтому в основном говорят, что я сделал это. Давайте посмотрим на некоторые код, который может добиться этого. Обратите внимание, что я сделал на самом верху я добавил новый глобальный массив называется полным. Я в основном используют это, чтобы хранить ли детали на To-Do List полные или нет. Это один из способов сделать это. Если я смотрю на осуществление этого, дисплей, В основном, если я вхожу в TODO и я нажимаю эту кнопку-переключатель это перечеркивает, поэтому каждый пункт в этом списке либо полный или незавершенном состоянии, и я использую другой массив для представления этого. 

В основном, для каждого TODO в этом массиве Todos есть пункт в полный массив, который в основном означает, будь то полное или нет. У меня было довольно, чтобы сделать минимальные изменения в этот код, так вот наши addTodo функции. Обратите внимание, что здесь я выдвигаю его на массиве, а затем я выдвигаю, что от 0 до полного массива, в основном параллельно с этим новый толчок TODO сказать Я добавляю этот пункт, и это в сочетании с этого значения, что означает, что он оказался неполным. А потом я перерисовки To-Do List. Теперь обратите внимание, я добавил эту drawTodoList функции. Это занимает много кода, что было раньше, в основном очищает окна, а затем рисует новое список дел. Но обратите внимание, что внутри этого цикла мы делаем немного больше сейчас. Мы в основном проверки, является ли элемент, соответствующий й TODO здесь завершена, и мы себя по-разному в этих 2 обстоятельств. Если это полное, мы добавляем этот тег деле, который является в основном так, как вы можете получить, что через эффект удара вычеркивания список дел, если это полное, и если это не так, мы не включая его. И так, чтобы отчасти заботится об этом, 

и это один из способов для достижения этой цели. И обратите внимание на то, когда пользователь нажимает одну из этих мы переключаем состояние завершения его. Когда пользователь нажимает кнопку, мы будем обратная ли это были завершены или нет, и тогда мы будем перерисовывать его. Этот вид работ. У нас есть эти функции, которые выполняют свои собственные задачи, и это нормально. Есть ли что-нибудь, что мы могли сделать лучше об этом, правда? Обратите внимание, у нас есть эти 2 глобальных массивов. Если бы это был C, и у нас было 2 массивов такой представлены данных, который был своего рода связаны в некотором роде что бы мы использовать в C, чтобы объединить эти 2 поля в то, что инкапсулирует и частей информации? Кто-нибудь хочет внести предложение? [Студенческие слышно ответа] 

Именно так, чтобы мы могли использовать какие-то структуры, и если вы вспомните, скажем, PSET 3, помню, мы были словаря, а затем у нас было ли слово было в словаре, и все, что информация была собрана внутри некоторой структуры данных. Одна вещь, которую я могу сделать с этим кодом, чтобы избежать этих 2 разных массивах для аналогичных частей информации я могу объединить их в объект JavaScript. Давайте взглянем на это. Обратите внимание, у меня только один массив в верхней сейчас и то, что я сделал, и это только синтаксис JavaScript для рода создание буквальном версию объекта, и заметите, что есть 2 свойства, поэтому мы должны TODO, и он хранится вместе с ли это полным или неполным. Это очень похоже кода. Мы используем JavaScript объектов. Этот вид улучшает вещей. Как и сейчас, все эти поля соответствующей информацией содержатся вместе. Когда мы идем в распечатайте его, мы можем получить доступ к полям. 

Обратите внимание, как мы делаем Todos [I]. Полной вместо проверки полным набором отдельности, и заметить, когда мы хотим получить список дел строку мы получаем список дел собственности этого списка задач, поэтому этот вид имеет смысл, поскольку Каждая вещь имеет эти внутренние свойства об этом. Он имеет списка задач, и она имеет ли это полное или нет. Не слишком много изменений там функционально, просто добавили еще несколько, чтобы кода. Это улучшение на некоторых фронтах, не так ли? Я имею в виду, мы факторизовали дизайн немного. Теперь у нас есть объекты, чтобы в основном это инкапсуляции данных. Есть что-нибудь более мы могли бы сделать отсюда с точки зрения JavaScript? Нравится Обратите внимание, что этот код прямо здесь для получения внутреннего HTML из DIV Немного, я думаю, долго. Там в document.getElementById ("Todos»). Innerhtml. Единственное, что мы могли сделать, чтобы сделать этот код выглядит немного более доброжелательным так что я не должен держать прокрутки влево и вправо, назад и вперед, это я могу использовать библиотеку как JQuery. 

Давайте проверим Семинар 2, и это тот же самый код, но это делается с JQuery. Вы не можете быть слишком хорошо знакомы с JQuery, но просто знаю, что JQuery является своего рода библиотека для JavaScript что делает его легче делать такие вещи доступа к отдельным элементам DOM. Здесь вместо того чтобы сказать document.getElementById ("Todos»). Innerhtml Я могу использовать гораздо способом уборщицей в JQuery, который находится всего использовать селекторы. Как вы можете видеть, этот код действительно становился немного чище, очень похожи функционально, но это идея. Мы видели несколько вещей, до сих пор, поэтому мы начали только с сыром реализации JavaScript. Мы добавили новые функции и показал, как мы можем улучшить его с только то, что мы имеем в JavaScript. 

Кто-нибудь видит трудностей с этим проектом? А именно, я думаю, или не обязательно трудности, но скажем, Мы не делали список дел проекта, а завтра мы решили мы хотели сделать список покупок или проекта список покупок. Многие из этих функций очень похожи. Многие вещи, которые мы хотим выйти из JavaScript очень распространены, и это подчеркивает необходимость какой-то способ делает это легче сделать. Я должен был создать все это HTML доступа, все это доступ DOM, как я собираюсь представлять To-Do List с этой моделью. И заметьте, я отвечаю как разработчик JavaScript для хранения HTML и JavaScript, что у меня в синхронизации. Ничего, что автоматически становятся JavaScript представление или список дел получить вытеснены HTML. Ничто не насильственное что кроме меня. Я должен был написать ничья список дел функции. И это может быть не-Я имею в виду, что это разумно, чтобы сделать это, но это может быть утомительно иногда. Если у вас есть более крупный проект, который может быть затруднен. 

Каркасы одной из целей рамок заключается в упрощении процесса, что и вид из факторов эти общие-Я думаю, можно сказать-шаблонов проектирования что люди вообще есть какой-то способ представления данных, будь то список друзей, будь то карты информации или что-то или список дел. Некоторые люди имеют в целом способ представления информации и они в целом должны держать эту информацию рода в синхронизации между тем, что пользователь видит в какой-то зрения, Говоря с точки зрения, как модель контроллера мнение, что вы видели в лекции, и затем модель, которая в данном случае это массив JavaScript. Рамки дать нам возможность решить эту проблему. Теперь давайте взглянем на осуществление этого списка дел В рамках называемые angularjs. Вот и все. Обратите внимание, он подходит на слайде. Я не придется прокручивать влево и вправо. Это, вероятно, не одна причина, чтобы рекомендовать использование среды, Но обратите внимание, я когда-либо доступ к отдельным элементам HTML здесь? Имею ли я когда-нибудь в DOM? Видите ли вы document.getElementById или что-то вроде этого? Нет, это ушло. 

Угловое помогает нам держать DOM и JavaScript нашем представлении что-то вид в синхронизации, так что если это не в файле JS, если нет никакой возможности программно чтобы добраться до всех, что HTML содержания от JavaScript как мы Имея это в синхронизации? Если это не в. Файл JS, он должен быть в HTML, верно? Это новая версия HTML файла, и, заметьте, мы добавили много здесь. Заметите, что эти новые атрибуты, которые говорят, нг-клик и NG-повтор. Угловое подход к решению этой проблемы трудностей в дизайне является в основном делают HTML гораздо более мощным. Угловое это способ позволяет сделать HTML несколько более выразительным. Например, я могу сказать, что я собираюсь связать или связывать это текстовое поле переменной в моей Угловое кода JavaScript. Это нг-модель делает именно это. Это в основном говорит, что элемент внутри этого текстового поля, просто связать его с переменной new_todo_description в коде JavaScript. Это очень мощный, потому что у меня нет явного пойти DOM, чтобы получить эту информацию. Я не должен сказать document.getElementById. Я не должен использовать jQueries как доступ DOM. Я могу связать его с переменной, а затем, когда я изменить эту переменную в JavaScript он хранится в синхронизации с HTML, так, что упрощает процесс того, чтобы идти вперед и назад между ними. Имеет ли это смысл? 

И заметьте, нет никакого HTML код доступа. Мы только что сделали HTML более мощным, и сейчас, например, мы можем делать такие вещи, нравится, когда вы нажмете на эту, вызвать эту функцию в рамках todos.js, и мы могли бы сделать это и раньше, но есть и другие вещи, как этот НГ-модели, и заметить это нг-повтор. Как вы думаете, это делает? Вот наш неупорядоченный список, чем прежде. У нас есть уль тегов, но я никогда лишения этого списка внутри кода JavaScript? Я никогда не явно оказание этом списке. Как это работает? Ну, то, как выполняет это Угловое это называется ретранслятор. В основном, это говорит, что я хочу, чтобы распечатать эту HTML для каждого внутри TODO моего массива Todos. Внутри todos.jr есть Todos массиве прямо здесь, и это скажет Угловое пройти через это массив, и для каждого элемента вы видите Я хочу, чтобы распечатать эту HTML. Это своего рода удивительным, потому что я просто могу сделать это без того, чтобы написать цикл, который для списка дел, что составляло только 30 строк кода Не может быть наиболее выгоден, но если у вас есть большой проект, это могло стать очень удобно. 

Это одно решение этой проблемы, в результате чего HTML более мощными, и что позволяет нам держать JavaScript и HTML в синхронизации. Существуют и другие возможные способы решения этой проблемы и не каждый делает это рамки. Не каждый рамках работы в этом направлении. Некоторые структуры имеют различные подходы, и вы можете обнаружить, что вам нравится кодирования в одной рамки над другим. Давайте посмотрим на еще один. Это список дел закодированы в рамках называемые позвоночника. Я собираюсь пройти через это быстро. Я начну с HTML, прежде чем идти туда. Одна секунда. Начиная с HTML, как вы заметили, наш HTML очень похож к тому, что было раньше, так не слишком много нового на этом фронте. Но наш JS файл немного отличается. Магистральная вид имеет эта идея, или строится на идее , что многое, что мы делаем, скажем, с нашими проектами JavaScript это думать о моделях коллекции этих моделей. Это может быть, например, фотографию и коллекции фотографий, или идею друга и коллекций друзей. И часто, когда мы программируем JavaScript приложений мы вроде представляют идея иметь коллекцию друзей как-то в JavaScript, и Магистральная дает нам этот слой поверх существующей массивов JavaScript и объектов делать более мощные вещи, что более легко. 

Здесь я определил To-Do модели, и вы не должны слишком беспокоиться о синтаксисе, не заметить, что то, что одним из свойств этого? Она имеет поля по умолчанию. Магистральная позволяет мне задать уже с места в карьер любая Новое дело, что я создаю будет иметь эти значения по умолчанию. Теперь я могу настроить это, но, будучи в состоянии определить значения по умолчанию это хорошо, и это своего рода удобный, потому что это не то, что как присущих JavaScript, и теперь у меня нет явного сказать, что Todos являются неполными. Я могу сказать, с места в карьер, что Todos будут помечены как неполное. Обратите внимание на то что это? Теперь у меня есть список дел, и это коллекции. Обратите внимание на поле, связанное с моделью, которая говорит TODO. Это мой способ сказать, что Магистральная Я буду думать о коллекции этих отдельных Todos. В основном это модели структуры для моей программы. Здесь у меня есть эта идея коллекции, и в основном элементы, содержащиеся в этом сборнике все будем эти Todos, и что очень естественно в этом смысле потому что у меня есть Todos, и я их в коллекции. 

Давайте посмотрим на немного больше этого. Вот позвоночника зрения. Другая вещь, которая говорит Магистральная является то, что много моделей, которые вы думаете о или даже коллекции собираются нужно иметь какой-то способ отображаются. Нам нужно, чтобы сделать, что список дел, и не было бы неплохо, если бы мы смогли обеспечить для каждой модели или связать с каждой модели этой точки зрения , что позволяет нам я думаю соединить два вместе? Если раньше мы должны были использовать для цикла, который будет проходить через каждый TODO в нашем списке, а затем распечатать его здесь мы можем в основном связывают его с этой моделью. Это обзора дел. Это связано с TODO мы обнаружили ранее. Теперь каждый TODO является отображаемым или отображаемый этого обзора дел. Обратите внимание, некоторые поля. Как вы думаете, это тэг, имяТега: Ли? Помните из предыдущего, когда мы хотели оказать TODO мы должны были бы явно пару наших Todos с этим тегом Ли. Сейчас мы говорим, что это TODO где будет жить будет внутри тега Ли. И теперь мы также связывая события с нашими Todos. 

Каждый имеет TODO этому событию. Если вы нажмете в значительной степени кнопки-переключателя, это то, что я говорю, там, то в основном отмечают TODO как противоположное тому, что было раньше , а затем снова делает применение. Это своего рода похож на код раньше. Помните, когда мы отмечали его либо противоположного или- и тогда мы повторно вынес это решение. Но обратите внимание, сейчас это событие имело обыкновение быть то, что было в HTML. Он сидел там. Кнопка была на щелчком мыши. При нажатии на кнопку, он делает вид материала, чтобы создан, что TODO быть неполным. Здесь мы связаны, что события нажатия кнопки-переключателя, что и обратить вспять ли это или выключить с этой точкой зрения. 

Это хороший способ создания этого события, так что это очень тесно связаны этой точке зрения, и так заметить это еще один. У меня есть это метод визуализации, и мы не должны пройти через детали. Это отчасти похоже на то, что было раньше, не заметить, я не цикл через что угодно. Я не печатает, что уль тег, который вроде говорят, что я собираюсь напечатать все элементы. Я обеспечиваю функциональность для оказания этого элемента списка. Это очень мощная концепция, потому что в основном наш список дел состоит из всех этих Todos, и если мы можем указать в основном способ сделать одним из тех Тодос то мы можем иметь наш мощным магистральным таковой сделать все Todos путем вызова метода визуализации от индивидуальных Todos. Это концепция, которая будет полезна здесь. Сейчас хороший вопрос, чтобы спросить, как это приложение собираются вместе? Потому что у нас есть возможность оказывать друг TODO, но как мы можем получить представление о нескольких Todos? 

Давайте взглянем на это. Это последняя часть. Обратите внимание, у нас есть список дел зрения здесь, и заметили, что это также мнение. И перейти на несколько вещей, этого метода инициализации будет вызван, когда мы сначала создаем эту To-Do List. Как вы можете видеть, это как создание списка дел и связав его с этой точки зрения. А потом я добавил функции здесь, так в основном, когда при добавлении товара- это похоже на метод айсНЬет мы видели раньше- Я собираюсь создать новый объект TODO, и обратите внимание на самом деле я вызова этот новый метод TODO, так что это обеспечивается позвоночника, и я могу передать в моих свойствах здесь. И теперь каждый TODO, что я создаю с помощью этого получите, что функциональные возможности, которые мы видели раньше. Обратите внимание, я очистка текстового поля до-небольшая мелочь- а затем я добавляю эту коллекцию. 

Это почти кажется странным, потому что прежде, чем мы просто должен был сделать, что todos.push, а затем мы были сделаны, и это может показаться более сложным для этого конкретного проекта, и вы можете обнаружить, что Магистральная или даже углового или любые другие рамки не устраивает вашего конкретного проекта, но я думаю, что это важно думать о что это означает в более широком масштабе для более крупных проектов, потому что, если у нас был большой проект, где мы представляли некоторые действительно сложный сбор, нечто более глубокое, чем просто список дел, скажем, список друзей, или что-то вроде этого, это может пригодиться потому что мы могли организовать наш код в действительно удобный способ, таким образом, что будет легче для кого-то еще , который хотел забрать проект опираться. Вы можете видеть, что это предоставляет много структуру. И тогда я звоню оказывают на эту айсНЬет. Визуализация, как вы можете видеть, и вам не придется понять это полный синтаксис, но в основном для каждой модели он собирается вызывать отдельные метод визуализации. Это своего рода, где это происходит от. Давайте просто указать, как отображать отдельные Todos, а затем давайте склеить их вместе в целом. Но это дает возможность абстракции, потому что я мог изменить то, как я решу сделать индивидуальный Todos, и я бы не стал ничего менять в настоящего Кодекса. Это круто. 

Кто-нибудь есть какие-либо вопросы о рамках JavaScript? [Неразборчиво Студент вопрос] О, конечно, это большой вопрос. Вопрос был, как же я включать структур? Большинство фреймворков JavaScript в основном только JS файлы , которые можно включить в верхней части кода. Заметьте, что в головной части моей HTML У меня есть все эти теги сценария, и конечный тег скрипт код, который мы написали. А потом 3 коды рамки являются как раз и теги сценария. Я в том числе их от того, что называется сеть доставки, который позволяет мне получить его от кого-то другого в этой точке но каждый имеет рамках этого-вы можете очень многое найти содержание для конкретной библиотеки JavaScript доступна на некоторых CDN или что-то вроде этого, а затем вы можете включить эти теги сценария. Имеет ли это смысл? Круто. 

Те 2 различных подходов. Это не только подходы к решению этой проблемы. Есть много разных вещей, которые кто-то может сделать, и есть много рамок там. Угловое и позвоночник никак не рассказать всю историю. Удачи вам в ваших окончательных проектов, и большое спасибо. [CS50.TV]