קטגוריה: JavaScript

להוציא את המשתמש אוטומטית לאחר זמן מה ללא פעילות ( jquery plugin inactivity )

באפליקציות אינטרנט שמצריכות כניסה – יש עניין שבצד השרת – מנוהל לרוב Session

ולא נרצה שהמשתמש ישאיר את התוכנה פתוחה ואולי משתמש אחר יגיע למחשב וישתמש בתוכנה בשמו של הראשון, ללא ידיעתו.

כדי לתת מענה לכך – אז בפריימוורקים של צד שרת , בדרך כלל אפשר לזהות אם פג תוקף ה- Session ואז לעשות redirect למשתמש.

אבל במקרה של שימוש ב- Ajax או אפליקציה שבנויה עם פרייוורק JS, צריך פתרון גם ברמת צד הלקוח.

יש הרבה פתרונות JS

אני מצאתי שהתוסף הבא ל- Jquery הכי נוח.

קישור לתוסף ב- Githut

קוד להמחשה ( במצב פרודקשיין, אולי כדאי לעשות קריאת אגקס לשרת, לבדוק אם ה Session בתוקף, אבל הקוד יעבוד היטב גם בלי זה )

הערה : השורה הראשונה מושכת את הסקריפט, אני עובד עם Laravel בצד שרת, ולכן הפקודה asset – וסימני הסוגרים המסולסלים ( כנ"ל בשורה האחרונה ) .

<!-- jquery inactivity -->
<script src="{{ asset('js/jquery-inactivity/jquery.inactivity.min.js') }}">



</script>
<script>
    // https://github.com/afklondon/jquery.inactivity
    $(document).inactivity( {
        interval: 1800000, // the timeout until the inactivity event fire [default: 3000]
        mouse: true, // listen for mouse inactivity [default: true]
        keyboard: true, // listen for keyboard inactivity [default: true]
        touch: true, // listen for touch inactivity [default: true]
        customEvents: "", // listen for custom events [default: ""]
        triggerAll: false , // if set to false only the first "activity" event will be fired [default: false]
    });
    $(document).on("inactivity", function(){
        // function that fires on inactivity
        console.log('loged out beacuse of inactivity');
        window.location = "{{ route('logout') }}";
    });


</script>

 

סיכום JavaScript למבחני – w3c – שלב 1 בסיסי

JavaScript היא שפת הסקריפטים הרשמית של ה-w3c.
מעתה היא חלק מהתקן של html, ולכן אין צורך לציין type בתגית script (אם כי לא מזיק).
השפה מאוד נפוצה בצורות רבות של ישומיים : דפי web – כשפת צד לקוח, בשרתים, בתור שפת האפליקציות של win8 , בתור שפת גישה לאלמנטים שונים ב-API נפוצים ועוד.

כתיבה למסך

document.write("
This is a heading
;");

אם משתמשים במתודה הזו אחרי שהדף נטען – אז למעשה מוחקים את תוכן הדף וכותבים תוכן חדש.

תגובה לאירועים – דוגמא :

;

שינוי ה-HTML / ה-CSS  /  או כל אוביקט אחר של משהו בדף – באמצעות JS ניתן לשנות כל אלמנט בדף.

אחת הצורות לגשת לאובייקטים בדף היא באמצעות השיטה getelementbyid , כמובן שבשביל שזה יעבוד צריך שתהיה תגית ID לאוביקט הרלוונטי בדף.

להלן דוגמא לשינוי HTML :
x=document.getElementById("demo")  //Find the element
 x.innerHTML="Hello JavaScript";     //Change the content

בצורה דומה אפשר לשנות גם מאפייני CSS, או SRC של תגית IMG ועוד ועוד.

שימוש ב-JavaScript לצורך וידוא של מילוי נכון של טפסים – אחד השימושים הנפוצים הוא וידוא שהמשתמש מילא נכון טפסים שונים. מה שנקרא וואלידציה.
דוגמא :

if isNaN(x) {alert("Not Numeric")};

שימוש בתוך HTML – בתגית script
פונקציות – כמובן אפשר לארוז רצף פקודות בתור פונקציות. מבחינת js זה לא משנה.
תגובה לאירועים בדפדפן – אפשר לשים פקודות js בתוך התגובה עצמה, ממש בתוך ה-attribute של התגית html. או לחלופין לקרוא לפונקצית js שהוגדרה במקום אחר (אין משמעות איפה מגדירים את הפונקציות בתוך הדף – זה יכול להיות ב-Head או ב-body.
הנה דוגמא :

שמירה של קובץ javascript בקובץ חיצוני – כמו css, גם js אפשר לשמור חיצונית. ואז בתוך חלק ה-Head קוראים לו באמצעות הפניה.

עכשיו כל מיני דוגמאות:
—————————–
שינוי דברים בתוך דף ה-html : – בדוגמא הבאה ניגשים לאוביקט p בתוך הדף לפי ה-id שלו, ומשנים את תוכנו.

My First Paragraph

כתיבה לתוך הדף – בדוגמא הבאה כותבים ישירות לדף. צריך לזכור, שבמידה ומפעילים את הפקודה הזו, אחרי שהדף כבר נטען (למשל באמצעות לחיצה על כפתור) אז מה שיקרה הוא – שאנחנו נגרום להחלפת ה-Html של אותו דף… וזה בדר"כ לא רצוי.
pre>

Javascript רגישה לאותיות גדולות וקטנות.
Javascript מתעלמת מרווחים, אבל עדין כל פקודה – בשורה אחת.
בסוף כל פקודה – שמים "נקודה פסיק" ;
אם רוצים "לחלק" string לכמה שורות, עושים זאת עם סימן backslash , ככה:

document.write("Hello 
World!");

הערות ב-JS עושים עם סלאש כפול בתחילת ההערה //
או באמצעות /* */ – בדיוק כמו ב-php ועוד.

משתנים :
———–
– צריך להצהיר עליהם באמצעות הפקודה var , אבל לא מגדירים את הסוג שלהם.
– אפשר להכניס להם ערך מייד כאשר מצהירים עליהם, באמצעות סימן "שווה" =, למשל var x = 5
– משתנה שהצהרנו עליו, מקבל אוטמטית ערך שנקרא undefined, אבל אם נרצה לרוקן משתנה, צריך להציב לתוכו ערך null 

person=null;

– אם מצהירים על משתנה שעבר קיים, אז המשתנה *לא* מאבד את הערך שלו.
– כשרוצים להכניס string, אפשר להשתמש במרכאות כפולות, או בגרש בודד. למשל var a="jj",b='ff' וכדומה
– כשרוצים להכניס ערכים בוליאנים, פשוט כותבים true או false , למשל var a=true

מערכים
——–
– מצהירים עליהם ככה : 

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

ובצורה מקוצרת ככה : 

var cars=new Array("Saab","Volvo","BMW");

אוביקטים
————
מגדרים אוביקטים עם סוגרים מסולסלים :

var person={firstname:"John", lastname:"Doe", id:5566};

כאשר person הוא שם האוביקט, והמאפיינם שלו הם firstname,lastname,id , והערכים של המאפיינים – זה מה שהצבנו.
אם יותר נוח – אפשר כמובן בכמה שורות ככה : 

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

איך ניגשם למאפיינים של אוביקט ?
יש 2 צורות :

name=person.lastname;
name=person["lastname"];

איך מגדירים משתנים רגילים – בתור אוביקטים ?
– תשובה : ברגע שמוסיפים להצהרה את המילה new – אז המשתנה הופך להיות אוביקט.
– ב-JS כל סוג המשתנים יכולים להיות אוביקטים, ולמען האמת יותר קל לעבוד איתם ככה.

var name = new String;
var x =    new Number;
var y =    new Boolean;