The JavaScript Survival Guide
Summary
TLDRهذا النص هو ملخص لفيديو تعليمي يغطي أساسيات لغة برمجة جافا سكريبت، تتضمن المقدمة المزحة التي تقارن جافا سكريبت بفيروس ويناقش كيفية تشغيل الكود في المتصفح والخادم. يغطي النص المفاهيم الأساسية مثل الأنواع الأساسية للبيانات، التحكم في التدفق، المتغيرات، ووظائف جافا سكريبت. يتضمن أيضًا مناقشة المفاهيم المتقدمة مثل الإغلاق والرفع. النص يهدف إلى تعزيز فهم البرمجة الجافا سكريبت والمهارات على التعامل مع الجوانب الغير تقليدية للغة.
Takeaways
- 😀 جافاسكريبت يُعرف بـ 'فيروس'، مما يعني أن مطورو البرمجيات هم 'المضيف' للغة برمجة جافاسكريبت.
- 🔍 في المستقبل قد تصبح جزءًا من مطورو جافاسكريبت، لذا يجب أن تكون مستعدًا للتعامل مع المفاهيم الأساسية للغة برمجة جافاسكريبت.
- 📝 يمكن تشغيل جافاسكريبت على الخادم والعميل، ويمكنك إنشاء تطبيق جافاسكريبت بسيط مثل 'مرحبا بالعالم'.
- 🌐 يمكن تشغيل جافاسكريبت في المتصفح عن طريق إنشاء علامة script في HTML واستخدام خاصية defer لتحميل السكريبت بعد تحميل الوثيقة.
- 📚 في جافاسكريبت، هناك سبع أنواع أساسية من القيم الأصلية، بما في ذلك السلسلة، العدد، المنطقية، الفارغة، الغير محدد، وغير موجود.
- 🔒 القيم الأصلية في جافاسكريبت لا يمكن تغييرها بشكل مباشر، وهي تعتبر قيمة ثابتة.
- 🔄 جافاسكريبت هي لغة ضعيفة النوع ديناميكيًا، مما يعني أنه يمكن استخدام نوع القيمة في وقت التشغيل إذا لزم الأمر.
- 🔄 الكائنات في جافاسكريبت تمثل هياكل بيانات معقدة مثل القوائم والكائنات والوظائف، ويمكن تغييرها بعد تخصيصها.
- 🔄 في جافاسكريبت، يمكن أن تكون القيم المنطقية 'صحيح' أو 'خطأ'، وهذا يعتمد على نوع القيمة ومحتوىها.
- 🔄 يمكن أن تكون الوظائف في جافاسكريبت مجهولة أو معرفة، ويمكن أن تكون مدخلات أو مخرجات لوظائف أخرى، مما يُعرف بـ 'وظائف ترتيب أعلى'.
- 🔒 يمكن أن تكون الوظائف في جافاسكريبت مغلقة، مما يعني أن الدالة الداخلية يمكنها الإشارة إلى متغيرات خارج الدالة المحيطة بها حتى بعد الانتهاء منها.
- 🏷️ في جافاسكريبت، يمكن أن تكون الكائنات مكونًا من أزواج من المفتاح والقيمة، ويمكن تغيير خصائص الكائن بعد إنشائها.
Q & A
ما هي البرمجة الأساسية لغة جافا سكريبت؟
-البرمجة الأساسية للغة جافا سكريبت تشمل المفاهيم الأساسية مثل العمليات الأساسية للغة ووظائفها وكيفية تشغيل الكود.
كيف يمكنني تشغيل كود جافا سكريبت؟
-يمكنك تشغيل كود جافا سكريبت مباشرة على الماكينة عبر الخط السفلى باستخدام node.js أو في متصفح الويب من خلال علامة script في HTML.
ما هي الفرق بين الأنواع الأساسية والكائنات في جافا سكريبت؟
-الأنواع الأساسية هي قيم غير قابلة للتغيير مثل السلسلة والعدد والمنطقية، بينما الكائنات مثل القوائم والعمليات يمكن أن تتغير بعد التعيين.
لماذا يُعتبر جافا سكريبت 'فيروسًا'؟
-هذا التعبير مجرد مقارنة تشير إلى انتشار واسع جافا سكريبت وتأثيرها الineluctable على البرمجة moderna.
ما هي الimmelance في جافا سكريبت؟
-الhoisting هي عملية جافا سكريبت التي ت置 التعريفات الأساسية للمتغيرة والوظائف في الأعلى من السياق التنفيذي.
كيف يمكنني إنشاء تطبيق 'hello world' بلغة جافا سكريبت؟
-يمكنك إنشاء ملف باسم 'index.js' و在里面写下 'console.log("hello world")'، ثم تشغيله عبر الخط السفلى بكتابة 'node index.js'.
ما هي الفرق بين 'var' و 'let' و 'const' في جافا سكريبت؟
-'var' هي الطريقة القديمة للتعريف المتغيرة، 'let' هي للنطاقات المحدودة، و 'const' هي للقيم التي لا يمكن تغييرها.
ما هي الوظائف في جافا سكريبت؟
-الوظائف في جافا سكريبت هي قطعة من الكود التي تأخذ مدخلات وتولد ناتج عندما تتم استدعائها.
ما هو ال뜻 بـ 'this' في جافا سكريبت؟
-'this' هو مفتاح鲨 يشير إلى الكائن الحالي الذي يشغل الكود، قد يختلف هذا الكائن بناءً على سياق الوظيفة.
ما هي ال分别是 'Truthy' و 'Falsy' في جافا سكريبت؟
-'Truthy' هي القيم التي ت coiercible إلى 'true' في الشروط، مثل الأرقام والكائنات، بينما 'Falsy' هي القيم التي ت coiercible إلى 'false' مثل السلسلة الفارغة والعدد 0.
ما هي ال用处 لـ '===' في جافا سكريبت؟
-'===' هو العامل المساواة الصارف الذي يتحقق من المساواة في النوع والقيمة معًا، مما يوفر سلوكا أكثر توقعاً في المنطق الشرطي.
Outlines
😀 JavaScript: Survival Guide and Basics
This paragraph introduces the necessity for developers to understand JavaScript, comparing it to a virus in terms of its ubiquity. The video aims to prepare viewers for the practical aspects of JavaScript programming, including handling its peculiarities. It starts with the fundamental concept of running JavaScript, such as creating a 'Hello World' application using an editor, command line, and within a browser environment. The importance of understanding script tags and their attributes like 'defer' is highlighted, especially for those not using frameworks that abstract this process away.
📚 JavaScript Fundamentals: Primitives, Objects, and Control Flow
The second paragraph delves into the core building blocks of JavaScript: primitives and objects. It explains the seven primitive types, their immutability, and how JavaScript handles type checking at runtime. The paragraph also contrasts these with objects, which are mutable and can represent complex data structures. The concept of 'truthy' and 'falsy' values in conditional statements is explored, along with logical operators and the difference between abstract and strict equality checks. The summary also touches on variable hoisting and the importance of understanding execution context in JavaScript.
🔧 Control Flow and Variable Declaration in JavaScript
This section discusses control flow mechanisms in JavaScript, such as if statements, else-if clauses, and the ternary operator. It emphasizes the importance of understanding truthy and falsey values, as well as the use of logical operators like '&&' and '||'. The paragraph also introduces the switch statement and try-catch blocks for error handling. A deeper dive into variable declaration is provided, explaining the differences between 'var', 'let', and 'const', and the concept of hoisting. The execution context and the implications of variable scope are also covered, along with best practices for variable declaration.
🎯 Functions and Closures in JavaScript
The focus of this paragraph is on functions in JavaScript, starting with their definition and usage. It explains the difference between named and anonymous functions, as well as higher-order functions that can take other functions as arguments or return them as values. The concept of closures is introduced, describing how an inner function can access variables from an outer function even after the outer function has completed execution. The paragraph also touches on the use of 'this' keyword within functions and how it can lead to different contexts depending on the function type (regular vs. arrow functions).
🛠 Understanding Objects and 'this' in JavaScript
The final paragraph discusses objects in JavaScript as key-value pair collections and how they can be manipulated using dot notation or bracket notation. It explains how functions can be properties of objects and how 'this' can be used to reference the object within its methods. The paragraph clarifies the difference in 'this' binding between regular functions and arrow functions, and how to use the 'call' method to explicitly set the 'this' context. It also addresses the challenges of understanding 'this' in various scenarios, such as within the global scope or custom objects.
Mindmap
Keywords
💡جافاسكريبت (JavaScript)
💡مبرمج (Developer)
💡البرمجة العملية (Practical Programming)
💡النواة (Under the Hood)
💡ملف الelcomer (Hello World App)
💡النص البرمجي الخادمي (Back-End Server Side JavaScript)
💡المتصفح (Browser)
💡البرمجة الأساسية (Fundamental Features)
💡البرمجة المنطقية (Control Flow)
💡المتغيرات (Variables)
💡الوظائف (Functions)
💡الكائنات (Objects)
💡الإغلاق (Closures)
💡Truthy والFalsy (Truthy and Falsy)
Highlights
JavaScript is sometimes referred to as a 'virus', implying developers are the 'host'.
The necessity for developers to understand JavaScript's fundamental concepts for survival in the industry.
Introduction to a full JavaScript course focusing on practical programming and interview preparation.
How to run JavaScript code by creating a 'Hello World' application using a simple script.
Explanation of executing JavaScript via the command line with Node.js.
The role of script tags in HTML for browser-based JavaScript execution.
The importance of understanding how script tags work in web development.
JavaScript's seven primitive types: string, number, boolean, null, undefined, symbol, and bigint.
Immutability of primitive types and their inability to be changed directly after assignment.
JavaScript's dynamic and weakly typed nature, allowing for runtime type checks with the typeof operator.
Differences between 'undefined' and 'null', and their respective use cases.
Objects as complex data structures in contrast to primitive types, allowing for mutation.
Concept of 'hoisting' in JavaScript and its implications for variable and function declarations.
The introduction of 'let' and 'const' as alternatives to 'var' for better scope management.
JavaScript's control flow mechanisms, including if statements, else-if, and logical operators.
The concept of 'truthy' and 'falsy' values in JavaScript and their impact on conditional statements.
Explanation of equality operators in JavaScript: abstract comparison with '==' and strict equality with '==='.
Use of the ternary operator for concise variable assignment based on conditions.
JavaScript's 'switch' statement as an alternative to multiple if-else conditions.
The use of 'try-catch' blocks for error handling in JavaScript.
Differences between 'var', 'let', and 'const' in terms of variable scope and reassignment.
Fundamentals of JavaScript functions, including definition, inputs, outputs, and higher-order functions.
The concept of closures in JavaScript and their ability to maintain access to outer function's state.
Introduction to objects in JavaScript as key-value pair collections and their mutability.
The 'this' keyword in JavaScript and its reference to the current object in the code's context.
Different ways to call functions in JavaScript, including using the 'call' method to specify 'this' context.
Transcripts
some people call javascript a virus and
if that's true it means developers are
the host no matter what you label
yourself ads today you have to face the
reality that one day you may join the
hordes of JavaScript developers out
there and when that day comes you need
to be prepared by understanding the
practical fundamental concepts of the
JavaScript programming language today's
video is not about victory it's about
survival welcome to episode 3 of the
full JavaScript course in the last video
we looked at how JavaScript works under
the hood and today we'll look at many of
the fundamental features of the language
as they relate to practical programming
but more importantly I want to help you
survive some of the weirder parts of
JavaScript that might trip you up or
that you might find on an interview
question and many of these concepts like
closures and hoisting can be easily
understood by removing the head or
destroying the brain
chapter 1 where and how do I run my
JavaScript code let's find out by
creating a hello world app open up an
editor like vs code create a file called
index J s and type in console.log hello
world now assuming you have no js'
installed you can run the script
directly on your machine via the command
line we'll have an entire video
dedicated to node.js later in the course
but all you need to know for right now
is that if you type in node index J s in
the command line it will execute the
code in your script so you just wrote a
back-end server side JavaScript
application but when most people think
about J s they're thinking about
browsers and web applications it's
possible to run code in the browser just
like we did from the command line by
opening the developer console in the
previous video we learned that
javascript has an interpreter or JIT
compiler to be precise that will execute
your code when you type it in here but
the browser console is really just a
debugging tool the way that web
applications actually work is they
declare a script tag in an HTML document
we can go ahead and create an index.html
file then we'll add a script tag and set
the source attribute to the JavaScript
file when the browser parses this HTML
file it's going to see the script tag
and then try to load and execute the
script in our case it won't execute the
JavaScript until the document is fully
loaded because we use this defer
attribute this is useful because a lot
of times your JavaScript will reference
HTML elements in the body which won't be
available until the document is fully
loaded now the big caveat here is that
most developers are using frameworks
which will set up the script tag for you
but if you're doing any kind of web
development it's important to understand
how script tags work but now it's time
to move on to chapter 2 primitives and
objects which are two of the lowest
level building blocks in the language
there is a total of seven primitive
types in modern JavaScript with the most
common ones being string number boolean
null and undefined a special
characteristic of primitives is that
they're immutable which means their
value can't be directly changed once
they've been assigned to a variable they
can be reassigned to a different value
but they just can't be changed directly
and because JavaScript is a dynamic
weakly typed language we don't actually
use type annotations in our code but we
can use this type of operator to check a
type at runtime if needed and just for
those who are wondering I'm using the
quota plugin for vs code which displays
the output of my code on the right here
in blue look at these data types in more
detail as we go through the video but
for right now you should know the
difference between undefined in
Knowle undefined is the default value
that you'll see for a variable that
doesn't have a value assigned to it or
for a function that just returns nothing
Knowle is similar in the sense that it
represents an empty value but it's
something that you the developer would
assign explicitly now these primitive
data types can be contrasted with the
object type which represents more
complex data structures like arrays
objects and functions the big difference
is that objects can be seen as a
collection of keys and values or
properties and they can be mutated after
being assigned to a variable so the
bottom line that you need to understand
is that anything that's not a primitive
type is going to inherit from object
that includes things like functions
arrays or any class instances now
there's one other little piece of
weirdness that you might encounter and
that is primitive wrapper objects the
reason I bring this up is because you
may see these out there in the wild and
they allow you to basically wrap a
primitive type in a class instance but
you should never really use them unless
you have a good reason to chapter 3
control flow and truthy versus falsey in
JavaScript we can implement conditional
logic with an if statement if a
condition is true the-- then we execute
this block of code else we execute this
other block of code and we can also use
else--if if there are multiple
conditions to check but the more
important thing to understand here is
what is truthy and what is false e in
JavaScript because JavaScript will
always try to coerce a value into a
boolean when it's encountered inside of
a conditional statement true is
obviously true the-- and anything that's
an object is also true the-- even if
it's an empty array or an empty object
the ones you have to watch out for are
strings and numbers a string that has
length will be true the-- but an empty
string will be false e then the number 0
will be false e but all other numbers
will be true the-- and if you're ever
unsure about a value you can simply add
a double bang in front of it to coerce a
to a boolean yourself now the reason
this works is because the exclamation
mark is a logical not operator a single
exclamation mark will return false if a
value can be converted to true so if you
add two of them then it will give you
the actual boolean that that value will
be course two and what we're talking
about logical operators you should also
know that a double ampersand is logical
and which ensures that all expressions
in the condition will be converted to
true and we also have logical or which
returns true if at least one of the
expressions is true the-- now another
thing you should know is that JavaScript
provides two different equality
operators a double equal sign is called
an abstract
comparison and it will try to make a
type conversion before actually running
the comparison that's pretty weird
so most linters will tell you to never
use it in contrast the strict equality
operator will check for equality on both
the type and the value which will give
you much more predictable behavior when
it comes to conditional logic it can get
pretty verbose if you use an if
statement to define a variable you'll
commonly see this done with the ternary
operator which gives you a shorthand
syntax for defining a variable based on
an if-else statement it has a logical
condition on the left side then a
question mark then the first value is
what will be assigned if the condition
is true the-- and the second value after
the colon is the value if it's false II
now before we leave the topic of control
flow it's also worth noting that
javascript has a switch statement which
allows you to start with an expression
and then compare it to multiple cases
and this can be a good alternative to
if-else statements if you have a lot of
conditions to check and we can also wrap
our code in a try-catch statement which
will attempt to run the code in the try
block but if an error is thrown then it
will move to the catch block you can try
this out yourself by using throw inside
of the try block and then you'll see
that it runs the code inside of catch
and provides that error that was thrown
up above and try if an error is not
thrown then the code inside of catch
will never be run and you can also add a
finally block to the end of all this to
run some code after both try and catch
have been executed and finally a full
six and a half minutes into this video
we're ready for chapter four variables
we'll look at the difference between
varlet and const and also figure out
what hoisting means borrow allows you to
initialize a variable assign a value to
it and then also reassign a value to it
later now before you can really
understand anything else about variables
you need to understand the execution
context and this simply refers to the
way your code is being interpreted
because your JavaScript program likely
contains variables and functions defined
all over the place
so the context defines the relationship
between how your code is written to how
it will be interpreted by the JavaScript
engine we can define a variable anywhere
in our script and that will be
considered a global variable in other
words it's available in the global
execution context that means if I have a
function somewhere else in my code I can
still reference that variable I like to
think of global as an imaginary function
that wraps my script in other words
running a script is just like calling
this imaginary glow
function and that means if we define
additional functions in our code we have
a different execution context for
defining variables for example if we try
to define a variable inside this
function and then reference it in the
global context we'll get a reference
error because the local variable is not
available in this context now that's
pretty straightforward
but there are a few pieces of weirdness
that you need to be aware of if you
assign a value to an undeclared variable
which you should really never do it will
automatically be assigned as a global
variable even if it's done inside of an
enclosing function and the other thing
you need to know about is hoisting which
applies to variables but also function
declarations as well now whenever
JavaScript processes in execution
context it will basically put all the
variables at the top or in other words
hoist them to the top of the context
that means if we initialize a variable
down here at the bottom and then
reference it somewhere higher up in the
code it will still be considered
declared within this scope but the
actual assignment of a value will still
happen wherever you define it in the
code so if you want to keep your sanity
it's always a good idea to declare your
variables at the top of the context but
the bigger problem with var is that it
becomes very hard to keep track of the
scope of variables and there can be a
lot of name collisions as your app grows
more complex luckily we no longer have
to use var because in modern JavaScript
we have let and Const let is similar to
var in most ways but it's limited to the
scope of a block statement that means if
you define a variable inside of an if
statement or a loop it will be limited
to that block and this differs from bar
which would leak out into the parent
scope and also like var variables
defined with let can be a reassigned to
different values later in the code but
in many cases you'll have values that
should never be reassigned this makes it
a lot more difficult to accidentally
override values in your code so when it
comes to variables a good rule to follow
is to always use Const unless you
absolutely know that you'll override
that value later in which case you can
use let and you should respect the
legacy of our but just never use it and
with that we're ready for chapter 5
functions
I think you don't say hello this course
will have an entire video on functions
but there are a few basic things you
should know so let's start by answering
the question of what is a function and
the answer is that it's simply a piece
of code that takes an input and produces
an output when it's called you can use
the function keyword as we're doing here
or you can use the more concise arrow
syntax in modern JavaScript if you omit
braces the code following the arrow will
implicitly return a value so you can
define a function that returns something
on a single line
but as easy as that sounds there's all
kinds of complexity and terminology that
goes along with functions so let's try
to unpack some of the most important
concepts that you should understand as
ajs developer first of all functions can
be anonymous or they can have a name
which will immediately follow the
function keyword and you'll also
commonly see anonymous functions
assigned to the value of a variable and
another thing you'll hear is that
JavaScript supports higher-order
functions and that means we can provide
functions as the input or arguments to
another function or as the return value
from a function in the previous video we
talked about the JavaScript event loop
and callbacks and this is important with
functions because you'll often use
anonymous functions as arguments to
other functions that will be called back
later after some asynchronous code is
finished executing in addition you can
define new functions within a function
and this example the outer function is
the one that wraps the inner function
and that's related to a very important
question that you'll hear in a lot of
JavaScript interviews what is a closure
in the most simple sense a closure is
just a function within a function where
the inner function references a variable
that was declared in the scope of the
outer function now what makes this
special versus a lot of other
programming languages is that the
variable in the outer function will be
maintained in memory even after that
function returns and has popped off the
call stack so this means the inner
function always has access to this state
from the outer function at the time it
was created in the code here you can see
we define a couple of variables in the
outer function then we operate on them
and return them from the inner function
and then expose the inner function by
simply returning it and now because that
outer function has closed over the inner
function we can call it and still have
reference to the state in the outer
function even though we only called the
outer function once we still have access
to its local variables and that's how
you make a closure if you have
experience with an object-oriented
programming language a closure is very
similar to a class
instance at least from a conceptual
standpoint because you have a function
that contains some state and then you
have an inner function that can operate
and change that state in the same way
that a class instance has some
properties and then you have methods
that can change those properties in fact
the class keyword in JavaScript is just
syntactic sugar for functions and
closures but we'll look at classes and
object-oriented programming in a future
video because now we're ready for
chapter 6 objects an object is just a
data structure that allows you to
associate a collection of key value
pairs which is similar to a map or a
hash map in other languages it's
possible to instantiate an object and
then add properties to it one by one but
in most cases you'll use the object
literal syntax this allows you to define
an object by simply enclosing your key
value pairs inside of braces you can
access the value of a key by using dot
notation or with brackets and a string
and you can mutate properties on an
object even when it's defined as a Const
variable and it's also important to
point out that functions can be used as
values on an object then inside a
function we can actually reference
properties on this object by using this
but what the hell is this this is one of
the more challenging concepts to grasp
in JavaScript now remember earlier I
said that anything that's not a
primitive value is an object and this is
just a keyword that refers to the
current object that the code is
operating in if you go into the browser
console and say console like this it's
going to print out the window object
that's because window is the global
scope and browsers when referenced by
itself or if used in a function that's
called normally it will reference the
global object that's easy enough but
what if we have our own custom object
and on that object we have two
properties that define functions the
first function uses the function keyword
but the second function it uses the
arrow syntax now intuitively you might
think that these functions are exactly
the same but that's not the case in the
first function this refers to the object
that it's defined on but when it comes
to the arrow function it doesn't have
its own bindings to this which means it
bypasses our custom function and this
becomes the global object now the other
thing you should know is that when you
have a function there are other ways to
call it beyond just using parentheses
for example you can use it's call method
and in pass in the this context that you
want to buy into the function now any
references that you have to this and the
function will
prints the object that you passed a call
in the code here we're calling this face
and the function but it's currently
bound to the global object which doesn't
have a face property but if we pass in
an object that does have a face property
like a clown or a ghost then it will
return a defined value understanding
this will make you a better JavaScript
developer but it won't be something that
you have to use on a daily basis and
with that being said I think we've
covered enough information for one video
and don't worry too much if that felt
overwhelming we can't have anyone
freaked out out there ok gotta keep our
composure we'll revisit many of these
concepts when we look at the practical
applications of functions objects and
more I'm gonna go ahead and wrap things
up there if this video helped you please
like and subscribe and make sure to
check out the full source code on fire
ship IO
thanks for watching and I will talk to
you soon
[Music]
you
تصفح المزيد من مقاطع الفيديو ذات الصلة
1 كورس شرح أساسيات البرمجة في بايثون خلال ساعة واحدة - جزء | Python in 1 Hour - Part 1 - Algorithms
دورة كاملة : شرح برنامج الاكسل Excel من البداية حتى الاحتراف :2:
Making a Game with Java with No Experience
دورة كاملة : شرح برنامج الاكسل Excel من البداية حتى الاحتراف :3:
برمجة تطبيقات الموبايل (اندرويد وايفون) | خريطة تعلم برمجة تطبيقات الجوال 2024
Kalkulus - 1 1 2 Aksioma
5.0 / 5 (0 votes)