Tip:
Highlight text to annotate it
X
>> ROGER ZURAWICKI: Xin chào tất cả mọi người.
Tôi có thể nhận được sự chú ý của bạn?
Cảm ơn mọi người.
Hôm nay tôi muốn nói về sao băng.
Đó là một khuôn khổ JavaScript.
Chúng tôi sẽ đi qua như thế nào bạn có thể làm cho các ứng dụng web thực sự mát mẻ.
>> Trước khi chúng tôi nhận được vào JavaScript, tôi chỉ muốn nói với các bạn rằng điều này sẽ
được - bạn sẽ có một sau mảnh trong học kỳ này.
Nó phải là về JavaScript.
Tôi nghĩ rằng [không nghe được] là lần đầu tiên đi bao gồm các công cụ web PHP HTML trước khi chúng tôi
di chuyển đến JavaScript.
Và trong CS50, JavaScript được coi là giống như một mã số khách hàng.
Vì vậy, nó chỉ được chạy trong trình duyệt web.
>> Nhưng nhờ có những tiến bộ gần đây trong công nghệ, chúng ta đã quản lý để chạy
JavaScript là một máy chủ.
Vì vậy, điều này đã tạo ra một thực sự mát mẻ khuôn khổ bởi vì bây giờ bạn có thể viết
hợp pháp các mã tương tự cho khách hàng và máy chủ.
Và khi bạn xác định chức năng trong bạn máy chủ, khách hàng của bạn có thể gọi những
cùng chức năng.
Và nó làm cho nó dễ dàng hơn nhiều.
Trong khi trước đó, nếu bạn đang sử dụng PHP trên máy chủ, JavaScript trên mặt trước
kết thúc, bạn phải viết một hàm PHP và sau đó một phiên bản JavaScript
cùng chức năng để làm cùng một loại công việc.
>> Vì vậy, trước khi chúng tôi bắt đầu, tôi muốn để cho bạn thấy một bản demo của những gì
Sao băng có thể làm cho bạn.
Tôi sẽ chỉ cho bạn các bản demo, mà là những gì bạn sẽ có thể tạo ra bởi các
kết thúc buổi hội thảo này.
Chúng tôi chỉ cần đi ngay đây.
Đây là một ứng dụng Leaderboard.
Nó thực sự dựa ra khỏi ví dụ Meteor cung cấp cho bạn.
>> Sao băng là rất tốt đẹp bởi vì khi bạn cài đặt nó như là một gói phần mềm, bạn có thể
về cơ bản chơi xung quanh với bốn trình diễn.
Và Bảng dẫn là đầu tiên của những bản demo này.
Sau buổi hội thảo, tôi khuyến khích tất cả các bạn chỉ khám phá những bản demo khác
bởi vì tôi nghĩ rằng họ đang thực sự mát mẻ, và họ chỉ cho bạn sức mạnh của Meteor.
>> Vì vậy, đây là những gì, đây là lưu trữ trên Leaderboard.
Đây chỉ là thẳng thắn một danh sách các tên.
Và bạn có thể chọn người.
Họ chuyển sang màu vàng.
Và sau đó bạn có thể cho họ năm điểm.
Và bạn sẽ nhận thấy rằng danh sách là sắp xếp bởi vì như tôi cho bản thân mình hơn
và điểm nhiều hơn, bây giờ tôi ở đầu trang.
Vì vậy, đây là nơi mà chúng tôi bắt đầu.
>> Và những gì bạn sẽ có thể lấy đi từ hội thảo này là một vài
tính năng mà tôi đã thêm vào Bảng dẫn.
Chúng tôi sẽ được bao gồm làm thế nào để, cũng như thêm năm điểm để một cầu thủ, chúng ta có thể
xóa các cầu thủ, chúng ta có thể thêm cầu thủ mới, và chúng ta có thể lựa chọn như thế nào chúng ta muốn
sắp xếp chúng.
Và đây là tất cả các cuộc gọi API rất dễ dàng Meteor cung cấp cho bạn.
Bạn cũng có một tính năng ở đây để ngẫu nhiên các điểm số.
>> Vì vậy, những gì thực sự mát mẻ về điều này là các bạn có thể thực sự
tất cả đi đến các trang web.
Tôi sẽ đặt nó trong văn bản lớn hơn ở đây.
Một gốc tự do dẫn erboard.meteor.com.
Và khi các bạn hãy vào trang web, bạn nên có thể chỉnh sửa các trang web, và
tất cả các sửa đổi của bạn sẽ được hiển thị để tất cả mọi người khác.
Vì vậy, bạn có thể - là các bạn tất cả có thể kết nối với các trang web?
Vì vậy, chơi đùa với nó.
Đi và bắt đầu xóa một số tên.
Xem những gì sẽ xảy ra.
>> Vì vậy, bạn thấy tất cả mọi người có thể chơi.
Đây chỉ là bảo mật mặc định chế độ cho Meteor.
Bạn thấy rằng tất cả mọi người có thể thay đổi dữ liệu của nhau.
Đừng lo lắng.
Sao băng không có an ninh.
Đây là một thực hiện rất dễ dàng tính năng, nơi bạn có thể thiết lập người dùng
và thông tin đăng nhập.
Nhưng ngay bây giờ, bất cứ ai thăm trang web có thể cung cấp cho mình nhiều
chỉ như họ muốn.
Vì vậy, tôi luôn luôn như thế này bởi vì đây là một cách thú vị để bắt đầu.
Và sau đó chúng ta sẽ nói chuyện về các chi tiết, làm thế nào
Sao băng làm này có thể.
>> Vì vậy, tôi sẽ bao gồm những gì Meteor là, và sau đó chúng tôi sẽ chỉ cần để trang trải các
hai điều kiện tiên quyết CS50 đã không đủ bao phủ.
Nhưng vào cuối thời hạn, bạn nên được thoải mái với cả HTML và
JavaScript để thực sự có được bàn tay của bạn bẩn làm việc với Meteor.
Và tôi nghĩ rằng nó chỉ là một cách tuyệt vời cho thậm chí còn ít thoải mái sinh viên làm
dự án cuối cùng bởi vì họ có thể thực sự ở trong một ngôn ngữ, và họ nhận được để
xem các thay đổi của họ làm việc ngay lập tức.
>> Vì vậy, trượt này cho thấy một số công nghệ chính Meteor JS
mang lại cho bạn.
Sao băng không phải là một công nghệ mới ngày của riêng mình.
Nó thực sự là một kết hợp của những tất cả những điều khác nhau
chúng tôi có trên internet.
Cũng như HTML, CSS, JavaScript, chúng ta có một số công nghệ như Node.js,
đó là những gì cho phép bạn chạy JavaScript trở lại vào cuối ngày của bạn
máy chủ, cũng như một số JavaScript thư viện, như jQuery, gạch dưới.
>> Tất cả trong số này sẽ được quen thuộc với bạn vào cuối học kỳ.
Và chúng tôi cũng nhận được để sử dụng một cơ sở dữ liệu được gọi là MongoDB, mà là một thực sự
cơ sở dữ liệu phổ biến hiện nay cho những khởi động mới.
Bạn có thể nghĩ về nó như như MySQL, nhưng nó hoạt động rất độc đáo với JavaScript.
Và có một số công nghệ khác ở đây và nhiều hơn nữa tôi đã không được liệt kê
rằng tất cả các giao diện thực sự độc đáo với Meteor.
>> Tôi có phải đặt slide này vì đôi khi tôi nhận được sự nhầm lẫn về điều này.
Sao băng chỉ là JavaScript.
Nó không phải là PHP.
Nó không phải là Ruby on Rails.
Vì vậy, nếu bạn viết mã, nếu bạn muốn viết dự án Meteor, bạn thực sự
không thể sử dụng mã Ruby.
Bạn thực sự không sử dụng PHP.
>> Trong khi chúng ta sẽ thấy sự khác biệt trong mã số và cú pháp có thể không được mà
khác nhau, tôi muốn nhấn mạnh với các bạn rằng Sao băng, tất cả mọi thứ bạn đang
chỉ trong JavaScript.
Và tất cả mọi thứ mà bạn hiển thị để người sử dụng sẽ được HTML CSS.
Nhưng bạn không thực sự sử dụng bất kỳ các ngôn ngữ khác mà khác
hội thảo có thể trang trải.
Những gì Meteor cũng là một máy chủ web.
Vì vậy, ngay cả khi bạn không có bất kỳ JavaScript, và bạn chỉ muốn phục vụ
CSS và HTML, Meteor có thể làm điều đó cho bạn.
>> Và đây là liên kết một lần nữa để bản demo mà tôi nhận được các bạn
bắt đầu chơi với.
Nhưng chúng ta hãy chuyển sang HTML.
Có bao nhiêu người ở đây có không biết HTML là gì?
OK tuyệt vời.
Và đó là hoàn toàn tốt.
Bạn thực sự không cần phải biết nhiều về nó bởi vì chúng ta sẽ đi qua
sử dụng rất đơn giản.
>> Đây là những gì đơn giản Trang HTML như thế nào.
Điều này có thể như bạn xin chào, thế giới HTML, trong khi chúng tôi bắt đầu trong C với
hello, thế giới.
Tôi không muốn bạn phải nhấn mạnh trên thông tin chi tiết về những gì HTML, những gì đầu, những gì
cơ thể, những gì tiêu đề là làm ở đó.
Tôi chỉ muốn nhấn mạnh cấu trúc, làm thế nào bạn có thẻ.
Và đó là dấu ngoặc nhọn.
Và đó là nơi bạn có mô tả của bạn.
>> Vì vậy, bạn có thể có các tài liệu HTML.
Và sau đó bạn sẽ đóng tài liệu HTML với dấu gạch chéo ngược cùng một điều.
Và bạn có các loại thẻ.
Và nhận thấy rằng tất cả chúng xuất hiện.
Bạn sẽ phải như một thẻ cơ thể và sau đó một thẻ cơ thể gần.
Và bên trong thẻ cơ thể, đó sẽ là các nội dung của trang web của bạn.
Vì vậy, trang web này sẽ chỉ hiển thị trên nền trắng và văn bản màu đen
hello, thế giới.
Điều đó làm cho tinh thần?
OK.
>> Bây giờ tôi sẽ nhanh chóng bao gồm JavaScript.
Theo lời của một TF trước, "JavaScript là lập trình tốt nhất
ngôn ngữ hiện đang tồn tại.
Những người khác sẽ cố gắng nói với bạn khác.
Họ sai. "JavaScript là khá tốt đẹp, và tôi sẽ chỉ cho bạn biết tại sao.
>> Vì vậy, đây là một ví dụ cổ điển chúng ta bắt đầu với trong C. Chúng tôi có hello, thế giới.
Và bạn nhận thấy rằng ngay cả khi bạn thu nhỏ nó, bạn phải có ít nhất hai
dòng mã ở đây.
Tôi có một vài dòng mã.
Điều này có thể được thực hiện rất đơn giản.
Một dòng trong JavaScript với console.log, và sau đó chuỗi của bạn,
hello, thế giới.
>> Bây giờ, mặc dù chúng ta đang di chuyển đến một mới ngôn ngữ JavaScript, gần như tất cả các
kỹ năng bạn đã học được bằng cách mã hóa trong C trực tiếp cầm tay.
Vì vậy, chuỗi, ý tưởng của chuỗi trong dấu ngoặc kép, đó là cùng.
Dấu chấm phẩy, đó là cùng.
>> Một tính năng gọn về JavaScript thực sự là bạn
không cần dấu chấm phẩy.
Nó có thể đoán rằng bạn nên đặt một dấu chấm phẩy ở đó.
Nhưng mà nói, bạn nên luôn luôn cố gắng đặt dấu chấm phẩy của bạn ở đó.
Nó được coi là phong cách tốt.
Và cũng không có chức năng chính.
Bạn chỉ cần bắt đầu ở đầu của tập tin và đọc những điều từng dòng.
>> Thì đây là những gì nó cần để làm cho mà hello, chương trình thế giới.
Và sau đó thông báo rằng bạn phải thực hiện chào và sau đó chạy hello.
Với JavaScript, nó được coi là một ngôn ngữ giải thích.
Những gì bạn cần biết là không có định.
>> Không có biên dịch.
Bạn chỉ cần chạy nút.
Và nhớ nút là chương trình sẽ chạy JavaScript trên một giao diện điều khiển,
trên một hộp đen, không phải là trang web.
Vì vậy, bạn chỉ cần cho nó các tập tin, và nó sẽ in hello, thế giới.
>> Tôi thực sự sẽ làm một bản demo ít mà cho các bạn ngay tại đây.
Vì vậy, hãy đi qua tôi Thiết bị đầu cuối Node.js.
OK.
Hãy di chuyển ở đây.
Vì vậy, tôi sẽ bắt đầu nút.
Và tôi sẽ cho các bạn thấy chỉ một giây làm thế nào để có được điều đó
cài đặt, nếu bạn không.
Hãy để tôi làm đó lớn hơn một chút.
OK.
Tôi hy vọng các bạn có thể nhìn thấy.
>> Vì vậy, tôi có thể viết mã như tôi đã làm trước trong console.log.
Hi, Roger.
Và nhận thấy tôi không cần phải làm dấu chấm phẩy, nhưng sau đó tôi nhận được điều này lạ
điều không xác định.
Vâng thực sự, không bao giờ bận tâm về điều không xác định.
Điều tôi muốn bạn chú ý là bạn không cần các chức năng chính ở đây
để bắt đầu chạy mã.
Và không có kết thúc dấu gạch chéo ngược.
Có một số tính năng nhỏ mà JavaScript có thể làm cho bạn.
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Oh yeah.
Tôi xin lỗi về điều đó.
Và mũi tên mà chỉ có nghĩa là nút đã sẵn sàng cho một lệnh.
Vì vậy, bạn có thể có nó làm đơn giản toán học, như 1 cộng với 1.
Và cũng giống như trong C, các toán biểu tượng này chỉ giống nhau.
Tôi có thể làm console.log của một số.
Và sau đó nó in hai.
JavaScript là tốt đẹp trong ý nghĩa đó vì mặc dù hai là một int,
như trong C, nếu bạn đã printf với hai, bạn sẽ nhận được một lỗi.
>> Nhưng JavaScript biết, oh, bạn in một cái gì đó.
Tôi sẽ cần một chuỗi.
Vì vậy, hãy để tôi chuyển đổi đó hai thành một chuỗi cho bạn.
Và bạn cũng có thể làm một số công cụ kỳ lạ như hi và sau đó cộng hai.
Đây chỉ là một ví dụ làm thế nào hai có thể được chuyển đổi trong đó là tốt.
>> Vì vậy, với điều đó ra khỏi con đường, chúng ta hãy chỉ bao gồm JavaScript hơn một chút.
Vì vậy, trong C, chúng tôi có các loại.
Bất cứ khi nào chúng tôi tạo ra một biến mới, chúng tôi có thể nói đó là nó là char * hay
chuỗi trong trường hợp CS50.
Hoặc nếu chúng ta có một số thập phân, chúng tôi đã phải nói nổi.
Nếu chúng ta cần một Boolean, chúng tôi đã phải nói b.
Và sau đó một khi chúng tôi đã có một cái gì đó được b, nó đã phải ở lại một bool.
Chúng ta có thể không kỳ diệu thay đổi nó để một int trừ khi chúng tôi đã viết trong
dấu ngoặc đơn, int b.
>> Trong JavaScript, không có các loại.
Bạn chỉ cần nghĩ về nó như var.
Và var là cách bạn tạo ra một loại mới.
Vì vậy, nó có thể có var s là một chuỗi, var n là một phao,
và var b là đúng.
Và một điều mà bạn không thể làm trong C là Tôi có thể nói, sau đó dòng, b
bằng một số nguyên.
Và làm việc tốt.
Trong khi đó, trong C, nó sẽ nói như số nguyên của bạn không phải là một bool.
Tôi không thể làm điều đó cho bạn.
Hoặc [nghe được] sẽ ném ra một lỗi.
>> Và tôi có thể nhanh chóng quay trở lại vào nút và hiển thị một số các chức năng đó.
Vì vậy, tôi có thể có một var a.
Gọi nó là "Apple." Vì vậy, bây giờ khi tôi in một, Tôi nhận được chuỗi của tôi, "Apple." Nhưng tôi có thể
bây giờ cũng nói một bằng 3.
Và thông báo không có lỗi.
Và bây giờ bằng 3.
Bất kỳ câu hỏi cho đến nay?
Vâng.
>> ĐỐI TƯỢNG: Chờ đã, vậy console.log về cơ bản là printf, phải không?
>> ROGER ZURAWICKI: console.log là printf của bạn.
>> ĐỐI TƯỢNG: Đúng vậy.
Vậy làm thế nào đến nếu bạn chỉ cần gõ trong tám hoặc [nghe được], những gì hiện có
[Nghe được]?
>> ROGER ZURAWICKI: Đúng vậy.
Vì vậy, nó là -
những thứ màu xanh lá cây được in tại giao diện điều khiển.
Và những gì chúng ta sẽ thấy tiếp theo là khi chúng tôi di chuyển đến các trang web
trang, chúng tôi sẽ không thể làm -
JavaScript sẽ có một HTML mẫu, mà tôi sẽ được bao gồm trong
Sao băng một phần của hội thảo.
Và đó là nơi bạn có thể nói, cho tôi giá trị của một, và nó sẽ đưa một trong
trang web của bạn.
Bởi vì mỗi trình duyệt web thực sự có một chút giao diện điều khiển.
Và nếu bạn nhìn rất cẩn thận, bạn sẽ nhận được một số thông tin, như của bạn
printf của xuất hiện ở đó với tất cả các trang web mà bạn tải.
>> ĐỐI TƯỢNG: Làm thế nào bạn nhận được màn hình vỏ?
>> ROGER ZURAWICKI: Vì vậy, có một lệnh gọi là nút, và nó đi kèm với Meteor.
Vì vậy tôi sẽ chỉ cần bỏ ra khỏi đó.
Nút là chương trình chạy JavaScript.
Nếu bạn đi đến meteor.com, bạn có thể cài đặt Meteor, và
Sao băng đi kèm với nút.
Vì sao băng chỉ là một bộ sưu tập của tất cả các gói phần mềm.
Khi chúng tôi nhận lại ví dụ của chúng tôi, tôi sẽ đi bộ tất cả mọi người thông qua cài đặt
Sao băng, và sau đó bạn có thể chơi với nút chính mình.
OK, tuyệt vời.
>> Vì vậy, một tính năng tuyệt vời về làm việc với JavaScript được vòng đều giống nhau.
Khá nhiều giống hệt nhau.
Cho các vòng, trong khi vòng, làm trong khi vòng, nếu người nào khác.
Đó là tất cả cùng với các dấu ngoặc.
Đó là cú pháp tương tự.
Trong trường hợp của một vòng lặp, ít chi tiết mà bạn phải chú ý
để được thay vì int i bằng 0, chúng tôi phải nói var i bằng 0.
Nhưng đó là bởi vì các biến loại mà chúng ta đã nói trước đây.
>> Chú ý rằng printf trở thành một bản ghi, một console.log.
Và chúng tôi không cần phải làm phần trăm p dấu gạch chéo ngược n và sau đó vượt qua trong tôi.
Bạn chỉ có thể nói rằng tôi.
Và nó sẽ in ra số từ số không đến bốn.
Nếu các bạn muốn thử điều này, bởi vì bạn đưa ra một điểm tốt.
Nếu bạn muốn chạy đoạn code này của bạn trình duyệt riêng, tôi sẽ khuyên
tất cả mọi người mở Google Chrome.
Google Chrome hoặc bất kỳ trình duyệt web thực sự, nhưng tôi thích Google Chrome
bởi vì nó rất chuẩn.
>> Bạn có thể vào, tôi tin rằng, nếu bạn ngay nhấp vào bất kỳ trang web, chỉ trong
không gian màu trắng, bạn sẽ thấy một tùy chọn Kiểm tra được gọi là Element.
Nó thường là người cuối cùng.
Và khi bạn nhấp vào nó, bạn sẽ nhận được một điều để phía dưới xuất hiện ở đây.
Hãy để tôi phóng to ở đây.
Và chúng tôi có một vài tab đây.
Một trong những bạn quan tâm là giao diện điều khiển.
>> Và đây là một bảng điều khiển JavaScript mà bây giờ bạn có thể làm việc với.
Tuyệt vời.
Vì vậy, tôi có thể gõ vào công cụ tương tự Tôi đã gõ trước trong nút.
Một cộng một là hai.
Var a bằng "Apple".
Và sau đó tôi muốn in một, và một là 'Apple'.
Vì vậy, trong bất kỳ trình duyệt web, Firefox, Chrome, Safari, bất cứ điều gì bạn sử dụng, như
Miễn là bạn có quyền truy cập vào một JavaScript giao diện điều khiển, cùng một loại
mã tôi đã được chạy trong nút bạn có thể chạy trong giao diện điều khiển của riêng bạn.
>> ĐỐI TƯỢNG: [nghe được]?
>> ROGER ZURAWICKI: Làm thế nào để đến được với các giao diện điều khiển?
Bạn phải kích chuột phải vào khoảng trống trên trang web, và sau đó bạn đi đến
Kiểm tra Element.
Vì vậy, thực sự, tôi muốn các bạn chỉ cần chắc chắn rằng bạn có thể
Kiểm tra phần tử trong Chrome.
Và nhìn thấy khi bạn gõ vào một số mã vào giao diện điều khiển
nó chạy đúng.
Hãy hỏi bất kỳ câu hỏi nếu một cái gì đó không rõ ràng ở đây.
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Bất kỳ loại, đúng.
Chỉ có một kiểu cho tất cả biến trong JavaScript.
Và khi bạn phải khai báo một biến, bạn nói var.
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Vâng.
Có, nhưng trong JavaScript, nó rất thông minh về cấp phát bộ nhớ.
Không có malloc.
Không có tự do.
Vì vậy, bạn không cần phải lo lắng về điều đó.
Đó là một tính năng tốt đẹp mà JavaScript cung cấp cho bạn.
>> Vì vậy, tôi muốn di chuyển trên.
Đó sẽ là OK?
OK.
Tuyệt vời.
>> ĐỐI TƯỢNG: Tôi chỉ gặp khó khăn tìm kiếm [? Kiểm tra Element. ?]
>> ROGER ZURAWICKI: vẻ Vì vậy, Safari một chút khác nhau, nhưng bạn có
có Chrome hoặc Firefox?
Đó là những dễ dàng hơn những người làm việc với.
Và cho các dự án của bạn, tôi khuyên bạn nên gắn bó với một trình duyệt vì
bạn sẽ nhận được rất nhiều lỗi gần như bởi vì mỗi trình duyệt xử lý
JavaScript HTML một chút khác nhau.
Vì vậy, tôi nghĩ rằng cuộc sống của bạn sẽ có rất nhiều dễ dàng hơn nếu bạn dính vào Chrome vì
nó có sẵn trên tất cả các máy.
Và đó là một trình duyệt khá phổ biến.
OK?
>> Vì vậy, các chủ đề tiếp theo mà chúng ta nên bao gồm trong JavaScript -
Tôi xin lỗi về định dạng ở đây.
Tôi đã phải kéo dài các trang trình bày để phù hợp với máy chiếu màn ảnh rộng.
Nhưng bây giờ tôi muốn nói về làm thế nào bạn làm chức năng.
Trong C, chúng tôi phải khai báo mỗi chức năng.
Như int thêm, và phải mất một int vào x, và một int y, và sau đó chúng tôi thêm chúng
và trả lại nó.
>> Trong JavaScript, chức năng thực sự một loại biến.
Vì vậy, chúng tôi chỉ nói thêm var, và nó tương đương với một chức năng.
Một chức năng mà phải mất một x và y.
Và những gì chức năng mà làm gì?
Nó trả về x cộng với y trong chính xác cùng cú pháp như trong C. Và bạn nhận thấy rằng trong
JavaScript, bạn sẽ không được nói những gì hàm trả về bởi vì kể từ
biến không có các loại dù sao, nó nó không thực sự hiệu quả, tôi đoán,
được quy định cụ thể tất cả các bạn loại trong chức năng của bạn.
Và sau đó khi bạn gọi một chức năng, đó là cùng cú pháp chính xác là C. Bạn
chỉ cần vượt qua trong hai đối số của bạn.
Tôi muốn thử điều này trong nút của tôi.
Tôi có thể thay đổi các slide?
>> ĐỐI TƯỢNG: [nghe được].
Chúng tôi sẽ nhận được một bản sao của các trang trình bày?
>> ROGER ZURAWICKI: Có.
Vì vậy, chúng ta hãy quay trở lại nút.
OK.
Vì vậy, tôi sẽ nói var thêm chức năng bằng.
Tham gia x, tham gia một y.
Và sau đó nó biết rằng các tuyên bố của không hoàn thành.
Vì vậy, trong nút hoặc trong giao diện điều khiển của bạn, bạn sẽ nhận thấy dấu chấm chấm chấm.
Vì vậy, bạn có thể giữ gõ mã của bạn.
Và bây giờ tôi sẽ nói trở lại x cộng với y.
Và sau đó đóng nẹp.
Và thời điểm tôi đóng nẹp, nó thấy rằng các câu lệnh kết thúc.
>> Và bây giờ tôi có thể nói thêm một và hai.
Và tôi sẽ có được ba ra.
Lưu ý rằng nếu tôi chỉ thêm, nó nói với tôi đó là một chức năng.
Và một điều chỉ chú ý đến là nếu bạn cho nó sai số
tham số, nó sẽ làm cho.
Nó sẽ chạy, nhưng bạn có thể nhận được một số kết quả thực sự lạ.
Loại giống như một giá trị rác, bạn có thể nghĩ về nó.
Vì vậy, xin vui lòng đi trước và thử này trong trình duyệt của bạn.
>> OK, vì vậy lợi ích của thời gian, tôi sẽ bây giờ chuyển sang tính năng tiếp theo trong
JavaScript.
Vì vậy, chúng tôi đã nói về chức năng.
Chúng tôi đã nói chuyện về các vòng, nếu báo cáo quá.
Cú pháp là như nhau như C và các biến.
Và bây giờ tôi muốn nói về mảng.
Tôi xin lỗi mà các trang trình bày đã một chút cắt đứt.
Nhưng trên thực tế, trong phần đầu tiên, tất cả mọi thứ bạn cần sẽ làm việc.
>> Vì vậy, chúng tôi có một loại cho biến được gọi là mảng.
Và chúng tôi sử dụng dấu ngoặc vuông để biểu thị họ.
Vì vậy, trong ví dụ đầu tiên, var arr, mảng sản phẩm nào.
Đây là danh sách trống rỗng, vì vậy một mảng không chứa các yếu tố.
Và bạn cũng có thể có một mảng với ba dây.
Trong C, mọi phần tử trong mảng của bạn phải là cùng loại.
>> Nhưng vì trong JavaScript chỉ có một loại, mảng có thể thực sự
có các loại khác nhau của các giá trị.
Như ở đây, chúng tôi có một mảng với một phao, một bool và int.
Cách bạn có được một chiều dài của một mảng, bạn không thực sự phải sử dụng kích thước của
hoặc bất cứ điều gì.
Bạn chỉ cần nói mảng và sau đó dot dài.
Và chấm chiều dài này, bạn có thể nghĩ nó loại như một cấu trúc, làm thế nào mỗi
mảng có một lĩnh vực, một biến thêm bên trong của nó được gọi là chiều dài, mà
theo dõi mảng của bạn là bao lâu.
>> Vì vậy, tôi chỉ một cách nhanh chóng sẽ đi vào nút và hiển thị các bạn những điều tương tự.
Vì vậy, tôi có thể có một mảng.
Nó có thể là danh sách trống.
Và nó sẽ in tôi sao một danh sách trống.
Tuyệt vời.
Bây giờ tôi có thể nói rằng mảng có 1, và 2.3, và đúng sự thật.
Vì vậy, tất cả các loại khác nhau.
Và bạn nhận thấy nó làm việc tốt.
Mảng tôi về hỗ trợ tất cả các giá trị tôi đã cho nó.
>> Nếu tôi muốn được những yếu tố đầu tiên của mảng, cú pháp là thực sự
giống như trong C. Bạn có thể nói mảng không.
Và bạn nhận được một.
Tôi có thể nói tương tự cho mảng hai, và tôi nhận được sự thật.
Nếu tôi làm điều gì đó bên ngoài của mảng, JavaScript là một ngôn ngữ an toàn
bởi vì tôi sẽ không nhận được một lỗi seg.
Tôi sẽ không xác định.
>> Và điều này không xác định, bạn có thể loại của suy nghĩ về nó như là vô giá trị.
Nhưng nó có thể được thực sự khó chịu khi bạn mã bởi vì bạn sẽ phải kiểm tra xem
gần như tất cả mọi thứ bạn làm, bạn làm việc với là không xác định.
Và chúng ta sẽ thấy một số ví dụ về này khi chúng tôi làm việc trong Meteor.
>> Mặc dù mảng bốn là không xác định, Tôi có thể gán cho nó một giá trị.
Vì vậy, tôi sẽ nói nó tương đương với một.
Và sau đó nếu tôi đi đến mảng, tôi có giá trị thêm ở đó.
Và nhận thấy rằng mảng ba, cũng không xác định được, vẫn không xác định.
Vì vậy, bây giờ tôi có một mảng với một lỗ ở giữa.
Nhưng nếu tôi in mảng bốn, Tôi sẽ nhận được một.
Nếu tôi đã làm mảng ba, tôi nhận được không xác định.
>> Vì vậy, các tính năng tốt đẹp mà JavaScript cho phép bạn làm là danh sách có thể
thay đổi kích thước.
Mảng, mảng là danh sách, họ thay đổi kích thước.
Và bạn có thể chỉ định bất kỳ vị trí bên trong của họ.
Và tất cả các khoảng trống sẽ được lấp đầy với các giá trị không xác định.
>> Vì vậy, chúng tôi đã nói chuyện về mảng.
Bây giờ, điều cuối cùng tôi muốn nói đến trong JavaScript, và điều này là rất quan trọng
để hiểu mã Tôi sẽ chỉ cho bạn,
là có được các đối tượng.
Và các đối tượng là một thuật ngữ trong -
về cơ bản, họ có mặt trong nhiều ngôn ngữ lập trình.
Và mỗi ngôn ngữ lập trình thích nghĩ về họ một chút khác nhau.
>> Nhưng tôi nghĩ rằng cho Meteor, một tốt tương tự là các cấu trúc C.
Trong C, nếu chúng ta muốn tìm thấy các cấu trúc sinh viên, chúng tôi phải xác định tất cả các
những thứ bên trong của nó.
Vì vậy, nó phải có một cái tên.
Nó đã có một năm.
Nó phải có một giới tính.
Nhưng chúng tôi cũng có để cho nó loại tất cả những điều đó.
>> Và bây giờ chúng ta có khuôn này cho cấu trúc được gọi là sinh viên, chúng tôi có thể có một
cấu trúc mới, và sau đó chúng tôi có thể tự nói những gì từng lĩnh vực đang có.
Và đó là nơi mà chúng tôi sử dụng dấu chấm tên, dot năm, dot giới.
Và sau đó chúng ta chỉ cần, trong dòng cuối cùng của mã ở đây, tôi chỉ in ra
tên của học sinh cấu trúc.
>> Trong thế giới JavaScript, có có những điều như cấu trúc sinh viên.
Bạn không tạo ra một cấu trúc định sẵn.
Bạn thực sự chỉ cần, trong các dấu ngoặc đơn, bạn nói tất cả mọi thứ là những gì.
Và đó là ký hiệu kỳ lạ này với ruột kết và sau đó là dấu phẩy, nhưng bạn sẽ
được sử dụng để nó sớm thôi.
>> Và nó thực sự là một thực sự dễ dàng, cách linh hoạt chỉ
thao tác các đối tượng.
Bạn nhận thấy rằng nếu tôi muốn bây giờ có được tên từ s, tôi chỉ làm s.name.
Được có bất kỳ câu hỏi về điều này?
Điều này thường là một rất khó hiểu chủ đề khi chúng tôi giới thiệu mọi người
JavaScript.
Tôi sẽ làm một số ví dụ về điều này trong nút.
Có?
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Vì vậy, bạn có một ví dụ, nhiều
biến của loại đó.
>> ĐỐI TƯỢNG: [nghe được].
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: OK.
Vì vậy, tôi đoán là cách bạn sẽ đi về là bạn sẽ đặt các đối tượng trong một mảng,
và bây giờ bạn sẽ có một mảng các đối tượng.
Điều đó trả lời câu hỏi của bạn?
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Có.
S là một trong những đối tượng.
Vì vậy, chúng ta có thể đi vào nút và chỉ chơi xung quanh một chút.
>> ĐỐI TƯỢNG: [nghe được]?
>> ROGER ZURAWICKI: Oh, OK.
Vì vậy, nếu bạn đang yêu cầu những gì lớp học, các lớp học được điều trị rất khác nhau,
và họ có một chương trình thực sự lạ được gọi là mẫu, mà bạn không
cần biết về.
Không có cách nào cố định để làm điều đó.
Vì vậy, nếu bạn muốn tạo ra nhiều, bạn sẽ chỉ là loại có một chức năng
hoặc một cái gì đó.
Bạn tạo ra chức năng của riêng bạn.
Và bạn sẽ trả về một đối tượng.
Đó sẽ là dễ nhất cách để làm điều đó.
Điều đó có ý nghĩa?
OK.
Tuyệt vời.
Vì vậy, một khi chúng ta có một sự hiểu biết về JavaScript đối tượng, họ là -
oh, có.
>> ĐỐI TƯỢNG: [nghe được]
Ví dụ, sự khác biệt giữa những gì "Roger" với dấu ngoặc kép so với
[Nghe được] với dấu nháy đơn.
>> ROGER ZURAWICKI: OK.
Vì vậy, đây là trong C, chúng tôi có duy nhất báo giá đại diện cho ký tự, và đôi
báo giá đại diện cho chuỗi.
JavaScript thực sự ném này đi bởi vì bạn có thể có chuỗi với
dấu nháy đơn hoặc đôi, và có có những điều như một char duy nhất.
Nhưng nếu bạn chỉ cần sao chép giống nhau Mã C, JavaScript sẽ
đối xử với nó tốt.
Đó là lý do tại sao tôi coi đó như là -
đó là lý do tại sao tôi theo nghĩa đen có thể cổng mã trong ý nghĩa đó.
>> Và tôi muốn cho bạn thấy một ví dụ của một đối tượng phức tạp hơn.
Vì vậy, bạn có thể nhận thấy rằng một đối tượng có thể có chuỗi như là giá trị.
Nó có thể có một danh sách các giá trị.
Nó có thể có một danh sách các đối tượng như các giá trị.
Có thực sự không có giới hạn này.
Vì vậy, ở đây, nó chỉ là một cuộc biểu tình tốt làm thế nào bạn có thể nhận được rất nhiều
các loại khác nhau xảy ra tất cả trong một đối tượng.
Điều này có ý nghĩa?
>> Bây giờ, bạn cũng có thể có mảng của các đối tượng.
Và đây là loại tương tự như những gì bạn hỏi, nếu bạn có thể có các đối tượng
cùng loại.
Nhưng vấn đề là, không có cố định định dạng cho các đối tượng trong JavaScript.
Vì vậy, bạn phải xác định chúng mình.
Và bạn phải chắc chắn rằng họ đang thống nhất.
Vì vậy, ở đây, khi tôi tạo ra một đối tượng, tôi có để đảm bảo rằng mỗi người có một
tên, và mỗi người có một ngôi nhà.
>> Và sau đó tôi có một mảng của những người, và có thể được tiểu của tôi.
Và sau đó ở đây bạn có thể loại xem cho vòng lặp xảy ra.
Vòng lặp cho không chỉ là một thực sự phổ biến cách để đi qua trên một mảng
trong JavaScript.
Chú ý rằng mô hình này là rất tương tự vào C tương đương, nơi bạn
có int i bằng số không. tôi nhỏ hơn chiều dài.
Và sau đó tôi cộng với cộng.
>> Nó gần như cùng mã, ngoại trừ một vài chi tiết.
Vì vậy, hiện tất cả mọi người hiểu những gì một đối tượng là?
Chỉ cần nghĩ về nó như là một cấu trúc C.
Và cách bạn truy cập vào các lĩnh vực chỉ với dấu chấm.
Và miễn là bạn nhớ làm thế nào để sử dụng dấu chấm, bạn sẽ bị phạt.
>> OK, vì vậy bây giờ có thể tất cả mọi người đọc liên kết?
Đây là liên kết cho dự án.
Có ai gặp khó khăn nhìn thấy liên kết?
OK, chúng ta hãy thay đổi nó sau đó.
Nó không phải là -
Yeah, đó có thể là Cách dễ nhất để làm điều đó.
Tuyệt vời.
>> Vì vậy, nếu bạn đi đến trang web này, có nên có một số hướng dẫn mà tôi sẽ
đi qua về cách chúng ta có thể cài đặt Meteor và nhận được dự án mẫu của chúng tôi đang chạy.
Tôi muốn chắc chắn rằng tất cả mọi người có liên kết xuống trước khi tôi di chuyển.
Tôi có thể di chuyển trên?
OK, tuyệt vời.
>> Vì vậy, ở đây tôi tại trang web.
Bạn sẽ nhận thấy trong file readme, chúng tôi có một số hướng dẫn về cách
để có được thứ thiết lập.
Bạn cần phải hoặc trong các CS50 thiết bị hoặc chỉ trên một máy Mac.
Windows sẽ không hoạt động.
Nhưng về cơ bản bất cứ điều gì đó không phải là Cửa sổ sẽ làm việc với các
hướng dẫn tốt.
Nhưng tôi có thể làm cho nó một chút lớn hơn là tốt.
>> Vì vậy, bạn sẽ chạy đầu tiên cặp lệnh.
Những anh chàng này sẽ chỉ cần cài đặt Meteor.
Tôi có thể đi vào thiết bị đầu cuối của tôi.
Và nếu tôi chạy cùng một điều bây giờ, Tôi đã có nó được cài đặt.
Vì vậy, nó ngắn hơn một chút.
Nó có thể mất một chút thời gian cho các bạn.
Nhưng tôi muốn chắc chắn rằng đầu tiên rằng chúng ta có Meteor đang chạy.
Sau khi Meteor đã được cài đặt, bạn nên có thể có được nút trong giao diện điều khiển.
>> ĐỐI TƯỢNG: Họ đang yêu cầu cho một mật khẩu.
>> ROGER ZURAWICKI: Đó sẽ là của bạn mật khẩu người dùng, nếu bạn đang ở trên một máy Mac.
Nó chỉ cần sự cho phép để sửa đổi một số tập tin hệ thống.
Vì vậy, câu hỏi là, nếu nó yêu cầu bạn cho mật khẩu, nó chỉ yêu cầu bạn
mật khẩu Tên đăng nhập khi bạn đăng nhập vào máy Mac của bạn.
Và điều này là để bạn có thể thay đổi tập tin hệ thống.
>> Và khi bạn đã sẵn sàng, bạn có thể di chuyển trên bước tiếp theo, đó sẽ sao chép
mẫu mã tôi có từ các trang web.
Và bạn sẽ nhận được một thư mục mới trong bạn thư mục được gọi là dẫn, và
chúng ta có thể bắt đầu làm việc từ đó.
Vì vậy, tôi chỉ cần sao chép và dán các lệnh vào thiết bị đầu cuối của tôi.
Và đối với tôi, tôi đã nhân bản nó.
Vì vậy, tôi chỉ có thể di chuyển vào bảng dẫn.
Và tôi cần phải có một vài tập tin trong đó.
Bất kỳ câu hỏi?
>> ĐỐI TƯỢNG: [nghe được] không làm việc.
>> ROGER ZURAWICKI: Oh, bạn có thể cần git cài đặt là tốt.
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Xin lỗi?
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Oh, OK.
OK.
Đó là bởi vì bạn có thể cần phải được đăng nhập vào GitHub để có được liên kết này.
Nếu các bạn có thể thấy rằng, đơn giản nhất cách để làm điều đó thì tôi sẽ nói là
tải về zip.
Và điều này sẽ chỉ cần tải về tất cả các tập tin.
Và sau đó một khi bạn đặt nó trong của bạn tải về hoặc thư mục nhà của bạn -
Tôi khuyên bạn nên đặt nó trong của bạn thư mục vì vậy chúng tôi có thể tất cả
chạy các lệnh tương tự.
Miễn là chúng ta có các tập tin, chúng tôi sẽ có thể bắt đầu làm việc với họ.
Cho tôi biết nếu mọi người đang có khó khăn khi tải các tập tin.
>> ĐỐI TƯỢNG: Bằng cách thư mục, bạn có nghĩa là -
>> ROGER ZURAWICKI: Vì vậy, thư mục sẽ là John Harvard, nếu bạn đang ở trong
thiết bị CS50.
Để có được vào thư mục nhà của bạn, chỉ cần gõ vào C.
>> ĐỐI TƯỢNG: [nghe được]
CS50 thiết bị [không nghe được].
>> ROGER ZURAWICKI: Có.
Bạn muốn chạy các lệnh trong thiết bị đầu cuối của bạn.
>> ĐỐI TƯỢNG: [nghe được].
Tôi đã nhận một lỗi nói rằng không có tập tin hoặc thư mục.
>> ROGER ZURAWICKI: Chúng tôi có thể mất một cách nhanh chóng phá vỡ và chỉ cần đảm bảo rằng
tất cả mọi người có Meteor cài đặt, và tôi sẽ chỉ cần đi cố gắng để giúp đỡ mọi người.
Hãy cố gắng để giúp đỡ lẫn nhau nếu bạn đang chạy vào vấn đề.
Xin lỗi, yeah.
Bạn có cả thiết bị?
>> ĐỐI TƯỢNG: Vâng.
Tôi có RISA
>> ROGER ZURAWICKI: OK.
Nếu bạn quay trở lại trang web, đi di chuyển lên tới đỉnh.
Và có HTTPS này.
>> ĐỐI TƯỢNG: Sao chép này?
>> ROGER ZURAWICKI: Vâng.
Và sau đó bạn muốn gõ git clone.
Vì vậy, nếu bạn nhấn Control A -
>> ĐỐI TƯỢNG: đây?
Và làm [không nghe được]?
>> ROGER ZURAWICKI: G-I-T.
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Git và sau đó sao chép.
Vì vậy, nó rất giống với các lệnh bạn đã có ở trên, nhưng URL thay đổi.
Vì vậy, trước khi nó được điều này, bây giờ nó này.
Hãy để tôi cập nhật -
yeah.
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Đây được tải về.
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Oh, vì vậy nó không sao chép một cách chính xác.
Tôi sẽ khắc phục điều đó.
Có một lỗi với cố gắng để tải về các tập tin.
Hãy để tôi cập nhật lệnh cho các bạn vì vậy tôi có thể chắc chắn rằng nó sẽ làm việc.
Tôi xin lỗi về điều đó.
Nó phải là như nhau đối với Mac hoặc thiết bị CS50.
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Tôi đã cập nhật lệnh cho số hai, nếu
bạn làm mới trang.
Và với điều này, URL, bạn sẽ có có thể tải về các tập tin.
>> ĐỐI TƯỢNG: Vì vậy, nếu chúng ta vẫn còn tải [nghe được].
>> ROGER ZURAWICKI: Nếu bạn còn đang tải về Meteor?
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Vâng, nếu bạn muốn để phát triển trên máy Mac của bạn.
Nhưng bạn cần phải phát triển Xcode công cụ được cài đặt.
Tôi đã thử nghiệm các lệnh trên CS50 thiết bị, vì vậy tôi có thể đảm bảo
rằng nó sẽ làm việc.
Vâng. hãy để tôi đi và giúp bạn.
>> ĐỐI TƯỢNG: [nghe được].
Tôi cho mật khẩu của tôi.
Đây là Mac.
Và sau đó tôi làm [không nghe được].
>> ROGER ZURAWICKI: OK.
Tôi sẽ cố gắng chạy tất cả các lệnh duy nhất trong thiết bị đầu cuối thiết bị CS50.
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Tôi sẽ làm cho nó làm việc đầu tiên trên thiết bị đầu cuối, trên
Thiết bị CS50, và sau đó thiết bị đầu cuối máy Mac.
>> ĐỐI TƯỢNG: Vì vậy, nếu bạn làm điều đó trên CS50 thiết bị như thế, [không nghe được].
>> ROGER ZURAWICKI: Tôi muốn di chuyển , nhưng nếu mọi người vẫn có
rắc rối lập Meteor, Kevin là hơn hạnh phúc để giúp các bạn ra hơn,
Kevin trong chiếc áo màu xám.
Những gì chúng ta cần phải có là chúng ta sẽ chạy lệnh cuối cùng, thứ ba, trong
thiết bị đầu cuối của chúng tôi.
Khi chúng ta làm điều đó, chúng ta sẽ chạy Meteor.
>> Và bạn nên -
oh, tôi đã có Meteor đang chạy.
Vì vậy, nó sẽ không để cho - cho tôi chỉ cần đóng sao băng khác của tôi.
Khi tôi chạy Meteor, bạn bây giờ sẽ thấy rằng -
bạn sẽ thấy thư mục hiện hành mà nó phục vụ.
Và bây giờ nó sẽ nói rằng máy chủ đang chạy trên http://localhost.
Đó là URL mà bạn muốn đặt trong trong trình duyệt web của bạn.
>> Và trên URL đó, bạn sẽ có thể truy cập vào một bảng dẫn ít tốt đẹp.
Vì vậy, nhận thấy rằng đây là trên localhost, có nghĩa là nếu bạn làm bất cứ
thay đổi, bạn sẽ không xem các thay đổi của nhau.
Trong khi đó, trên trang web của tôi cho thấy bạn ngay từ đầu, chúng tôi có thể nhận được
thay đổi tất cả mọi người vì tất cả mọi người được truy cập vào cùng một trang web.
>> Vì vậy, hãy để tôi chỉ đi đến [? từ?]
3000.
Vì vậy, bạn sẽ có thể chỉ cần xác nhận rằng các chức năng hoạt động.
Bạn có thể chọn những người khác nhau, và bạn có thể cung cấp cho họ các điểm khác nhau.
Vì vậy, tôi cho điểm ai đó.
Bạn cũng có thể thấy rằng họ tăng lên trong xếp hạng.
>> Bây giờ, vì lợi ích của thời gian, có ba tính năng mà tôi đã
thực hiện.
Và chúng ta sẽ thực hiện xóa người sử dụng như tính năng đầu tiên của chúng tôi.
Nhưng trước khi chúng tôi di chuyển trên, là có bất kỳ câu hỏi?
Bạn có bàn tay của bạn lên.
Có?
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Bạn có thể kiểm tra Meteor được cài đặt?
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: địa phương chủ 3000?
Và bạn đang ở trong thiết bị CS50?
Tôi có thể làm -
bạn không phải trên máy Mac.
Điều này sẽ làm việc trong thiết bị.
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Trong bình thường trình duyệt web, yeah.
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Meteor là chạy?
Vì vậy, OK, có một sự khác biệt ở đây.
Nếu bạn đang chạy nó trong thiết bị, bạn phải làm
localhost trong thiết bị.
Nếu bạn đang chạy nó trong máy Mac của bạn, như tôi, sau đó tôi có thể làm
Mac của tôi Google Chrome.
Nhưng nếu bạn đang sử dụng các thiết bị CS50, bạn phải làm tất cả mọi thứ
trong thiết bị.
Vì vậy, bạn phải sử dụng Google Chrome trong thiết bị.
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Đó là vẫn không làm việc?
>> ĐỐI TƯỢNG: [nghe được].
>> ROGER ZURAWICKI: Như vậy chỉ cần lặp lại, làm thế nào để bạn truy cập vào trang web bây giờ.
Bạn có một URL ở đây trên localhost 3000.
Nếu bạn đang ở trong thiết bị CS50, bạn phải mở CS50
thiết bị của Google Chrome.
Và trong Google Chrome trong thiết bị, bạn có thể gõ URL,
và bạn sẽ thấy một bảng dẫn.
Vì vậy, tôi sẽ chỉ đưa nó đi sang bên đây một chút.
Và bây giờ tôi sẽ mở của tôi soạn thảo văn bản trên đây.
Vì vậy, hãy để tôi chỉ cần đảm bảo rằng mã này là theo thứ tự.
OK.
Tuyệt vời.
>> Tôi muốn bây giờ đi bộ qua mã một chút.
Và các tập tin đầu tiên tôi muốn bắt đầu với là leaderboard.html.
Bạn sẽ có thể để có được mã này sau khi hội thảo, vì vậy tôi chỉ muốn hiển thị
bạn trên máy tính của tôi những gì đang xảy ra.
Vì vậy, tôi hy vọng mọi người có thể thấy điều này.
Vì vậy, ngay từ đầu của tập tin, chúng tôi có đầu của chúng tôi và tiêu đề, mà
tương tự như những gì chúng ta đã thấy trong mỗi tài liệu HTML.
Và sau đó chúng ta sẽ có thẻ cơ thể ở đây.
>> Chính những gì tôi đã được lựa chọn là cơ thể, về cơ bản những gì
sẽ được hiển thị.
Nhưng có một số mới không phải HTML vật, và đó là trong
đôi dấu ngoặc nhọn.
Và đây là những mẫu thẻ.
Vì vậy, bạn sẽ thấy ở đây khung này khung bảng dẫn mới.
Và điều này được loại - nghĩ về nó như gọi một chức năng cho HTML.
>> Đây là một phiên bản đặc biệt của HTML.
Đó là phiên bản sử dụng Meteor, mà là lý do tại sao bạn có thể hiển thị khác nhau
điều, chẳng hạn như bảng dẫn tên và nút.
Nhưng bảng dẫn cho bạn để đi đến mẫu với tên bảng dẫn.
Vì vậy, mẫu không được hiển thị chính nó, nhưng đó là một chức năng, do đó, nó
sẽ được gọi.
Và bạn sẽ thay thế trong tất cả điều này mã ngay ở đây vào bảng dẫn.
>> Một phần thú vị của bảng dẫn đây chỉ là bảng này.
Nếu bạn chỉ cần đọc nó, đọc mã này to, nó phải là trực quan
vì dẫn, tất cả chúng ta có ở đây là một bảng.
Này lớp thứ ID bạn không cần phải lo lắng.
Chỉ biết rằng có một tiêu đề bảng.
Đó là thead này.
>> Và nó tìm thấy một tên và một số điểm.
Tất cả các thẻ, như thtable, thead, bạn sẽ chỉ cần tìm hiểu như bạn đi cùng.
Nó không quan trọng mà bạn ghi nhớ những bởi vì bạn chỉ có thể truy cập bất kỳ
tham khảo trực tuyến.
Hoặc vào cuối học kỳ, các sẽ chỉ rất quen thuộc với bạn.
>> Sau khi tiêu đề của bảng, phần mà tôi muốn vẽ của bạn
chú ý đến là thẻ h này.
Bởi vì nó trong dấu ngoặc kép, đó là một bản mẫu.
Vì vậy, có nghĩa là cho mỗi người chơi, bất cứ điều gì người chơi được, chúng ta phải
hiển thị nó.
Và chúng tôi đi đến các mẫu máy nghe nhạc.
>> Nếu chúng ta di chuyển xuống hơn một chút -
Tôi hy vọng tất cả mọi người có thể thấy điều đó.
Chúng tôi có các mẫu máy nghe nhạc.
Và mẫu này về cơ bản định nghĩa một ô của bảng, nơi mà bạn đặt trong tên
ở đây và điểm số.
Thu nhỏ bây giờ, chúng ta có thể nhìn thấy rằng đoạn mã này -
và đó là cầu thủ của chúng tôi xuống đó -
xác định một trong những tế bào này.
Mỗi điều mà tôi nhấp trở thành màu vàng.
>> Một cách đơn giản, tôi có thể thay đổi ngay bây giờ.
Hãy chắc chắn rằng Meteor vẫn chạy.
Sao băng nên là một quá trình máy chủ, vì vậy bạn chỉ cần để nó
chạy khi bạn phát triển.
Hãy nói rằng tôi muốn thay đổi tất cả các tên hoặc điểm số.
Và tôi sẽ nói tôi sẽ để thêm điểm ở đây.
Vì vậy, sự thay đổi tôi thực hiện ở đây là, thay vì chỉ điểm, tôi
thêm điểm không gian số.
>> Tôi sẽ thu nhỏ, và tôi sẽ lưu tập tin của tôi.
Và sau khi tôi lưu tập tin của tôi, tôi cần để đảm bảo Meteor đang chạy.
Xin lỗi về điều đó.
Tôi muốn cho bạn chỉnh sửa đã được thực hiện trong thời gian thực.
Vì vậy, tôi sẽ chỉ thay đổi một số văn bản.
Nhấp vào một cầu thủ.
Tôi đặt nó trong tất cả các mũ.
Và nó phải được rằng nếu điều này đang làm việc đúng, khi tôi lưu nó, nó
sẽ cập nhật.
>> Ồ, tôi nghĩ ngay bây giờ vấn đề là Tôi không ở thư mục bên phải.
OK.
Tôi xin lỗi về điều đó.
Vì vậy, ở đây, những gì bạn thấy là thay đổi của tôi đã đi qua.
Bây giờ nói rằng tôi muốn trở lại sự thay đổi.
Tôi muốn quay trở lại với những gì tôi đã có.
Tôi chỉ cần đi để loại nó bình thường.
Nhấp vào một cầu thủ.
>> Thời điểm tôi lưu nó, trang web làm mới cho tôi.
Và tôi thấy sự thay đổi của tôi trên các trang web ngay lập tức.
Đây là một tính năng thực sự hữu ích trong gỡ lỗi bởi vì bây giờ
Tôi không phải -
khi chúng ta viết mã C, không chỉ làm chúng tôi phải lưu các tập tin, nhưng chúng tôi phải
làm cho nó và sau đó chạy nó một lần nữa.
Sao băng là rất tốt đẹp bởi vì không giống như C, thời điểm bạn tiết kiệm HTML hoặc
Tập tin JavaScript, sự thay đổi xuất hiện ngay lập tức.
>> Một câu hỏi, trong các mẫu này, làm thế nào Tôi có thể lấy các giá trị như máy nghe nhạc
hoặc chọn một cái tên?
Nếu tôi phóng to ở đây vào mã của tôi, Tôi thấy điều này cho mỗi người chơi.
Vì vậy, các mẫu biết rằng Tôi có những cầu thủ nào đó.
Và nó biết rằng có một tên được lựa chọn.
Nơi thực hiện điều này đến từ đâu?
Mà đến từ các JavaScript.
>> Và nếu bạn đi đến leaderboard.js, điều này tập tin, bây giờ khi tôi đi đây, chúng ta có một
vài lệnh xác định.
Đây là cú pháp Meteor đặc biệt.
Chú ý rằng bạn không cần VAR hoặc bất cứ điều gì.
Nhưng đây là những cấu trúc chỉ khi cấu trúc khi cấu trúc hoặc các đối tượng này.
Và tất cả tôi xác định là mẫu gọi là bảng dẫn.
>> Bảng quản lý sẽ nhận được một điều được gọi là người chơi.
Và các cầu thủ là gì?
Đó là bất cứ điều gì biểu hiện này trả về.
Và tên được lựa chọn là gì?
Đó là một số mã khác.
Các chi tiết của mã chúng tôi sẽ bao gồm một chút sau đó.
Nhưng ngay bây giờ tôi muốn bạn hiểu trong mã này, chúng tôi đang
các cầu thủ, và chúng tôi đang đem lại cho nó một giá trị.
Trong trường hợp này, đó là một chức năng mà được thực hiện.
Vì vậy, chúng ta có thể nhận được giá trị trở lại khi chúng ta chạy các chức năng.
Đây là một bản ghi.
Điều đó có ý nghĩa?
>> Tôi có thể thay đổi cách nó được sắp xếp.
Ở đây, có một đối tượng nào đó.
Và điều này nói là tôi sẽ sắp xếp theo điểm số giảm dần đầu tiên và
sau đó đặt tên tăng dần.
Nếu tôi thay đổi này với một, nó sẽ để sắp xếp số điểm tăng dần.
Vì vậy, không nên được trên đầu trang.
Và khi tôi phóng to trang web của tôi, chúng tôi bây giờ nhìn thấy rằng các trang web được cập nhật.
Và điểm số là Ascend.
>> Chức năng tiếp theo tôi chỉ muốn để trang trải là nhấp chuột tăng.
Ra khỏi sự quan tâm của thời gian, tôi sẽ không có thể bao gồm nhiều sao băng
mã, nhưng có rất nhiều tài nguyên có sẵn, và tôi sẽ là
đây sau buổi hội thảo.
Nhưng tôi chỉ muốn để trang trải các sự kiện bảng dẫn.
Cú pháp này, bạn sẽ học được bit sau này trong các bài giảng.
Đây là JavaScript.
>> Chúng tôi chỉ nói, khi chúng tôi nhận được một cú nhấp chuột, và đó là vào tăng, điều này
băm chỉ có nghĩa là ID.
Trên thẻ tăng ID, sau đó chúng tôi muốn để cập nhật - các từ khóa tôi muốn bạn
xem là cập nhật và lựa chọn và nghe nhạc.
Vì vậy, bất cứ người chơi lựa chọn, chúng tôi cập nhật nó.
Và những gì chúng ta làm chúng ta tăng là số điểm của mình bằng năm.
Và điều đó sẽ mô tả các chức năng chúng tôi có ở đây.
>> Sau khi kết thúc buổi hội thảo này, chúng tôi sẽ có thể thấy một số mã khác.
Nhưng sẽ trở lại mục tiêu của tôi mà tôi muốn thay đổi trang web, tôi muốn ở đây
để thêm một nút để loại bỏ Tôi có thể xóa các cầu thủ.
Vì vậy, để làm được điều đó, tôi cần phải làm hai việc.
Tôi cần phải cập nhật HTML, cập nhật xem, những gì được hiển thị cho người dùng, và
sau đó có một số JavaScript khi nút được nhấn, Meteor sẽ
để làm một cái gì đó.
Nó sẽ loại bỏ cầu thủ đó.
>> Vì vậy, có rất nhiều khối mã có về cơ bản đã
được thực hiện đối với tôi.
Nếu tôi nhìn đây, tôi đã có một cách nhận được các cầu thủ được lựa chọn.
Đó là công cụ này, nếu bạn có thể nhìn thấy nó.
Vì vậy, nếu tôi chỉ -
Tôi sẽ có sự kiện khác.
Vì vậy, tôi sẽ sao chép những gì tôi có.
Bởi vì đây là một danh sách, Tôi chỉ cần một dấu phẩy.
>> Vì vậy, bây giờ tôi sẽ phải bấm xóa.
Và sau đó thay vì người chơi cập nhật, Tôi sẽ làm người chơi xóa.
Và tất cả người chơi xóa nhu cầu là một cầu thủ được lựa chọn.
Vì vậy, chức năng này là tất cả chúng ta cần.
Tôi cần thêm một số HTML ở đây mặc dù.
Vì vậy, nếu tôi di chuyển xuống đây, đây là chế độ xem HTML.
Chúng tôi đã có một điều ở đây, đó là một thẻ.
Bạn không cần phải lo lắng về điều đó.
>> Điều quan trọng đối với bạn là tăng ID này.
Và đây là những gì cho phép chúng tôi nói, khi chúng tôi nhấp tăng, chúng ta phải
cho năm điểm.
Và bạn sẽ thấy rằng đây là một nút.
Đó là những gì có nghĩa là BTN.
Và các văn bản trong nút là cung cấp cho năm điểm.
Vì vậy, những gì tôi sẽ làm Tôi là sẽ sao chép dòng này.
Tôi sẽ thay đổi ID để xóa.
Và tôi sẽ thay đổi văn bản ở đây để xóa.
>> Vì vậy, hãy chắc chắn rằng tất cả mọi thứ đó lại.
Tôi muốn quay trở lại JavaScript của tôi để đảm bảo rằng tôi có
xóa xếp hàng ở đây.
Tốt.
Vì vậy, tôi sẽ tiết kiệm cả hai tập tin.
Sau khi tiết kiệm cả hai tập tin, chúng tôi có thể quay trở lại phía dưới.
Và bây giờ chúng ta thấy chúng ta có một nút xóa.
Và thêm một bước.
Bạn nhận thấy bạn có thể nhận được một lỗi bởi vì khi tôi nhấp
xóa, không có gì đang xảy ra.
>> Một cách để gỡ lỗi này là để đi Kiểm tra lại Element.
Tôi đang làm điều này sao cho bạn có thể xem làm thế nào bạn sẽ gỡ lỗi một cái gì đó.
Kiểm tra trong phần tử, chúng tôi có tất cả các văn bản của chúng tôi ở đây.
Tôi muốn quay trở lại giao diện điều khiển.
Và những gì xảy ra khi tôi đi đây là tôi nhận được một số loại lỗi.
Nó nói không có phương pháp xóa.
>> Vì vậy, điều này nói rằng khi tôi đi là trở lại các mã, tôi được gọi là máy nghe nhạc
xóa đây.
Xóa thực sự là không đúng lệnh.
Vì vậy, để tìm ra những lệnh ngay được, có API Meteor.
Các tài liệu tôi muốn chỉ cho bạn chàng trai để chỉ tại meteor.com.
Vì vậy, tôi có nó ở đây.
Đây chỉ là để các bạn biết nơi để tìm hiểu thêm.
>> Có một liên kết đến tài liệu.
Và về cơ bản, tôi có thể chỉ không tìm thấy cho xóa.
Và những gì bạn thấy, xóa thực sự là loại bỏ.
Đó là lệnh Tôi cần phải gọi.
Vì vậy, bây giờ mà chúng ta biết rằng, tôi sẽ thay đổi này xóa để loại bỏ.
Vì vậy, bây giờ, khi tôi quay trở lại bảng dẫn của tôi trang web, tôi sẽ nhấp
xóa, và bây giờ tôi đi.
Không có nhiều hơn Roger.
Và tôi có thể tiếp tục đi xóa tất cả tên duy nhất cho đến khi tôi không còn gì.
>> Vì vậy, đó là một bản xem trước nhỏ làm thế nào để sử dụng Meteor.
Bạn sẽ được học JavaScript rất nhiều và HTML cần thiết để thực hiện
nó trông đẹp hơn, mà chúng tôi sẽ đề cập trong tuần này [? mảnh?] thiết lập cho HTML
và JavaScript trong trình tiếp theo [? mảnh?] thiết lập.
>> Do đó, không lo lắng nếu không phải tất cả công cụ này đến dễ dàng với bạn.
Nó sẽ đến thời điểm các dự án cuối cùng.
Cảm ơn cho hiển thị.
Liên kết tôi sẽ cập nhật ngay sau khi Hội thảo, do đó bạn có thể thấy một số chi tiết
ví dụ mà tôi đã thực hiện như thế nào trên để có được bảng dẫn nâng cao hơn
mà tôi có trên trang web này tại đây một gốc tự do leaderboard.meteor.
Cảm ơn bạn.
>> [Vỗ tay]