>> Rồi.
Vì vậy, JavaScript.
Hầu như tất cả mọi người trong căn phòng này có thể có một mức độ nào
về thoải mái với nó cho dù đó là cách trở lại khi trong SC50
hoặc nó được cá nhân các dự án web hoặc thậm chí
nếu bạn đã làm một chút về nó với dự án cơ sở PHP vừa qua,
nhưng đối với hầu hết một phần, nhiều bạn,
thậm chí nếu bạn có một số tiện nghi
với JavaScript có thể đã không được thực hiện
cho các cấp như thế nào công trình ngôn ngữ và những gì diễn ra
trên dưới mui xe và những gì chúng ta sẽ cố gắng
làm hôm nay là vỏ trở lại một số các lớp kỹ thuật
những gì JavaScript là, làm thế nào nó khác với một ngôn ngữ
như PHP, làm thế nào có thể sử dụng không chỉ phía khách hàng
mà còn phía máy chủ và sau đó tập trung rất đặc biệt
trên khuôn khổ này, nhận thấy không có JS mà chủ yếu là một thời gian chạy,
một chương trình mà bạn có thể thực thi mã JavaScript,
phía máy chủ và nó trở thành loại ngày càng phổ biến
của trên tầm vóc tương tự này ngày kể từ ngày có lẽ Ruby và PHP
và Python và bạn sẽ thấy
rằng nó có một số khá tính năng mạnh mẽ bằng cách của một số
của ngôn ngữ được xây dựng trong cấu trúc.
Nhưng lần đầu tiên, một số dễ dàng thứ chỉ để nhắc nhở bạn
như thế nào ngôn ngữ này hoạt động và nếu bạn gặp khó khăn nhìn thấy bất kỳ
điều này, chỉ kêu la ra và chúng tôi sẽ điều chỉnh.
Vì vậy, một mặt hàng như trong PHP có không có khái niệm về một chức năng chính,
bạn chỉ cần bắt đầu viết mã
và bạn có thể therefor giải thích nó trên xuống dưới.
Trong bối cảnh của một trình duyệt
hoặc trong một cái gì đó bên máy chủ chúng ta sẽ thấy một số ví dụ
trong một chút.
Điều kiện, cú pháp tương đương với PHP cũng như C,
C + + và một số ngôn ngữ khác vì vậy chỉ cần để cung cấp cho bạn một cảm giác
làm thế nào chúng ta có thể cấu trúc nó,
đó chỉ là một kinh điển điều kiện.
Biểu thức boolean, chính xác cú pháp như bạn đã thấy
trong những giống khác ngôn ngữ, cả hai cho Oring
và kết thúc việc cùng nhau.
JavaScript có bị chuyển mạch, giống như PHP và của người khác làm
và bạn không giới hạn, như trong C để nguyên thủy không thể thiếu
như ký tự và số nguyên có thể thực sự làm các loại giá trị.
Vòng. Vì vậy, đây là chính xác như nhau
và có lẽ hàng chục ngôn ngữ, trong khi vòng, làm trong khi vòng
và sau đó lừa này đây.
Vì vậy, đây là loại được gọi là điều tra nhanh
và đó là một cách rất thông minh chỉ như trong PHP làm
cho mỗi FU như thanh bạn có thể tương tự,
trong một đối tượng JavaScript, nơi đối tượng là tên
của biến ở đây, nói rằng, var i trong đối tượng và trên mỗi lần lặp
của vòng lặp này, tôi là sẽ là một
trong những chìa khóa từ đối tượng đó.
Vì vậy, nếu bạn có một đối tượng cho một sinh viên và sinh viên có một ID
và một tên và một ngôi nhà, lặp đi lặp lại tôi sẽ
về giá trị của ID và tên và nhà và bạn có thể do chỉ số
vào đối tượng như thể đó là một mảng sử dụng khung vuông
ký hiệu để có được giá trị ID chính hoặc tên
hoặc nhà và vv.
Và trái với thông thường giả định, các đối tượng JavaScript,
tài sản không phải nhất thiết phải đảm bảo được
theo thứ tự, đây cũng là đúng với PHP do đó, không giả định
rằng mọi thứ sẽ ở lại theo thứ tự
mà bạn đặt những chính cặp giá trị vào một đối tượng.
Làm thế nào về mảng?
Có một vài cách để viết nó cú pháp
nhưng điều này có lẽ là nhất phổ biến hiện nay chỉ sử dụng hình vuông
khung ký hiệu.
Vì vậy, đây là một biến gọi số có mảng
sáu số nguyên đó, đây là một chuỗi đơn giản
và thông báo những gì vắng mặt từ những ví dụ,
là những gì JavaScript dường như còn thiếu.
Yeah. Vì vậy, không có khái niệm đánh máy, chắc chắn không
trong bối cảnh này ở đây, nhưng điều này thực sự là một chuỗi.
Vì vậy, JavaScript có các loại và đó là thực sự là một mảng
mà là chính nó một loại và mỗi nguyên tố
trong mảng đó là loại số như JavaScript gọi họ.
Vì vậy, nó là một loại lỏng lẻo ngôn ngữ và chúng ta sẽ thấy
JavaScript như PHP có một nhà điều hành sắc
và các cơ chế khác thực sự kiểm tra những gì các loại
của một số biến là cả hai để kiểm tra lỗi
và cho các ứng dụng khác.
Và đây là một đối tượng mẫu chỉ chứa một ID và một tên.
Và bây giờ, thông báo rằng chúng tôi sử dụng ký hiệu dấu ngoặc nhọn,
thụt đầu dòng và trắng không gian là loại vô nghĩa
và điều này tuyên bố một biến có tên là Rob
và có ID là 1 và kiểu ngày là ở đây số lượng của chúng tôi
và chuỗi tương ứng.
Và sau đó là một cái gì đó hơi khác nhau
nếu bạn đã từng thực hiện bất cứ điều gì với Ajax những ngày này?
Bạn có thể sử dụng một đối tượng như thế này
nhưng những gì đáng chú ý ở đây?
Những gì cú pháp bao giờ là quá khác biệt, chỉ cần một vài
thứ giữa ví dụ này đó là phải thừa nhận là nhỏ hơn
và ví dụ lớn hơn này.
Vì vậy, lần đầu tiên trong của giáo dân hạn, cái gì đây?
Loại là những gì nhân viên bạn sẽ nói gì?
OK, nó là một mảng, nó là một mảng của những gì?
>> Đối tượng.
>> OK, nó là một mảng của các đối tượng.
Và bây giờ, chỉ tập trung vào một - bất kỳ một trong các đối tượng này,
những gì khác nhau giữa điều này và điều này?
>> Các phím được chuỗi.
>> Yeah. Vì vậy, phím chuỗi,
và các phím thực sự chuỗi trong cả hai trường hợp
và đây là một loại ngu ngốc
trong thiết kế lịch sử ý kiến ​​của tôi quyết định bất cứ khi nào bạn đang sử dụng
JSON, JavaScript Object Notation,
mà chủ yếu là một định dạng giao thông
để gửi dữ liệu thường trên mạng
giữa máy khách và máy chủ, bạn cần phải nhớ
rằng đây không phải là thực sự JSON hợp lệ và đây là một
các FYIs trừ khi bạn đã bao giờ đập đầu vào tường
trong vài phút cho không tốt lý do, đó là không hợp lệ JSON
bởi vì các phím không thực sự trích dẫn.
JSON ngu ngốc yêu cầu các phím không chỉ được trích dẫn,
nhưng mà họ được gấp đôi trích dẫn, báo giá duy nhất không đủ.
Vì vậy, điều hơi ngu ngốc và nhiều hơn nữa của một thực tế thú vị
cho các mục đích của ngày hôm nay nhưng điều này quá sẽ JavaScript hợp lệ
nó chỉ là không - các ngược lại là không đúng sự thật.
Được rồi.
Vì vậy, chúng ta sẽ thấy rất nhiều hơn về điều đó.
Được rồi.
Vì vậy, đó là JavaScript cú pháp có lẽ là khá
quen thuộc, bất kỳ bạn của những người có không bao giờ sử dụng JavaScript trước
nó không phải là một bước nhảy vọt từ PHP hoặc hầu hết bất kỳ ngôn ngữ thủ tục
mà bạn có thể đã sử dụng.
Vì vậy, hôm nay chúng tôi sẽ tập trung vào những khía cạnh thú vị
JavaScript đặc biệt trong bối cảnh không có JS
nhưng không độc quyền vì cho đến bây giờ bạn đã có thể,
nếu bạn sử dụng Javascript, sử dụng nó bên trong một trình duyệt.
Vì vậy, không có JS là một môi trường sau đó trong một chút sẽ
cho phép chúng ta truy cập JavaScript mã khách hàng -
phía máy chủ nhưng trước tiên, chúng ta hãy có một cái nhìn
tại cái gì đó là một ít hơn phía khách hàng.
Vì vậy, tôi đã đi và đây là liên kết trên trang web của các khóa học,
nếu bạn muốn chơi cùng, có hai thư mục con
trong Zip ngày hôm nay của gọi đinh tán nguồn zip trên trang web
và đây chỉ là một vài ví dụ hồi tưởng
những thứ bạn có thể đã thấy trước và tôi loại xây dựng chúng
từ đơn giản nhất để hơi phức tạp hơn để trêu chọc
ra một số tính năng của JavaScript.
Vì vậy, chúng ta hãy đi trước và tận một cái nhìn ví dụ tại này.
Vì vậy, thật đáng buồn là thẻ chớp giết chết cách đây vài năm
như cách đã có đẹp hơn và đẹp hơn
và thẻ chớp là nghĩa đen mở khung nhấp nháy khung gần
và loại không còn với chúng tôi.
Nhưng, chúng ta vẫn có thể hồi sinh ý tưởng này của một thẻ bằng cách chỉ cần loại
suy nghĩ về nó một cách hợp lý, làm thế nào để bạn đi
về làm một cái gì đó như này nhấp nháy trực giác?
Giả sử bạn biết một chút bit của JavaScript và CSS hoặc
vào thời điểm này, đó là OK nếu bạn không.
>> Thiết lập một thời gian ra và ẩn nó sau đó sau khi tôi sẽ khóa nó
ra và hiển thị nó một lần nữa.
>> Yeah, hoàn hảo.
Đây là loại chương trình 101,
làm thế nào bạn sẽ đạt được một hiệu ứng hình ảnh như thế này?
Vâng, bạn nào đó phải thể hiện một cái gì đó
và sau đó ẩn một cái gì đó, chương trình một cái gì đó, một cái gì đó ẩn
và như Jonathan đề xuất sử dụng một số loại thời gian ra,
một số loại lịch trình, bạn có thể làm điều này nhiều lần mà không cần
sử dụng một vòng lặp hoặc một cái gì đó như thế.
Vì vậy, hãy để tôi đi vào chớp-0.html
và cho tôi thu nhỏ font một chút
để nhiều của điều kiện.
Và chúng ta hãy có một cái nhìn vào những gì đang xảy ra ở đây.
Vì vậy, trước hết, nhận thấy rằng cơ thể
của trang này là siêu đơn giản, bên trong cơ thể
trang chỉ là một div.
Tôi đã tự ý đưa ra một ID của lời chào
và đó có thể là bất cứ điều gì miễn là nó là duy nhất
và sau đó tôi chỉ có một số văn bản đơn giản, xin chào thế giới.
Vì vậy, nếu bây giờ tôi di chuyển lên, nhận thấy một số kiểu dáng lông.
Vì vậy, tôi nói, sắc nét chúc mừng, mà như bạn biết
trong CSS chỉ có nghĩa là duy nhất xác định các yếu tố
với một ý tưởng về chúc mừng,
kích thước phông chữ sẽ tùy tiện được điều này, lợi nhuận và căn chỉnh văn bản.
Vì vậy, không cần quan tâm chi tiết thẩm mỹ
đến khoảng trung tâm văn bản.
Vì vậy, phần thú vị là trong thẻ script lên đây
mà tôi xảy ra để đặt bên trong của người đứng đầu của trang.
Vì vậy, we'll - bạn có thể làm này trong nhiều cách
và chúng ta sẽ thấy một vài lặp đi lặp lại của cùng chương trình này
nhưng chúng ta hãy bắt đầu từ đầu.
Vì vậy, tôi đã tuyên bố một chức năng gọi là chớp
và dường như nó sử dụng này được xây dựng trong phương pháp gọi là DOM
getElementById mà có lẽ một trong những phương pháp mạnh mẽ hơn
mà bạn có được ra khỏi hộp với JavaScript tìm kiếm
"Lời chào" không phải có dấu ngoặc kép như nó đã được
trong HTML là một trong hai là tốt quá lâu
như bạn là phong cách phù hợp những ngày này tôi dám nói
nhiều người sử dụng Java, báo giá duy nhất trong JavaScript,
dấu ngoặc kép trong HTML nhưng nó không thực sự quan trọng
miễn là bạn phù hợp.
Vì vậy, ở đây nếu bạn không quen thuộc, bạn thực sự có thể truy cập
với JavaScript CSS tài sản trên các yếu tố.
Vì vậy, nhận thấy rằng tôi đã tuyên bố một biến gọi là div
và lưu trữ bên trong của biến đó,
một tham chiếu đến bất cứ điều gì rằng phần tử DOM là.
Vì vậy, nếu bạn nghĩ về CS50 hoặc bất kỳ lớp học mà bạn nghĩ
về cấu trúc cây và DOM, Document Object Model,
đây chỉ là một tài liệu tham khảo đến một nút trong một cây,
đại diện cho trang này
và nếu div.style.visibility tài sản bằng, bằng, bằng,
ẩn, sau đó tôi chỉ muốn có một chuyển đổi nó
Jonathan đề xuất nếu không tôi muốn
để chuyển nó cho ẩn.
Bây giờ, khi ở bên cạnh, tại sao các ba bằng đó?
Hoặc đó là những gì so với bình đẳng đôi?
>> Tương đương nghiêm ngặt.
>> Xin lỗi.
>> Tương đương nghiêm ngặt.
Vì vậy, đó là các nhà khai thác bản sắc
nơi bạn đang kiểm tra không chỉ có giá trị của biến
như một, cảm giác bình đẳng như nhau nhưng cũng là loại của nó.
Vì vậy, mặc dù chúng ta có không quy định này đến nay bất kỳ dữ liệu
loại cho bất kỳ biến trong này hoặc bất kỳ trang trình bày,
có một loại liên quan với chuỗi ẩn
với giá trị đó, ẩn và đó là chuỗi nhiên.
Vì vậy, trong trường hợp này, không quan trọng
bởi vì không có cách nào mà chúng ta sẽ conflate một chuỗi
của "ẩn" với một số giá trị khác
nhưng điều này thường là một tốt thói quen tôi sẽ nói để có được
vào sử dụng bằng, bình đẳng,
dấu bằng thường một điều tốt.
Nó sẽ làm cho mã của bạn mạnh mẽ hơn cả trong PHP nhưng
và trong JavaScript bởi vì bạn sẽ chạy
vào thỉnh thoảng trường hợp góc trong đó giá trị có thể là không
rằng bạn đang kiểm tra và không có thể được đúc kết với sai
hoặc có thể là không và như trong PHP,
Javascript cũng có thể có nhiều giá trị sai mà số không
và sai và vô giá trị và không xác định tất cả có thể giải quyết ngầm
false.
Nhưng nếu bạn đang thực sự muốn để kiểm tra các giá trị cụ thể
như bằng không, số lượng, hoặc sai Boolean sau đó bạn có
sử dụng điều hành nhận dạng này.
Vì vậy, nó có thể xảy ra để có được vào nào mặc dù ở đây,
đó là loại vô nghĩa bởi vì chúng tôi biết chúng tôi đang kiểm tra
cho một chuỗi giá trị và nó sẽ không có bất cứ điều gì khác.
Vì vậy, đây là sự kỳ diệu sau đó, nếu tôi di chuyển xuống dòng này đây,
rõ ràng, xây dựng vào đối tượng cửa sổ
và đây là một tính năng của một trình duyệt bạn có thể truy cập
này siêu toàn cầu đối tượng được gọi là cửa sổ,
bên trong đó là một số chức năng,
nếu phần trong đó được thiết lập khoảng thời gian
và phải mất rõ ràng những loại lập luận?
Yeah.
>> Chức năng gọi và thời gian.
>> Tốt. Vì vậy, một chức năng gọi và thời gian
và do đó đặc biệt là tham chiếu đến một chức năng,
một con trỏ đến một chức năng trong một cảm giác
và đó là chức năng đó là sẽ
để thực hiện mỗi số mili giây và trong trường hợp này,
nó mỗi 500 mili giây.
Vì vậy, nó là một cách gây hiệu quả và vòng lặp vô hạn
mà không sử dụng lặp đi lặp lại nhưng thay vì nói với JavaScript
cho động cơ bên trong của trình duyệt
để làm điều này mỗi 500 mili giây hoặc gần
đến 500 mili giây như nó có thể,
nó chỉ ra rằng bên dưới mui xe,
có gì được gọi là một sự kiện vòng lặp và chúng tôi sẽ trở lại này
trong bối cảnh của nút JS mà chỉ liên tục loại
ngồi đó, quay, chờ đợi cho việc phải làm
và ngay sau khi nó nhận ra,
500 mili giây đã trôi qua chớp sẽ được gọi trở lại
và một lần nữa và một lần nữa là cùng với những tác phẩm khác
mà cần phải được thực hiện.
Vì vậy, những gì chúng tôi có thể cải thiện ở đây?
Vâng, hãy để tôi mở lên chớp-1.html
và chứng minh chớp-1.html
như thẩm mỹ hoàn toàn giống hệt nhau.
Vì vậy, những gì chúng tôi có thể cải thiện ở đây?
Vâng, nhận thấy rằng nó là loại vô dụng
để xác định một chức năng gọi là Nhấp nháy vì bao nhiêu
trong bao nhiêu nơi đã làm tôi gọi hàm chớp?
>> Chỉ cần một lần.
>> Vì vậy, một trong.
Vì vậy, nó không phải là xấu, thực tế nó có thể là khá
thẳng về phía trước.
Tôi xác định một chức năng chớp, tôi gọi một chớp chức năng bằng cách
của tham số này, nhưng về mặt kỹ thuật,
không có lý do nó và một mô hình phổ biến
trong JavaScript là để thực sự sử dụng các hàm lambda
như bạn có thể nhớ lại từ 51 hoặc chức năng ẩn danh
mà nếu bạn không cần một tên cho một chức năng,
nếu bạn chỉ gọi nó chắc chắn ở một nơi,
tại sao bận tâm làm lộn xộn mã của bạn, làm lộn xộn các lập trình tâm
và tên của bạn không gian thực sự với các biểu tượng
rằng bạn không thực sự cần phải quan tâm.
Và vì vậy, trong phiên bản này đây,
thông báo rằng tôi sẽ gọi window.SetInterval trực tiếp
ở đầu của tôi thẻ script sau đó tôi đang đi qua
trong một hàm không tên không có đối số
và đó là hoàn toàn tốt và sau đó cơ thể
chức năng nó xuất hiện là giống hệt những gì nó đã được trước
và cú pháp chỉ Sự khác biệt bây giờ là
ở đây bên cạnh 500.
Tôi đóng cửa cơ thể chức năng
và sau đó tôi nói thực hiện mã trước đây,
mỗi 500 mili giây.
Thay đổi như vậy, rất nhẹ
nhưng một bước tiến tới những gì có thể là một thanh lịch hơn
thực hiện điều này.
Vì vậy, chúng ta hãy lấy cái này bước xa hơn nếu bây giờ tôi đi
vào chớp hai, bạn sẽ thấy một thư viện chung,
ảnh hưởng của mà là có
để được hoàn toàn không quan trọng về mặt thẩm mỹ nhưng nếu chúng ta đi
thành phiên bản hai đây, thông báo rằng ở phía trên đầu của tôi,
Tôi đã bao gồm phiên bản mới nhất của JQuery.
Và sau đó, ở đây, Tôi chỉ làm sạch
lên mã một chút, đó là sẽ không phải là một thế giới vui vẻ
tiếp tục sử dụng chức năng DOM bản địa
và loại JavaScript liệu.
Trong thực tế, JQuery như bạn có thể biết đã trở nên phổ biến
hầu hết mọi người chỉ xung đột jQuery với JavaScript
nhưng thực sự chỉ là một bữa ăn tối thư viện hữu ích bằng văn bản
Một tác giả tên John Resig và kể từ khi những người khác
có chỉ làm cho một rất nhiều thứ tẻ nhạt
trong JavaScript dễ dàng hơn và gọn gàng hơn.
Vì vậy, trong trường hợp này ở đây những gì đang xảy ra?
Vì vậy, tôi có sự xuất hiện của một dấu đô la, thêm vào đó
chỉ trong một khoảnh khắc, sau đó đây là một chọn CSS.
Vì vậy, nó rất giống trong tinh thần với những gì tôi đã làm trước đây,
nhưng lần này, tôi nghĩa là sử dụng thẻ băm
để chỉ ra một độc đáo định danh được gọi là lời chào
và sau đó rõ ràng . Css là một phương pháp xây dựng
vào bất cứ điều gì đối tượng là tôi chỉ tạo ra
và tôi kiểm tra giá trị của khóa tầm nhìn.
Và nếu giá trị của khóa đó bằng, bằng, bằng, ẩn,
sau đó tôi sẽ chuyển nó và Tôi sẽ chuyển nó thời gian này
bằng cách sử dụng cùng một phương pháp mà dường như bị quá tải
trong ý nghĩa rằng nó có hai chữ ký khác nhau,
một với một đối số và một với hai đối số,
thứ hai trong số đó là setter,
cựu trong số đó là một getter vậy để nói chuyện.
Và nếu tò mò và nếu bạn muốn không bao giờ thực sự nhìn vào điều này,
nếu chúng ta đi jquery.css hy vọng hit đầu thực sự là này
và bạn có thể thấy một nhiều hơn lời giải thích chính thức
mà chúng ta chỉ cần sử dụng này, . Css với tên tài sản
và sau đó là setter là dấu chấm CSS
với một tên bất động sản và một giá trị.
Vì vậy, nhẹ sạch hơn, nhưng thông báo các loại mô hình ở đây
với mỗi lần lặp của mã này,
chúng ta đang loại làm cho nó chặt chẽ hơn và chặt chẽ hơn và chặt chẽ hơn
và có nói thiết kế tốt hơn
vì chúng ta đang sử dụng một người nào đó đang khác đó là loại bỏ
một số phức tạp.
Vì vậy, bây giờ chúng ta hãy làm này thậm chí còn đơn giản hơn.
Và trong thực tế, nếu tôi loại bỏ tất cả các báo giá bạn sẽ chỉ nhìn thấy tất cả các
bình luận bạn sẽ thấy như thế nào đơn giản này đã nhận được.
Một trong những sự khác biệt ở đây tất nhiên là
mà tôi đang sử dụng một chuyển đổi Phương pháp này cũng đi kèm xây dựng
trong jQuery và đó chỉ là
vì có người khác viết mã
mà thực sự Toggles thiết lập tầm nhìn
của bất kỳ phần tử DOM mà bạn gửi đi.
Vì vậy, tốt hơn và tốt hơn.
Và do đó, đây là một mô hình,
mặc dù đây là một bữa ăn tối ví dụ đơn giản và sắp xếp
có hiệu lực ròng ngu ngốc mà là một phần của văn bản nhấp nháy,
nó là loại suy nghĩ quá trình đó bạn nên suy nghĩ -
suy nghĩ về không nhất thiết phải là đầu tiên
viết một cái gì đó thụ động cho dự án sắp tới
nhưng chắc chắn là bạn lặp với cố vấn của bạn hoặc với tôi
và các cuộc họp nhóm của bạn hoặc bạn chỉ xem xét mã đồng đội của bạn
về thắt chặt mọi thứ, phải không?
Sau khi tất cả, họ ít -
một ít dòng mã bạn cuối cùng có
trong lý thuyết các lỗi ít bạn có khả năng được mời
bởi vì đơn giản là có mã ít hơn để gây rối với.
Được rồi.
Vì vậy, một vài đồ ăn tay cầm.
Hàm lambda, chức năng ẩn danh,
trong đó nhiều bạn đã thấy trước
và sau đó cũng chỉ thắt chặt mọi thứ với một thư viện
như jQuery trong này trường hợp cụ thể.
Được rồi.
Bất kỳ câu hỏi?
Chúng ta hãy làm một khác phía khách hàng khía cạnh đây,
ở dạng không chúng tôi có Ảnh hưởng thực này.
Hình thức siêu đơn giản và rõ ràng nếu tôi cố gắng nhấp vào đăng ký tại đây,
ban đầu nó nói với tôi là bạn đăng ký, tốt, không thực sự.
Vâng, tại sao vậy?
Vâng, đây là hình thức-0.html rất ít mã,
không có JavaScript nào và nó hoàn toàn là một loại giả
hình thức vì hành động giá trị là registered.html
có nghĩa là không có vấn đề gì Tôi gõ vào hình thức này,
ở đâu là nó đi được gửi trên máy chủ?
Yeah. Vì vậy, để registered.html mà rõ ràng là một file HTML
đó là do tĩnh tập tin mà không có phương tiện
của việc người dùng nhập vào giả định không có mã JavaScript
trên đó là tìm kiếm trong các URL
vì vậy đây là hoàn toàn một noop và rằng không có gì sẽ xảy ra
với một dữ liệu gửi, nhưng bạn có thể thấy cấu trúc
của một hình thức HTML5 khá đơn giản
mà có một vài mật khẩu, một vài loại đầu vào.
Vì vậy, chúng ta hãy thực sự bây giờ thêm một số kiểm tra lỗi
và xem làm thế nào chúng ta có thể cải thiện điều này.
Vì vậy, đây là sắp xếp của một người nghèo cách con người thực hiện điều này
và đó là sắp xếp của một đoạn khó chịu của mã.
Vì vậy, đầu tiên chúng ta hãy cuộn xuống phía dưới
để xem những gì là cùng và những gì khác nhau.
Điều duy nhất khác nhau bây giờ giữa này
và các phiên bản trước là mà tôi đã đưa ra hình thức và ID
của "đăng ký" có thể có được bất cứ điều gì tôi muốn
nhưng có nghĩa là nó sẽ được duy nhất nhận dạng ngay cả khi đó không phải
thực sự cần thiết bởi vì nếu một trang chỉ có một hình thức chắc chắn tôi
có thể tìm thấy nó với một trong phương pháp chọn của jQuery.
Nhưng cách này chỉ làm cho nó xác định hơn.
Vì vậy, nếu tôi đi ngay bây giờ để kịch bản của tôi thẻ, thông báo sau đây,
window.onload bình đẳng một chức năng vô danh.
Vì vậy, những gì đang làm điều này?
Vì vậy, bạn có thể nhớ lại rằng trong lập trình phía máy khách -
JavaScript trang HTML thay đã nhiều sự kiện liên quan
với các yếu tố, nhấp trình và tập trung
và làm mờ và khác sự kiện có thể xảy ra
như một người sử dụng thường tương tác với trang web,
window.onload những gì nó nói.
Trên các cửa sổ toàn bộ tải
do đó, khi tất cả các hình ảnh đã được tải xuống một lần tất cả các file đã
được tải về và một lần trang đã được nạp,
làm đoạn code sau, và thông báo nếu tôi chuyển sang phía dưới
của phương pháp này, nhận thấy rằng không có dấu ngoặc
sau khi nẹp xoăn mà là để nói
rằng tôi không thực hiện chức năng này lên đây bây giờ,
trình duyệt sẽ thực hiện nó cho tôi khi nó đã được xác định
rằng trang đã được nạp.
Vì vậy, chúng ta hãy xem những gì chúng tôi đã làm,
document.getElementById đăng ký
để chỉ mang lại cho tôi một tham chiếu đến nút
trong cây đó là của có ID đăng ký.
Và bây giờ, tôi sẽ đăng ký xử lý sự kiện khác
bằng cách làm form.onsubmit được chức năng ẩn danh này
có nghĩa là sau mã nên thực hiện bất cứ khi nào
hình thức được đệ trình.
Bây giờ, hầu hết đây chỉ là loại nhàm chán logic.
Vì vậy, nếu giá trị của lĩnh vực thư điện tử trong các hình thức là
"Không có gì", sau đó bạn phải cung cấp địa chỉ email của bạn,
bạn hét vào mặt người sử dụng với một cảnh báo và sau đó trả về false.
Và sau đó tôi có một loạt các kiểm tra khác,
kiểm tra mật khẩu,
kiểm tra nếu mật khẩu là như nhau,
kiểm tra nếu thỏa thuận hộp kiểm được kiểm tra hay không
và tôi chỉ hét vào mặt người sử dụng nếu có
của những bài kiểm tra thực sự thất bại.
Và như vậy, đây là một ví dụ thậm chí mặc dù nó là một chút giả tạo
đây thực tế là tôi đang sử dụng bằng, bằng, bằng,
có nghĩa là người sử dụng không thể cố gắng để lừa tôi
bằng cách gõ vào những gì giá trị.
Hay đúng hơn là tôi thực sự kiểm tra sự hiện diện
của chuỗi sản phẩm nào, người sử dụng đã không gõ bất cứ điều gì được nêu ra.
Nếu người dùng gõ trong nghĩa đen không,
"Không" có khả năng có thể nhầm lẫn với chuỗi rỗng.
Và tôi nói đó là loại của vô nghĩa ở đây
bởi vì rõ ràng thậm chí bằng không không phải là một địa chỉ email.
Nhưng nếu đây là một nhiều hơn lĩnh vực chung chung như một trường văn bản
hoặc một tên hoặc mô tả hoặc một cái gì đó bạn muốn đánh giá cho
và nó không nhất thiết cú pháp có
là một địa chỉ email, người sử dụng có thể gõ một cái gì đó như không
và một lần nữa trường hợp góc nhưng đó là lý do tại sao thường kiểm tra các loại được
một điều hữu ích.
Bạn đang thực sự kiểm tra người sử dụng đã đánh máy không có gì
vào lĩnh vực đó.
Vì vậy, những gì sẽ xảy ra nếu không có những thử nghiệm thất bại, tốt,
trở về đúng bên trong của một xử lý sự kiện
như onsubmit chỉ có nghĩa là let hành vi ban đầu thực sự
Tuyên truyền, do đó hình thức sẽ được đệ trình.
Và đó là lý do tại sao khi tôi cuối cùng nhấp nộp trước khi tôi nhận
thông qua để register.html và nếu tôi làm điều đó bây giờ, thông báo,
Tôi nhận được mắng nếu tôi không cung cấp địa chỉ email
và tôi có thể gõ malan@harvard.edu,
đỏ [ngữ âm], màu đỏ thẫm, kiểm tra hộp,
và bây giờ đăng ký và nó nói với tôi, một lần nữa,
bạn được đăng ký hoặc không thực sự.
Được rồi.
Vì vậy, chúng ta hãy làm sạch này lên chỉ là một chút và sau đó chuyển tiếp
để mới hơn mới phía máy chủ công cụ.
Vì vậy, nếu tôi đi vào hình thức-2.html, nhận thấy một vài điều.
Vì vậy, một, tôi đã mang jQuery trở lại vào trộn
do đó một lần nữa là ký hiệu đô la này
và bây giờ tôi đang sử dụng một số phương pháp jQuery.
Vì vậy, đầu tiên, đó là những gì về ký hiệu đô la đó là
nên đặc biệt ở đây?
Ký hiệu đô la là những gì tẩm trong hầu hết các mã jQuery?
Yeah.
[Ghi chú không nghe được]
OK. Vì vậy, chức năng ký hiệu đô la đi qua DOM tìm kiếm
cho một cái gì đó với điều này đặc biệt chọn CSS.
Vì vậy, sự thật nhưng gần như quá chính xác.
Đó là những gì sẽ xảy ra khi bạn vượt qua trong một chuỗi
như trong trường hợp này, nhưng bạn không luôn luôn phải vượt qua trong một chuỗi.
Trong thực tế, trường hợp tại điểm, rất dòng đầu tiên ở đây là đây không phải là một
CSS selector, tôi đang đi qua trong một chức năng Lambda.
Vì vậy, nói chung - như vậy, Câu trả lời tốt, nhưng quá chính xác.
Nói chung, là những gì ký hiệu đô la đại diện?
>> Chỉ cần jQuery.
>> Yeah. Vì vậy, chỉ cần jQuery hay nó chỉ là một chức năng
rằng một số năm trước chàng đã viết và những người khác có
tăng cường kể từ đó theo nghĩa đen theo mặc định được gọi là -
oops, được gọi là jQuery.
Nó chỉ - nó quay ra không giống như rất nhiều
của dấu tiếng đồng đô la là một biểu tượng hoàn toàn hợp lệ để sử dụng
trong tên của một biến trong khi
trong ký hiệu đô la PHP rõ ràng là có ý nghĩa đặc biệt
nhưng trong JavaScript như trong một số ngôn ngữ, ký hiệu đô la
và nhấn mạnh và như vậy khác ký tự đặc biệt hoàn toàn VN
để sử dụng trong biểu tượng của riêng bạn tên cho các biến.
Vì vậy, một người nào đó chỉ quyết định đó, bạn biết không?
Nó sẽ được khá tẻ nhạt
để làm cho toàn bộ thế giới gõ jQuery tất cả các thời gian,
hãy để tôi loại trồng một cổ phần trong mặt đất và nói,
"Thư viện này sẽ sử dụng ký hiệu đô la. "
Và trong thực tế, điều này không làm tăng nguy cơ
mà người khác presumptuously sẽ sử dụng các ký hiệu đô la
cho thư viện của mình nhưng có cách để loại bảo hiểm
rằng khi bạn sử dụng đồng đô la ký tên bản đồ để jQuery
bởi vì bạn có thể kiểm tra nếu nó đã được giao
đến cái gì khác cơ bản.
Được rồi.
Vì vậy, đó là tất cả được, không có phép thuật.
Nó chỉ là một gợi cảm tìm kiếm mảnh cú pháp là tốt đẹp
và nhanh chóng và dễ dàng để loại.
Vì vậy, những gì xảy ra khi bạn gõ ký hiệu đô la dấu ngoặc mở
và sau đó là một chức năng vô danh.
Vâng, chỉ ra rằng đây là ký hiệu thực sự viết tắt
cho tài liệu dot sẵn sàng mở dấu ngoặc.
Vì vậy, khi nhận thấy Cynthia trước đó chúng tôi đã tìm thấy một
trường hợp góc.
Nếu bạn chỉ cần vượt qua trong chức năng lambda,
ảnh hưởng của đồng đô la dấu hiệu là một chút khác nhau.
Trong thực tế, những gì đang thực sự xảy ra là nó tương đương với điều này,
đi qua trong một tham chiếu đến đối tượng tài liệu toàn cầu
đó là toàn cầu giống như các đối tượng cửa sổ là
cung cấp cho bạn một số chức năng đặc biệt
có ảnh hưởng đến toàn bộ trang hoặc trình duyệt và nó biến
ra tài liệu đó khi bạn bọc nó với jQuery,
jQuery cơ bản nhận ra, oh, đây là một tài liệu tham khảo
với đối tượng tài liệu đặc biệt,
cho tôi bây giờ đăng ký một xử lý sự kiện được gọi là sẵn sàng
đó là không có nguồn gốc JavaScript hoặc DOM liên quan.
Sẵn sàng là một jQuery điều đó nói
khi trang đã được nạp tất cả các phần tử HTML
nhưng không nhất thiết phải nạp, tất cả các CSS và hình ảnh
và các tập tin JavaScript và đèn flash file và thích.
Vì vậy, đó là một bước trước trên tải sau đó đi trước
và thực hiện những điều sau đây.
Và ngược của việc sử dụng trên sẵn sàng phương tiện là bạn có thể, bạn đã biết,
rằng tất cả các yếu tố trong DOM của bạn,
tất cả các xác định duy nhất điều với ID, họ tồn tại ngay cả
nếu trang, nội dung của nó vẫn tải và tải
và bạn có một số biểu tượng bị hỏng một lúc
hoặc trang trắng trong nền.
Yeah.
Điều gì sẽ xảy ra >> nếu [nghe được]?
>> Perfect dụ, một câu hỏi hoàn hảo.
Vì vậy, chúng ta hãy xem nếu chúng ta có thể mô phỏng này ngay bây giờ.
Vì vậy, hãy để tôi đi trước và xóa này hai dòng lên đây và sau đó
mà không làm phiền để sửa chữa thụt đầu dòng, hãy để tôi đi trước
và xóa này xuống đây - oops, đây xuống đây.
Và bây giờ, hãy để tôi đi qua để trang, đi đến hình thức và loại 2.html
Đăng ký, không có gì có vẻ xảy ra, chúng ta hãy nói, tại sao là,
chúng ta hãy đi trước và mở lên thanh tra của Chrome,
mở ra các điều khiển chỉ để xem nếu bất cứ điều gì xảy ra ở đây, bây giờ,
đăng ký, vẫn không có gì.
Vì vậy, mã này là cú pháp tốt
do đó, tôi không thấy bất kỳ thông báo lỗi màu đỏ,
nhưng những gì rõ ràng không xảy ra?
Không có mã số của tôi là đúng, nó không làm việc vì vậy không
mã số của tôi có vẻ là thực hiện, vậy tại sao thế này?
Vâng, JavaScript và các trình duyệt nói chung thực hiện
nội dung của một trang web, đầu xuống dưới, từ trái sang phải.
Và vấn đề là vì đầu
của trang này đã HTML sau đó đi sau đó kịch bản sau đó kịch bản khác,
điều này sẽ được thực thi trước những gì thậm chí còn sẵn sàng,
hoặc thậm chí tồn tại trong cây đại diện của trang.
Hình thức riêng của mình, thậm chí không phải là cơ thể tồn tại vào thời điểm này.
Vì vậy, jQuery là đủ thông minh với kiểm tra lỗi của nó
rằng nếu không có yếu tố với ID duy nhất của đăng ký,
nó sẽ không bảo lãnh cho về bạn
và chỉ cần kích hoạt một số giao diện điều khiển lỗi và phá vỡ toàn bộ trang,
nó sẽ âm thầm bỏ qua bạn, nhưng lý do rằng không
mã này bao giờ thực hiện được
bởi vì khi bạn có registered này trình xử lý,
không có yếu tố để gắn nó vào.
Vì vậy, đó là sắp xếp của một op không có.
Vì vậy, bằng cách xác định thay vào đó, chờ cho đến khi tuổi đã được nạp
nếu chúng tôi đã làm window.onload điều đó là loại
của cách trường học cũ làm hay jQuery cách quyến rũ
như thế này, chúng ta có thể nói cho nó đợi cho đến khi tất cả
những thẻ HTML có được phân tích để mà ngay cả
nếu những hình ảnh đã không được tải, tại ít nhất nút đó là trong cây,
sau đó có thể được đảm bảo JQuery rằng tất cả mọi thứ ở đó.
Yeah.
[Ghi chú không nghe được]
Vâng, tốt, có hoàn toàn.
Vì vậy, các giải pháp khác để này, nếu bạn không sử dụng này
hoặc không nhớ rằng điều này tồn tại,
bạn hoàn toàn có thể di chuyển tất cả điều này để phía dưới
của trang web, bên trong cơ thể vẫn còn, nhưng dưới hình thức
và đó cũng sẽ giải quyết vấn đề này.
Nó chỉ thường xem xét thực tế xấu.
Đó là một chút lộn xộn và cẩu thả đặc biệt
nếu bạn tiếp tục gây nhiễu tất cả mọi thứ để dưới cùng của trang,
đặc biệt là khi tôi đang giữ những điều đơn giản bằng cách đặt tất cả
mã của tôi bên trong của trang HTML
khi tất nhiên bạn có thể chắc chắn có được vào các thói quen
của bao thanh toán nó ra vào một tập tin riêng biệt
lúc đó nó chỉ đẹp
để tập trung ảnh trong đầu.
Ngoại trừ có một cái giá bạn phải trả
bằng cách đặt JavaScript Tài sản khác như các tập tin CSS
ở đầu trang, một nguy cơ mà bạn chạy là gì?
>> Tải trang chậm.
>> Tải trang chậm, tại sao?
>> Bởi vì chúng tôi đang cố gắng để tải tất cả các thư viện
trước [nghe được].
>> Chính xác bởi vì trình duyệt đọc mã trên xuống dưới,
trái sang phải nếu Google phân tích chậm
hoặc jQuery CDN là chậm hoặc các API của Facebook là chậm
và tập tin đó chỉ bị treo có khả năng phụ thuộc
vào cách bạn tải tập tin đó, toàn bộ trang có thể xuất hiện để treo.
Và nếu bạn thấy điều này rất nhiều thẳng thắn
trên các trang web họ có rất nhiều quảng cáo chất lượng thấp
về họ, chúng tôi chỉ là một chậm hoặc trang web bị bắn rơi có thể treo một trang
đối với một số không xác định số giây
cho đến khi trình duyệt hy vọng lần ra rằng
và sau đó cho bạn phần còn lại của trang.
Vì vậy, nếu bạn đã từng sử dụng như Facebook, nút như,
trong trang web của bạn, cho tôi xem nếu tôi có thể tìm thấy điều này
mà không cần phải đăng nhập vào đây.
Vì vậy, nếu bạn đi đến Nút như Facebook
và nhấp vào một mã nhận được, mẹ kiếp,
cho phép xem nếu chúng ta có thể tìm ví dụ,
chắc chắn ai đó đã đăng này.
[Tạm dừng]
Tôi sẽ từ bỏ trong một vài giây nếu chúng ta không thấy điều này.
Facebook asynch - OK.
Vì vậy, đây là mã và trừ họ đã thay đổi nó gần đây
Facebook thực sự khuyên bạn nên sử dụng
để tải thư viện của họ và thực sự đề xuất
mà bạn đặt này trong cơ thể của trang của bạn.
Vì vậy, Facebook khuyên bạn tạo ra một loại ngu ngốc DIV
mà chỉ cần có ID duy nhất như này, sau đó có một thẻ script
và tất cả sự phức tạp này về cơ bản nào sau đây
và họ không sử dụng bất kỳ JQuery bởi vì họ không muốn
để chịu bất kỳ khác phụ thuộc,
hãy để tôi di chuyển này hơn một chút.
Vì vậy, nhận thấy họ có một chức năng ẩn danh ở đây,
thêm vào đó trong một thời điểm,
sau đó họ sử dụng document.createElement,
họ đang tạo ra một phần tử DOM, điều này giống như malloc vậy để nói chuyện
nơi thẻ là loại kịch bản, nó sau đó xác định
rằng thuộc tính async của thẻ có nghĩa là sẽ
là đúng sau đó bạn đi trước và tìm ra những gì URL
JavaScript của Facebook nên
và điều này chỉ là cách ưa thích
của kiểm tra nên đó là HGP hoặc HDPS.
Và cuối cùng, bạn thông báo những gì Facebook làm,
họ nhận được các nút DOM có một ID của Facebook gốc
đó là những gì họ nói bạn đưa vào trang
và sau đó họ thêm con vì vậy hiệu quả của tất cả điều này là
để loại động tiêm một thẻ script mới vào trang của bạn
như một đứa trẻ của Bảo hiểm tiền gửi mà bạn chèn ở đó để phần còn lại
của tải trang hạnh phúc
và sau đó mã này thực sự được nạp không đồng bộ.
Vì vậy, về cơ bản sau khi thực tế và tôi hoãn lại đề cập đến
các chức năng ẩn danh,
sôi nổi này là những gì cú pháp đề cập đến ở đây
khi tôi không chỉ có chức năng mở dấu ngoặc, dấu ngoặc gần
và sau đó dấu ngoặc nhọn, lý do tại sao các dấu ngoặc mở đây
và sau đó đóng cửa mở, đóng Dấu ngoặc đơn ở đó, những gì mà làm?
>> [Không nghe được] định và sau đó thực hiện?
>> Chính xác, nó xác định một chức năng là vô danh
mà chỉ xác định một chức năng,
tất nhiên không thực hiện một chức năng cho đến khi bạn gọi nó
theo tên, nhưng tất nhiên điều này là một chức năng vô danh
vì vậy bạn không thể gọi nó theo tên nhưng bạn có thể
trong JavaScript thực hiện một chức năng ẩn danh chỉ
bằng cách tóm gọn toàn bộ điều trong ngoặc đơn như chúng tôi đã thực hiện
với dấu ngoặc này và điều này dấu ngoặc ở đây và sau đó là một sửa chữa
đến hết chức năng Dấu ngoặc đơn mở, dấu ngoặc đóng,
nếu bạn không muốn vượt qua nó bất kỳ đối số.
Nhưng điều này có vẻ ngu ngốc,
như lý do tại sao bổ sung này phức tạp cú pháp
hầu hết mọi người không có vẻ công nhận, giá trị là những gì
của gói những ba dòng mã
trong một chức năng vô danh theo cách này.
Yeah.
>> Để tránh ghi đè lên một có giá trị trong [không nghe được].
>> Chính xác, để tránh ghi đè lên một biến
trong trang hiện tại, phải không?
Facebook là hơi presumptuously quyết định,
họ sẽ sử dụng biến E, nó rất có thể
mà bạn hoặc bất cứ ai sử dụng Facebook nút như
hoặc bất cứ cắm xã hội khác
trong có một biến một nơi nào đó gọi là E. Vì vậy,
bằng cách tóm gọn tất cả mã của họ bên trong
chức năng ẩn danh này, họ về cơ bản có phạm vi riêng của họ
điều đó không có nguy cơ clobbering bất kỳ biến hiện có.
Vì vậy, đây cũng là thực sự một mô hình rất phổ biến,
đặc biệt là khi viết một thư viện mã
hoặc khi bạn mình làm không muốn lộn xộn không gian tên của bạn
với các biến số khác mà bạn muốn giá trị sống
và chết một lần bạn thoát khỏi mà khối mã,
đây là một kỹ thuật tốt trong JavaScript.
Được rồi.
Vì vậy, sau đó trở lại với ví dụ này ở đây, tất cả chúng tôi đã thực hiện cuối cùng
với ví dụ này là chỉ làm sạch các mã.
Vì vậy, nó vẫn có một toàn bộ loạt các thiết bị chuyển mạch, một bó toàn bộ
điều kiện ở đây, nhưng nhận thấy một chút của cú pháp,
này truy cập các nút DOM với đăng ký ID duy nhất,
các phương tiện không gian nhìn bây giờ cho một hậu duệ của nút đó,
tìm thấy nó nếu nó loại đầu vào và sau đó thậm chí
nếu bạn không nhìn thấy điều này trước khi, bạn có thể biết
rằng điều này chỉ có nghĩa là tìm thấy nó với các thẻ đầu vào,
các yếu tố đầu vào có một thuộc tính của tên với một giá trị
email, và sau đó cho phép tôi vẫy tay tại một số
các phần còn lại không phải là tất cả những kích thích
nhưng thực sự chỉ là cú pháp jQuery cho các hoạt động tương tự.
Được rồi.
Nhưng những gì không quan trọng đây là các công cụ phía trình duyệt
mà là một thực tế là chúng tôi có cách sạch hơn và sạch hơn
thực sự làm cho rằng công việc mã.
Được rồi.
Bất kỳ câu hỏi?
[Ghi chú không nghe được]
OK. Bây giờ các phần thú vị.
Vì vậy, Node.js Tại sao?
Những người quan tâm?
Bạn biết gì về nó ngày hôm nay?
Node.js, tại sao?
Henry [giả chính tả].
[Ghi chú không nghe được]
Pin thiết lập lại?
Những gì - đây là một hoàn hảo móc vách đá
cho nửa sau của ngày hôm nay.
Tại sao chúng ta không đi và mất nghỉ ngơi 5 phút ở đây,
có một nửa kẹo máy có thể nếu bạn muốn
như một số bánh kẹo mà không đặt một phần tư nhập