how to add custom css and js on wordpress post editor directly without using .php file

The reason your script works in your post is because you have the capability as an administrator to insert unfiltered_html in your content. Now if you call the functions of your script after you have inserted it or when the DOM is ready, then it’ll work. But for CSS, it needs to be rendered in your <head> so the style can be applied when the page loads. Once the page is loaded, your style won’t be applied anymore (unless using some javascript/jQuery).

Now this mainly is theme dependent, but some theme developers offer the possibility to add css/javacsript in the header/footer of their themes either in their themes settings page or through meta boxes on posts/pages.

That is because they have placed some hooks there so when you add code in their settings page, that code will be called by those hooks.

So, it’s not really possible to achieve this if the theme developers haven’t incorporated in their designs the necessary hooks for you to customize your styles or scripts. You will need to edit your style.css and functions.php files in order to achieve that.