Menu

Monday, May 2, 2022

Target Server Side implementation using .net SDK

 Target Server Side implementation using .net SDK 


This reference guide shows how Adobe Target customers can install, initialize, and use the .NET SDK.

Reference : https://adobetarget-sdks.gitbook.io/docs/sdk-reference-guides/dotnet-sdk/install-sdk

                    https://adobetarget-sdks.gitbook.io/docs/getting-started/dotnet

Sample Application : https://github.com/adobe/target-dotnet-sdk/tree/main/SampleApp

Saturday, April 30, 2022

Adobe Target : Customer Attributes and People Identification

 Customer Attributes

Demo : https://video.tv.adobe.com/v/27819?quality=12


Feature under People Tab , used to upload offline customer specific (CRM) data with no PI information.

Pre-requisites:

1. ECID/MCID deployed in your website. (Identify visitor across adobe solution)

2. Capture CRM ID/customer ID from page(To identify and map customer who logged in to site and customer attribute data)

3.  Database with information about your customers, which you will want to use in the Adobe Experience Cloud i.e for CRM file upload(CRM data CSV feed)


Saturday, April 9, 2022

Target Snippets

 1. Check if cookie is present, append query parameter as source code .

if(document.cookie.includes('at_check')) {

  var separator = (window.location.href.indexOf("?")===-1)?"?":"&";

 window.location.href = window.location.href + separator + "SourceCode=INT999T"

}

Friday, October 1, 2021

Add Event listener on elements(li or multiple values ) using parent element and passing event,"selector" parameter.

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice HTML</title>
    <link rel="stylesheet" href="/Miscellenious/practice.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="/Miscellenious/practice.js"></script>
   
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
  
    
</body>
</html>

Why and when is document.ready() needed

$(document).ready is for assurance full DOM is available at the time the function is called. Any functions and events not depending on the DOM don't need to be put into the ready event.

Well, 

what if we load dom and css first and javascript at the end(just before /body element)

HUUUU.. 

$(document).ready(function(){}); NOT NEEDED

So Check first , In html where is the javascript reference if it's in <head> you must use ready()
but if just before</body> you can skip utilizing ready()

Check it out :

Thursday, September 30, 2021

JavaScript String indexOf()

 

Example

Search a string for "welcome":

let str = "Hello world, welcome to the universe.";
str.indexOf("welcome")   // Returns 13
str.indexOf("Welcome")   // Returns -1

Definition and Usage

The indexOf() method returns the position of the first occurrence of a specified value in a string.

indexOf() returns -1 if the value is not found.

indexOf() is case sensitive.


Visitors that saw a url containing a specific value

 

Create an audience that visited the pages url containing “baby”.

 

if(page.url.indexOf('baby') != -1)

{

 return true;

}

 


Monday, October 19, 2020

Basic Fundamental of javascript

//------------************ app.js*********************
// // //Variable- Most basic cbuilding block
// // //Variables-Store,Access, Modify== Value
// // //Declare,Assignment ,Operator and Assign value

// // //let name; - with assigning name value- it will show undefined . To fix this add empty string as below
// // let name="Bal Mukund Bangalore";
// // let address,zip,state;
// // console.log(address);

// // //Assign value later
// // address = "Maruthi Layout, AECS Layout"
// // zip = 560037;
// // state = "karnatka";
// // console.log(address,zip,state);

// // //Modify exisitng
// // name = "Barnali Sarmah"
// // console.log(name);

// // // Naming convention for variable
// // //can contain digits,letters,underscore,$
// // //must start with letter, $ or underscore - can not start with number
// // //camelcase or underscore
// // //case sensitive -fullname vs Fullname
// // //let 1name= "Bal"; //  Error- an identifier or keyword can not immediately follow a numeric literal(invalid or unexpected token)
// // //let let name ="Bal" // Error - let is disallowed as a lexically bound name
// // // javascript stops executing if there is an error in earlier line
// // //console.log(fullName) // if variable is not define but trying to print/access , throws error - Uncaught ReferenceError : fullName is not defined

// // //-----*****Number data type******------////
// // //Loose Typed = don't declare type
// // //Number displayed in console should be in blue
// // let number = 34;
// // let pants =2.45;
// // pants ='are great';
// // number +=10; // Add 10 in number value
// // console.log(pants);
// // console.log(number);

// // // Any input value from html element - by default captures as string

// // //----Data types- **** ---//
// // //Primitive - String,Number,Boolean,Null,Undefined,symbol
// // //String
// // const text1 ='some text'
// // //Number
// // const a= 5;
// // //Boolean
// // let value1=true;
// // //null
// // const result1 =null;

// // //undefined
// // let y;

// // //Object - Arrays, Functions , Objects

// // //Array -[] ,0 index based
// // const friend = ['john','peter','Rashmi',45,undefined,null]
// // let bestFriend =friend[2];
// // friend[1] = "Rohan";
// // console.log(friend[1]);

// // //function
// // //function declaration
// // function hello(){
// //     console.log("hello"+ friend[0]);
// // }

// // hello();//call/invoke function hello

// // //parameter/argument of function
// // //sample - greet only Rasmhmi
// // function greet(name) // no need to pass data type under argument. Also argument under parenthesis is local variable
// // //name variable can not be accessed outside this function
// // {
// //     console.log('Hello there ' +name);
// // }
// // console.log('Hello there ' +name);

// // greet("Bob");
// // greet("Ana");

// // //two arguments
// // function greet(name,second)
// // {
// //     console.log(second);
// //     console.log("Hello there" +name);
// // }
// // greet('peter ', 'rashmi');

// // //function Expression
// // const add =function(a,b){ // without name of function is anonymous function
// // //const add =function sum(a,b)    {return a+b;} //function expression with name of function

// //     return a+b;
// // }
// // //Invoke- function with name
// // const thirdValue= add(5,6) // Any new vriable with any name and pass the value under variable name i.e add here

// // //Objects
// // // Objects- key/value pairs methods
// // //dot notation

// // //Example:
// // const person={
// //     name:'Bal',
// //     age: 40,
// //     lastName :'Mukund',
// //     education: false,
// //     married: true,
// //     siblings:['anand','Manish'], //multivalue property i.e array (same sytax as array)
// //    // In ESC6 - below functio can also be added without keyword function keyword -directly by function name
// //    //i.e greeting(){}
// //     greeting: function(){ //function under property name . Can add name of function or keep it anonymous as it is
// //         console.log("Hello my name is Bal Mukund"); //statement ends with semi colon
// //     },

// // };
// // //method - calling function (part of object) by dot notation is called as method as below-
// // person.greeting(); //calling function i.e object method
// // console.log(person.lastName);//accessing object propery

// // //assign object propery to new variable
// // const age= person.age;
// // console.log(age); // access new variable

// // //type of - operator (type of variable) or (type of value)

// // //const x =5;
// // //console.log(typeof x);
// // //console.log(typeof 5);

// // // -------------------------------------------------------------
// // // COnditional logic
// // // If
// // const value =2; //assign variable
// // const num2 =10;
// // if(value){ //boolean i.e value =2 ,true or false. Since value =2 is assigned it will set true and execute statement under if otherwise else
// //     console.log("if condition holds true")
// // }
// // else{
// //     console.log("if condition is false")
// // }
// // //If condition for two variable comparison
// // //Important note: else condition is set (if condition false ) no matter whether else condition is applicable or not(i.e else will always execute if(if condition) fails)
// // if(value>num2){
// //     console.log(value + " is greater than "+ num2);
// // }
// // else{
// //     console.log(num2 +" is greater than " + value)
// // }

// // // !(not condition)
// // const value3 =true;

// // if(!value3){
// //     console.log("Value is true");
// // }
// // else{
// //     console.log("value is false");
// // }

// // // Equality operator
// // // ==(double equal) checks for equal value
// // //===(triple equal) checks for data type and equal value
// // //double = example below
// // const equalCheck = 10;
// // const equalCheck2= "10"
// // if(equalCheck == equalCheck2){
// //     console.log(equalCheck2 +" is equal to(using double equal==) " +equalCheck)
// // }
// // else{
// //     console.log(equalCheck2 +" is NOT equal to(using double equal ==) " +equalCheck)
// // }

// // //triple equal example below
// // const equalCheck3 = 10;
// // const equalCheck4= "10"
// // if(equalCheck3 === equalCheck4){
// //     console.log(equalCheck3 +" is equal to(using ===) " +equalCheck4)
// // }
// // else{
// //     console.log(equalCheck3 +" is NOT equal to (using triple equal ===)" +equalCheck4)
// // }

// // // Logical Operators
// // // (|| - OR), (&& - AND)
// // //OR(||) operator

// // const fullName ="peter";
// // const ageInYears =24;

// // if(fullName=='bob' || ageInYears=='24'){
// //     console.log('hello there user');
// // }
// // else{
// //     console.log("wrong values");
// // }

// // //AND(&&) operator

// // if(fullName!=='bob' && ageInYears==='24'){
// //     console.log('hello there user');
// // }
// // else{
// //     console.log("wrong values");

// // }

// // // String properties and methods
// // // wrapper String Object, don't memorize methods
// // let text = ' Peter Jordan';
// // let result = text.length;
// // console.log(result);

// // console.log(text.length);
// // console.log(text.toLowerCase());
// // console.log(text.toUpperCase());
// // console.log(text.charAt(0));
// // console.log(text.charAt(text.length - 1));
// // console.log(text.indexOf('e'));
// // console.log(text);
// // console.log(text.trim());
// // console.log(text.trim().toLowerCase().startsWith('peter'));
// // console.log(text.includes('eter'));
// // console.log(text.slice(0, 2));
// // console.log(text.slice(-3));

// // // const person = {
// // //   name: 'peter', // property
// // //   greeting() {
// // //     // method
// // //     console.log("Hey, I'm Peter");
// // //   },
// // // };

// // // console.log(person);

// // // console.log(person.name);
// // // person.greeting();

// // //------------------*********-------------------------------
// // // Template Literals - ES6+
// // //Back-tick characters -``(above tab)
// // //interpolation ${} - insert expression(value)

// // const name1 ="Mukund";
// // const age1 = 34;
// // //use template literals
// // const value2=`Hey it's ${name1} and my age is ${age1}`;
// // //without using template literals -traditional way
// // //const value2="Hey it's " +name+ " and my age is " +age
// // console.log(value2);

// // // Arrays and for loop
// // const names = ['Mukund','Barna','Briti'];
// // const lastName = 'Sarmah';

// // let newArray=[];

// // //for loop
// // for(let i=0;i<names.length;i++){
// //     //console.log([i]);
// //     console.log(`My full name is ${names[i]} ${lastName}`);
// //      //console.log("My full name is" +names[i]+ " "+lastName);

// // }

// // //Function,return,if ,arrays,loop . Usecase: Calculate total of all the bills
// // //Define array for grocery bill
// // const grocery =[10,90,200,78,900,310,445,657];
// // const medicines =[575,240,350,650,750,200];
// // const cab=[150,250,675,85]

// // function billTotal(listItems){
// //     let total=0;
// //     for(i=0;i<listItems.length;i++){
// //         total = total+listItems[i]
// //     }
// //     return total;
// // }

// // const groceryTotal=billTotal(grocery);
// // const medicineTotal=billTotal(medicines);
// // const cabTotal=billTotal(cab);

// // console.log({

// //     grocery : groceryTotal,
// //     medicine: medicineTotal,
// //     cab: cabTotal
// // }

// // )

// // // Null and undefined , both represent "no value"
// // //undefined- "javascript can not find value for this"
// // //variables without value
// // //missing function argument
// // //missing object properties

// // //null -developer sets the value

// // let number4 = 20 + null;//20+0;
// // console.log(number4);

// // let number5= 20 + undefined;//20 + 0;
// // console.log(number5);

// // //Variable lookup
// // //{} - code block variable
// // //global variable

// // const globalNumber =5;

// // function sum(num1,num2){
// //     const globalNumber =20;
// //     const result= num1 + num2 + globalNumber;//Javascript starts use of local variable. If local variable not found then pick global variable
// //     return result;
// // }
// // console.log(sum(3, 4));

// //Functions are first call objects-stored in a variable(expression),passed as an argument to another function ,return from the function
// //callback function, Higher order function i.e call function with argument as function
// //function getting passed is callback function.
// //Higher order function- accepts another function as argument(returns another function as result)
// // Thumb rule- Higher order function should not be modified . Instead create new callback function

// //callback function
// function morning(name9) {
//   //callback function
//   return `Good Morning ${name9}`;
//   console.log(`name`);
// }

// function afternoon(name9) {
//   //callback function
//   return `Goood Afternoon ${name9}`;
// }

// function evening(name9) {
//   //call back function
//   return `Goood Evening ${name9}`;
// }

// //Higher order function
// function greet(name9, cb) {
//   //argument passed as cb i.e function. During invoking morning function(callback) is passed
//   const myName = "Mukund";
//   console.log(`${cb(name9)}, my name is ${myName}`);
// }

// greet("bobo", morning);
// greet("Mukund", afternoon);
// greet("Brti", evening);

// //powerful Array methods - forEach,filter,find,reduce
// //Iterate over array- no for loop required
// //Accept CALLBACK function as argument ,calls callback against each item in array .Reference item in callback parameter
// //forEach - does not return new array

// const group = [
//   { name: "Adam ", age: 34, profession: "Content Writer" },
//   { name: "Rod ", age: 34, profession: "Model" },
//   { name: "Steve ", age: 3, profession: "Manager" },
// ];

// const people = [
//   { name: "John ", age: 34, profession: "private", salary: 10000 },
//   { name: "Rod ", age: 34, profession: "Software", salary: 5000 },
//   { name: "Susy ", age: 3, profession: "Government", salary: 900 },
// ];

// function showPerson(person) {
//   // for manipulation on variable within function- pass argument
//   console.log(`My name is ${person.name} and my age is ${person.age}`);
// }

// people.forEach(showPerson);
// // map - returns a new array
// //does not change size of original array

// const ages = people.map(function (person) {
//   return person.age + 10;
// });
// console.log(ages);

// //create variable of object type
// const newPeople = people.map(function (person) {
//   return {
//     firstName: person.name.toUpperCase(),
//     oldAge: person.age + 20,
//     Job: person.profession,
//   };
// });

// console.log(newPeople);

// const names = people.map(function (person) {
//   return `<h1>${person.name}</h1>`;
// });
// document.body.innerHTML = names.join("");
// console.log(names);

// //-------------
// //Continue after Map--
// //------------
// // filter - does return a new array
// //can manipulate the size of array
// //return based on condition - if condition does not match then empty array
// const youngpeople = people.filter(function (person) {
//   return person.age >= 25;
// });

// const job = people.filter(function (post) {
//   return post.profession == "Software" || post.profession == "private";
// });

// console.log(job);

// console.log(youngpeople);

// //find -returns single instance(in this case object)
// //returns first match if condition is true , else returns undefined
// //great for getting unique value
// const devInstnace = people.find(function (instance) {
//   return instance.age >= 25;
// });

// console.log(devInstnace);
// console.log(devInstnace.name);

// //reduce method - reduces to single value -number,array ,object
// // 1 parameter ('acc') - total of all calculations(initial value)
// //2 parameter('curr') - current iteration/value

// const totalSaray = people.reduce(function (acc, currentItem) {
//   //two parameteers, acc for initialization and currentItem for current Value

//   acc += currentItem.salary;
//   return acc;
// }, 0); //,o is to initialize with zero
// console.log(`Total salary is ${totalSaray}`);

// //Math Object - Standard built in object
// const number1 = 5.66;
// const roundNum = Math.floor(number1);

// console.log(roundNum);
// const randomLast = Math.abs(Math.floor(Math.random() * 6) + 1); //range always remains till tcounts.Fix this.what bout if I want to make from 1 to 6 only

// console.log(`Ludo ${randomLast}`);

// //Date - global Object
// days = [
//   "Sunday",
//   "Monday",
//   "Tuesday",
//   "Wednesday",
//   "Thursday",
//   "Friday",
//   "Saturday",
// ];
// months = [
//   "Jan",
//   "Feb",
//   "March",
//   "Apr",
//   "May",
//   "June",
//   "July",
//   "Aug",
//   "Sep",
//   "Oct",
//   "Nov",
//   "Dec",
// ];
// const date = new Date();
// console.log(date);
// //All Date method returns the value in number form i.e 1,2,3
// day = date.getDay();
// date1 = date.getDate();
// month = date.getMonth();
// hour = date.getHours();
// minute = date.getMinutes();
// second = date.getSeconds();
// check = date.toLocaleString();
// clock = `Today is ${days[day]} ,${date1} ${months[month]} and time is ${hour} : ${minute} : ${second} `;
// console.log(clock);
// document.writeln(clock);
// console.log(`Locale String check ${check}`);

// //----------------------------*****************-------------------------------------
// //Document Object Model
// //Similar to CSS - select element or group of elements that you want to affect
// //Decide the effect we want to apply to the selection
// //Many different ways-

// document.body.style.backgroundColor = "blue";
// //select element
// //document.getElementById('btn').style.color='yellow';
// //select element using css-query selector
// //document.querySelector('element').style.color='red';
// //assign element to variable once and apply the effect whenver want
// //const element1=document.querySelector('element');
// //const element2=document.querySelectorAll('element');
// //window object of browser not object of javascript. window is current open tab
// //console.log(window);
// //retuns a node or nodelist(array like object)
// //to get nodeName
// //const list1= btn.nodeName;
// //console.log(list1);
// //TO access window method say - alert , it should be written as below
// //window.alert("hello");
// //however if javascript does not find method it always look in window object
// //alert("hello");

// //To find attribute and method of node use dir(method) of console to node as below
// //console.dir(document);

// //------------------------*********Navigate the DOM-Children ******************----------------
// //childNodes - returns all childNodes including white space which is treated as text node. Examples: NodeList(8) [h1, h1, h1, text, comment, text, script, text]
// //children
// //firstChild
// //lastChild
// //Important note- node selection,append,removal happens on page rendered element and not necessarily the html element in file
// const result1 = document.querySelector("h1");
// const parent = result1.parentElement.parentElement;
// parent.style.color = "red"; // Applies color to parent element
// console.log(result1);
// console.log(result1.parentElement);
// console.log(result1.parentElement.parentElement);
// console.log(result1.children);
// console.log(result1.childNodes);

// //prviousSibling,nextSibling - (can return whitespace too) extract the previous or next sibling of selected element
// //previousElementSibling ,nextElementSibling(does not retun whitespace)
// // const first = document.querySelector("h1");
// // const third = first.nextSibling;
// // third.style.color = "pink";
// // const fourth = third.nextSibling;
// // const prevFourth = fourth.previousSibling;

// console.log(third);
// console.log(fourth);
// console.log(prevFourth);
// console.log(third.nextElementSibling);

// //nodeValue and textContent - to display text content
// console.log(fourth.childNodes[0].nodeValue); //nodeValue gets applied on specific node(if node value present)
// console.log(fourth.firstChild.nodeValue);
// console.log(third.textContent); //displays text of element/node

// //getAttribute, setAttribute - extract or set attribute of element(i.e class ,id,href etc)

// //const headerAll = document.querySelectorAll('h1');
// //const idValue=headerAll.getAttribute('id');//extracting id of headerAll element

// //console.log(headerAll);
// fourth.setAttribute("id", "last"); //setting id to list item
// fourth.setAttribute("class", "last"); //setting class to list item

// //classList(append class), className(override class)- Add/apply css class to element dynamically
// const findClass = fourth.className;
// console.log(findClass);

// fourth.classList.add("red", "blue"); //append class addition to what defined. Also append multiple class with comma separated value
// console.log(fourth.classList);
// fourth.classList.remove("blue"); //remove class from element
// //check if class is present or not for an element - classList.contains
// const result = fourth.classList.contains("last");
// if (result) {
//   console.log("Verified- last class is present");
// }

// //fourth.className='red'; //overrides class
// console.log(fourth.className);

// //createElement(element),createTextNode(text content),appendChild
// // const emptyElement = document.createElement("div"); //create blank div .

// //create text node
// // const textNode = document.createTextNode(
// //   "This is simple text node created by createTextNode"
// // );

// // emptyElement.appendChild(textNode); //attch text node newly created div
// //document.body.appendChild(emptyElement); //attach the text+div to html i.e document attached last element

// //appendChild to an element instead of body
// fourth.appendChild(emptyElement);

// // If want to add element before another element
// //insertBefore('element','location')
// // const heading5 = document.createElement("h1");

// // const text = document.createTextNode("adding h1 element");
// // heading5.appendChild(text);

// // document.body.insertBefore("heading5", "fourth");

// //innerText,prepend
// const heading6 = document.createElement("h2");
// heading6.innerText = `I am dynamic heading`;
// document.body.prepend(heading6);

// //remove,removeChild
// const headingResult = document.querySelector(".last");
// const result2 = headingResult.querySelector("div");
// console.log(result2);
// //result2.remove(); // removes the result2 from document i.e div is removed
// //headingResult.removeChild(result2); //removes the child i.e div element only from last class element

// //innerHTML,textContent
// console.log(result2.textContent);
// console.log(headingResult.innerHTML);
// const ul = document.createElement("ul");
// ul.innerHTML = ` <li class="item"> First link</a></li>
//             <li class="item">Second link</a></li>
//             <li class="item">Third link</a></li>`;
// document.body.appendChild(ul);

// //--------------*******----------------------------------
// //Change CSS with style property
// const randomList = document.querySelectorAll(".item");
// //randomList.style.color = "green";

// randomList.forEach(function changeColor() {
//   randomList[1].style.color = "green";
// });

// //--------------*******-----------
// //Events
//---------------------------------
//Events overview-
//1. Select event
//2.add event listener(pass argument)
//3. what event and what to do
//Click Event
const btn = document.querySelector(".btn");

//aonymous call back function
//btn.addEventListener("click", function () {
//btn.classList.add("blue");
// btn.style.backgroundColor = "green";
//});

//function reference
function changeColor() {
  let hasClass = btn.classList.contains("red");
  if (hasClass) {
    btn.style.color = "green";
  } else {
    btn.classList.add("blue");
  }
}
btn.addEventListener("click", changeColor);
//Mouse Events
//click - fires after full action occurs
//mousedown - button is pressed
//mouseup - button is released
//mouseenter - mouse on to an element
//mouseleave - moved out of an element
btn.addEventListener("click", function () {
  console.log("You clicked me");
});
// btn.addEventListener("mousedown", function () {
//   console.log("You mousedown");
// });

btn.addEventListener("mouseup", function () {
  console.log("You mouseup");
});
btn.addEventListener("mouseenter", function () {
  btn.classList.add("blue");
});
btn.addEventListener("mouseleave", function () {
  btn.classList.remove("blue");
});

//Key Events
//keypress - when key is pressed
//keydown - when key is down
//keyup - when key is up
const nameInput = document.getElementById("name");
console.log(nameInput);
nameInput.addEventListener("keypress", function () {
  nameInput.classList.add("red");
});

// nameInput.addEventListener("keydown", function () {
//   nameInput.classList.add("blue");
// });

nameInput.addEventListener("keyup", function () {
  nameInput.classList.add("red");
  console.log(nameInput.value);
});

//---------------------------------------------------------------------
//Event Object - event object argument e,evt
//info about trigger event
//event.type
//event.currentTarget
//this keyword
//preventDefault() - prevents default behavior

//const heading1 = document.querySelector("h1");
const link = document.getElementById("link");
btn.addEventListener("click", function (event) {
  event.currentTarget.classList.add("red"); //same behavior as btn.classList.add("red") , we can also traverse elemenTarget
  console.log(event.type);
  console.log(this); //this keyword does not work with arrow function
});

function someFunc(e) {
  console.log("link clicked");
  //e.preventDefault(); //usually done for page refresh(form submission) or link click to prevent default behavior
}

link.addEventListener("click", someFunc);

//currentTarget  vs target
//currentTarget - always refers to element to which event handle has been attached to(nested element will get impacted)
//target - identifies the element on whichevent has occured

//---------****************-------------------------------------------
//Javascript Event propogation: Bubbling and capturing
//allows select dynamic elements - fire event without selecting the element
//event propogation - order of events are fired
//event bubbling -clicked element first then bubbles up -default
//event capturing - fires at the root and fires until reaches target
const container = document.querySelector(".container");

const list = document.querySelector(".list-items");

function showBubbling(e) {
  console.log("current Target", e.currentTarget);
  console.log("Target is ", e.target);

  //check if selected/clicked element is link-
  if (e.target.classList.contains("link")) {
    console.log("link clicked");
  }
}
function stopPropogation() {
  console.log("you fired stop propogation");
}
//list.addEventListener("click", stopPropogation); //stop bubbling
//using event listener accessing elements within that-parent or child by target or currentTarget
//always fires from lowest(nested bubble) up to chain/parent i.e always last event will fire first then container
container.addEventListener("click", showBubbling, { capture: true });
list.addEventListener("click", showBubbling, { capture: true });
document.addEventListener("click", showBubbling, { capture: true });
window.addEventListener("click", showBubbling, { capture: true }); //capture :true sets the ordering event from parent to child

//--------------******Submit Event Listener**********-----------------
//preventDefault
//how to get a value(using value property )
const form = document.getElementById("form");
const name = document.getElementById("name");
const password = document.getElementById("password");

form.addEventListener("submit", function (e) {
  e.preventDefault();
  console.log("form submitted");
  console.log(name.value);
  console.log(password.value);
});

//Locale Storage ----------**********
//Web storage API - provided by browser
//session storage(persist data while tab is open),local storage(persist between opening and closing of browser)
//setItem, getItem, removeItem,clear
localStorage.setItem("name", "john"); //second instance overrides the first instance
sessionStorage.setItem("name", "Ram");
localStorage.getItem(name);

//local storage with multiple values
//JSON.stringify() - make in to json string
//JSON.parse();
const friends = ["John", "David", "Bryce", "Kale"];
//localStorage.setItem("friends", JSON.stringify(friends)); //use JSON.stringify in array as strings

const values = JSON.parse(localStorage.getItem("friends"));

let fruits;
if (localStorage.getItem(fruits)) {
  fruits = JSON.parse(localStorage.getItem("fruits"));
} else {
  fruits = [];
}
fruits.push("apple");
console.log(fruits);


----------------------------------------------------------------------------------------------------------------------------
Refrence HTML: index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>DOM</title>
    <style>
        .red {
            background: red;
            color: white;
            text-transform: uppercase;
            font-size: 2rem;
        }

        .btn {
            background: #f15025;
            color: white;
            font-size: 1.5rem;
            text-transform: uppercase;
            border: none;
            display: inline-block;
            margin: 0.5rem;
        }

        .blue {
            background: blue;
            color: white;
            text-transform: capitalize;
            letter-spacing: 10px;
        }
        #link{
          padding: 20px -5000px;
        }
    </style>
</head>

<body>
    <form action="" id="form">
        <input type="text" id="name" />
        <input type="password" id="password" />
        <input type="submit" value="submit" />
    </form>
   
    <div class="container">
       
        <div>
        <ul class="list-items" id='list-unordered'>
            <li class="item"><a href="#" class="link">link</a></li>
            <li class="item"><a href="#" class="link">link</a></li>
            <li class="item"><a href="#" class="link">link</a></li>
        </ul>
     
    </div>
    <input type="text" id="name">
    <h1>Sample heading</h1>
      
    <a href="#" id="link" class="down-bottom">random link</a>
   <div id="btn-pr" class="btn"><button class="btn">click me</button></div>
    
    </div>


    <!-- javascript -->
    <script src="app.js"></script>
</body>

</html>





Saturday, October 17, 2020

 Error Codes:

1. If variable name starts with number below issue

Error- an identifier or keyword can not immediately follow a numeric literal(invalid or unexpected token)

let 1name= "Bal"; 

2.  if reserved keyword(let) is used twice

Error - let is disallowed as a lexically bound name

let let name ="Bal" 

// javascript stops executing if there is an error in earlier line

3. if variable is not define but trying to print/access , throws error - 

Uncaught ReferenceError : fullName is not defined

console.log(fullName) 

4. Error: Uncaught SyntaxError: Unexpected token 

Cause: syntax error in object,variable,function whatever is mentioned after Unexpected token



Sunday, August 16, 2020

Glossary

 Document

Reference : https://developer.mozilla.org/en-US/docs/Web/API/Document/Document

document : provides html structure of page

syntax: document

Properties of document with samples:

1. document.location

Location {href: "https://en.wikipedia.org/wiki/Main_Page", ancestorOrigins: DOMStringList, origin: "https://en.wikipedia.org", protocol: "https:", host: "en.wikipedia.org", …}

2. document.alinkColor

document.alinkColor='blue';

"blue"

Deprecated
This feature is no longer recommended. 


3.document.all

Deprecated since HTML5

4. document.anchors  

HTMLCollection [a, 8423465584828397121: a]

The anchors read-only property of the Document interface returns a list of all of the anchors in the document.

Deprecated
This feature is no longer recommended. 

5. document.applets

HTMLCollection []

Deprecated
This feature is no longer recommended

6. document.bgColor

The deprecated  bgColor property gets or sets the background color of the current document.

document.bgColor is deprecated in DOM Level 2 HTML

 Alternative - use of the CSS style background-color which can be accessed through the DOM with document.body.style.backgroundColor

7. document.body

The Document.body property represents the <body> or <frameset> node of the current document, or null if no such element exists.

8. document.characterSet

"UTF-8"

The properties document.charset and document.inputEncoding are legacy aliases for document.characterSet. Do not use them any more.

9. document.childElementCount

1

The ParentNode.childElementCount read-only property returns an unsigned long representing the number of child elements of the given element

Example:

var foo = document.getElementById('foo');
if (foo.childElementCount > 0) {
  // Do something
}

10. document.compatMode

"CSS1Compat"

Syntax

const mode = document.compatMode

Value

An enumerated value that can be:

  • "BackCompat" if the document is in quirks mode.
  • "CSS1Compat" if the document is in no-quirks (also known as "standards") mode or limited-quirks (also known as "almost standards") mode.

11. document.contentType

"text/html"

returns the MIME type that the document is being rendered as. This may come from HTTP headers or other sources of MIME information, and might be affected by automatic type conversions performed by either the browser or extensions.

12. document.designMode

"off"

controls whether the entire document is editable. Valid values are "on" and "off"

13. document.doctype

The returned object implements the DocumentType interface.

14. document.documentElement

Document.documentElement returns the Element that is the root element of the document (for example, the <html> element for HTML documents).

15. document.documentURI

"https://www.youtube.com/watch?v=Tec9AtyE4vA"


16. document.domain
"www.youtube.com"
 "www.youtube.com"


The domain property of the Document interface gets/sets the domain portion of the origin of the current document

17. document.embeds

HTMLCollection []

The embeds read-only property of the Document interface returns a list of the embedded <object> elements within the current document.

18. document.firstElementChild

html

The ParentNode.firstElementChild read-only property returns the object's first child Element, or null if there are no child elements.

19. document.forms

HTMLCollection [form#search-form.style-scope.ytd-searchboxsearch-formform#search-form.style-scope.ytd-searchbox]

The forms read-only property of the Document interface returns an HTMLCollection listing all the <form> elements contained in the document.

20. document.head

head
The head read-only property of the Document interface returns the <head> element of the current document.

CONTINUE


------>



--------------------------------------------------


Methods:

2. document.write  

ƒ (){$(document.body).append($.parseHTML(Array.prototype.join.call(arguments,'')));}

document.write() writes to the document stream, calling document.write() on a closed (loaded) document automatically calls document.open()which will clear the document.

If the document.write() call is embedded within an inline HTML <script> tag, then it will not call document.open(). For example:

<script> 
  document.write("<h1>Main title</h1>") 
</script>

 Chrome will not execute <script> elements injected via document.write() when specific conditions are met. For more information, refer to Intervening against document.write().


Require arguments

Note:  Use of "document.write" is deprecated. Use jQuery or mw.loader.load instead.

3. document.writeln

ƒ (){$(document.body).append($.parseHTML(Array.prototype.join.call(arguments,'')));}

Note:  Use of "document.write" is deprecated. Use jQuery or mw.loader.load instead.


4. location.search

Returns url query parameters 

i.e for url https://www.w3schools.com/js/tryit.asp?filename=tryjs_function_call_arguments

location.search will return  '?filename=tryjs_function_call_arguments'

Target Server Side implementation using .net SDK

 Target Server Side implementation using .net SDK  This reference guide shows how Adobe Target customers can install, initialize, and use th...