json
method creates a JSON
equivalent column.
We can use $table->json('options');
to store json data in databaselet car = {
mark: 'Toyota',
model: 'AE86',
drift: function(place){ //method
return 'car is drifting on the ' + place;
}
};
---------------------------------------------------------------------------------------------------------------------------------------------------
2)Object() constructor
The Object constructor creates an object wrapper for the given valuelet car = new Object();
car.mark = 'Toyota';
car.model = 'AE86';
car.drift = function(place){
return this.mark+ ' is drifting on the ' + place;
}
new Object('text')
gives us String object, new Object(123)
gives us Number object and so on, anything other than null/undefined given to this constructor will create wrapper for that value___________
3)Constructor functions
Blueprint function to create any number of objects that are the same type and inherit the same functionalityfunction Car(mark, model, speed){
this.mark = mark;
this.model = model;
this.speed = speed;
}
Car.prototype.drift = function(place){
return this.mark+ ' is drifting on the ' + place;
}
let car1 = new Car('Toyota', 'AE86', 240);
let car2 = new Car('Subaru', 'Impreza', 200);
this keyword is an object that owns the code but in this context it is meant to be the newly created object by this constructor
---------------------------------------------------------------------------------------------------------------------------------------------------
4)Object.create() method
let car = Object.create({});
car.mark = 'Toyota';
car.model = 'AE86';
car.drift = function(place){
return this.mark+ ' is drifting on the ' + place;
}
giving null/undefined to create
method will cause newly created object to have no prototype, which by default should be Object.prototype
,
or alternatively you can use prototype of another constructor function let car = Object.create(Car.prototype)
or object itself to set a new prototype of an object let car = Object.create({prototype_property1: 'value1'})
you can also use property descriptor
to assign properties more precisely as you desire
let car2 = Object.create({}, {
mark: {
value: 'Toyota'
writable: true // false by default
enumerable: true // false by default
configurable: true // false by default
},
model: {
value: 'AE86'
},
speed: {
value: 240
},
drift: {
value: function(place){
return this.mark+ ' is drifting on the ' + place;
}
},
})
---------------------------------------------------------------------------------------------------------------------------------------------------
5)ES6 class syntax
WARNING: ES6 features might not be available for older version of some browsers
class Car{
constructor(mark, model, speed){
this.mark = mark;
this.model = model;
this.speed = speed;
}
drift(place){
return this.mark+ ' is drifting on the ' + place;
}
}
this is basically the same as constructor function but the different syntax
---------------------------------------------------------------------------------------------------------------------------------------------------
6)singleton pattern
downside of this is that you can't create many instances and methods will repeat
let car = new function(){
this.mark = 'Toyota';
this.model = 'AE86';
this.speed = 240;
this.drift = function(place){
return this.mark+ ' is drifting on the ' + place;
}
}
;
to the end of the function calls in order for them both to work.
<input id="btn" type="button" value="click" onclick="pay(); cls();"/>
trait A
{
private function smallTalk()
{
echo 'a';
}
private function bigTalk()
{
echo 'A';
}
}
trait B
{
private function smallTalk()
{
echo 'b';
}
private function bigTalk()
{
echo 'B';
}
}
trait C
{
public function smallTalk()
{
echo 'c';
}
public function bigTalk()
{
echo 'C';
}
}
class Talker
{
use A, B, C {
//visibility for methods that will be involved in conflict resolution
B::smallTalk as public;
A::bigTalk as public;
//conflict resolution
B::smallTalk insteadof A, C;
A::bigTalk insteadof B, C;
//aliases with visibility change
B::bigTalk as public Btalk;
A::smallTalk as public asmalltalk;
//aliases only, methods already defined as public
C::bigTalk as Ctalk;
C::smallTalk as cmallstalk;
}
}
(new Talker)->bigTalk();//A
(new Talker)->Btalk();//B
(new Talker)->Ctalk();//C
(new Talker)->asmalltalk();//a
(new Talker)->smallTalk();//b
(new Talker)->cmallstalk();//c
trait Counter {
static $trvar=1;
public static function stfunc() {
echo "Hello world!"
}
}
class C1 {
use Counter;
}
print "\nTRVAR: " . C1::$trvar . "\n"; //prints 1
$obj = new C1();
C1::stfunc(); //prints Hello world!
$obj->stfunc(); //prints Hello world!
Async/Await
was created to simplify the process of working with and writing chained promises. Async
functions return a Promise. If the function throws an error, the Promise will be rejected. If the function returns a value, the Promise will be resolved.SELECT SUM(avg1) FROM (SELECT user_id, AVG(score) as avg1 FROM results GROUP BY user_id)
in this case results table might have multiple records on 1 user id
so basically it gets average score of all users and than sums all average numberhtml {
scroll-behavior: smooth;
}
The scroll-behavior CSS property sets the behavior for a scrolling box
As default it's auto
but if we use scroll-behavior: smooth; the scroll will be animated and smooth.
In HTML
<div class="main" id="section1">
<h2>Section 1</h2>
<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
</div>
Div's must have specified id="someid"
which will be passed in a href attribute.
<a href="#someid">1</a>
With Jquery we can make it more manageable. We can specify exact pixels and positions.
let id = $(this).closest('li').attr('id');
$('html, body').animate({
scrollTop: $('div#section-content-'+id).offset().top - 200
}, 1000);
position: fixed
always fixates an element to some position within its scrolling container. no matter how you scroll its container..
position: sticky
basically acts like position: relative
until an element is scrolled beyond a specific offset, in which case it turns into position: fixed